:root {
  --max-width: 600px;
}

.viewport {
  position: absolute;
  overflow: hidden auto;
  scroll-behavior: smooth;
  perspective: 100px;
  inset: 0;
}

/* * {
  box-sizing: border-box;
} */

[hidden] {
  display: none;
}

@font-face {
  font-family: 'TheFont';
  src: url("https://garet.typeforward.com/assets/fonts/shared/TFMixVF.woff2") format('woff2');
}

body {
  font-size: 16px;
  margin: 0;
}

.content {
  width: 100%;
  margin: auto;
  max-width: var(--max-width, 600px);
  transform-style: preserve-3d;
  background-color: #fff;
  border-radius: 1rem;
  padding: .5rem 1.5rem;
}


h1, h2 {
  font-family: 'TheFont';
}
.anim {
  animation: letter-breathe 6s ease-in-out infinite;
}
.anim--slow {
  animation: letter-breathe 14s ease-in-out infinite;
}
@keyframes letter-breathe {
  from, to {
    font-variation-settings: 'wght' 100;
  }
  50% {
    font-variation-settings: 'wght' 900;
  }
}


/*
  BANNER
*/
.banner {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  font-family: 'TheFont';
  transform-style: preserve-3d;
}
/* TODO: ATTENTION ?? */
.banner::before {
  position: absolute;
  content: '';
  inset: 0;
  background-color: #fff;

  --z: -220;
  transform: translate3d(var(--x, 0),var(--y, 0),calc(var(--z, 0) * 1px)) scale(calc(1 + var(--z, 0) * -1 / 100));
}
/* TODO: ATTENTION END ?? */
.banner .content {
  background: none;
}
.banner h1 {
  --z: -80;

  font-size: 3rem;
  text-align: center;
  margin-block: 10px 20px;
  transform: translate3d(var(--x, 0),var(--y, 0),calc(var(--z, 0) * 1px)) scale(calc(1 + var(--z, 0) * -1 / 100));
}
.banner h2 {
  --z: -100;

  text-align: center;
  margin-block: -10px 0px;
  transform: translate3d(var(--x, 0),var(--y, 0),calc(var(--z, 0) * 1px)) scale(calc(1 + var(--z, 0) * -1 / 100));
}
.banner button {
  --z: -200;

  display: block;
  margin: 1rem auto;
  padding: .4rem 1.2rem;
  margin-top: 32%;
  transform: translate3d(var(--x, 0),var(--y, 0),calc(var(--z, 0) * 1px)) scale(calc(1 + var(--z, 0) * -1 / 100));
  pointer-events: all;;
}


/*
  CONTENT
*/
main {
  transform-style: preserve-3d;
  z-index: 1;
}


/*
  FOOTER
*/
.footer {
  position: sticky;
  bottom: 0;
  padding-block: 100px 120px;
  list-style: none;
  z-index: -1;
}
.footer .content {
  display: flex;
  gap: 5rem;
  background-color: darkred;
  color: #fff;
}
.footer ul {
  list-style: none;
  flex: 1;
  margin-block-start: 0;
}