:root {
  color-scheme: light dark;
  --background: #f7f5f2;
  --flower-shadow: rgba(111, 0, 65, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0d0c0f;
    --flower-shadow: rgba(255, 18, 128, 0.22);
  }
}

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

body {
  margin: 0;
  overflow: hidden;
  background: var(--background);
  transition: background-color 250ms ease;
  user-select: none;
  -webkit-user-select: none;
}

main {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 2rem;
}

.logo {
  display: block;
  width: clamp(12rem, 35vw, 18.75rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  transform-origin: 50% 62%;
  filter: drop-shadow(0 1rem 2rem var(--flower-shadow));
  animation: bloom 6s ease-in-out infinite;
}

@keyframes bloom {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(0.97);
  }

  50% {
    transform: translateY(-0.5rem) rotate(1deg) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }

  .logo {
    animation: none;
  }
}