*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #E8E4D6;
}

#topo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.icon {
  position: fixed;
  top: 40px;
  left: 40px;
  height: clamp(40px, 5.5vw, 64px);
  width: auto;
  display: block;
}

.wordmark {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: clamp(140px, 16vw, 230px);
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  .icon {
    top: 24px;
    left: 24px;
    height: 32px;
  }
  .wordmark {
    bottom: 24px;
    right: 24px;
    width: 140px;
  }
}