html {
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* font-family: 'Fearlessly Authentic'; */
  font-family: 'Times New Roman', 'Times', ui-serif, serif;
  color-scheme: dark only;
  background-color: hsl(20, 14%, 4%);
   color: hsl(24, 6%, 70%); 
  text-wrap: balance;
}

::selection {
  background-color: hsl(74, 53%, 60%);
  color: hsl(240, 6%, 10%);
}

body {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.75' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%23060603' points='800 100 0 200 0 800 1600 800 1600 200'/%3E%3Cpolygon fill='%230c0d07' points='800 200 0 400 0 800 1600 800 1600 400'/%3E%3Cpolygon fill='%2312130a' points='800 300 0 600 0 800 1600 800 1600 600'/%3E%3Cpolygon fill='%23171a0d' points='1600 800 800 400 0 800'/%3E%3Cpolygon fill='%231d2010' points='1280 800 800 500 320 800'/%3E%3Cpolygon fill='%23232714' points='533.3 800 1066.7 800 800 600'/%3E%3Cpolygon fill='%23292D17' points='684.1 800 914.3 800 800 700'/%3E%3C/g%3E%3C/svg%3E") 100% / cover no-repeat;
  background-position: center;
  text-wrap: pretty;
  padding: 64px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;

  >:where(*) {
    max-width: 1200px;
    margin: 0 auto;
  }
}

main {
  margin: auto;
  font-style: italic;
  color: hsl(74, 53%, 60%);
}

footer {
  font-size: 0.85rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  margin-top: 5rem;
}

h1 {
  font-size: 2rem;
  line-height: 1.25;
  text-wrap: balance;
  text-align: center;
  font-weight: 600;
}

@media (width >=320px) {
  h1 {
    font-size: 2.125rem;
  }
}

@media (width >=480px) {
  h1 {
    font-size: clamp(2rem, calc(2rem + 2.5vw), 4rem);
  }
}

@media (width >=700px) {
  body {
    background-attachment: fixed;
  }

  h1 {
    font-size: 4rem;
  }
}

#itsame {
  display: inline-block;
  position: relative;
  overflow: clip;
  transition: all 250ms ease;
  border-bottom: 1px dashed transparent;

  &>span,
  &::after {
    transition: inherit;
    display: inline-block;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-name: itsame;
    text-wrap: nowrap;
  }

  &::after {
    content: 'ah-me, Mario.';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    translate: 0 200%;
    animation-name: itsame2;
    color: hsl(53, 74%, 60%);
  }
}

@keyframes itsame {
  10% {
    translate: 0 0;
  }

  20%,
  60% {
    translate: 0 -100%;
  }

  70% {
    translate: 0 0;
  }
}

@keyframes itsame2 {
  10% {
    translate: 0 200%;
  }

  20%,
  60% {
    translate: 0 0;
  }

  70% {
    translate: 0 200%;
  }
}