html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  .logo {
    width: min(80vw, 500px);
    aspect-ratio: 1;

    img {
      display: block;
      width: 100%;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
      transition: transform 0.85s ease-in-out;
    }

    &:hover img {
      transform: rotateY(180deg);
    }
  }

  h1 {
    margin: var(--space-4) 0 0;
    font-family: var(--serif);
    font-weight: normal;
    font-size: clamp(3rem, 12vw, 6rem);
    letter-spacing: var(--track-display);
  }

  p {
    margin: var(--space-2) 0 0;
    color: var(--secondary);
  }
}

@media (prefers-reduced-motion: reduce) {
  main .logo img {
    transition: none;
  }

  main .logo:hover img {
    transform: none;
  }
}