* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

html,
body,
a,
button {
  cursor: url("assets/cursor.png") 0 0, auto;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;

  color: #90d5ff;
  text-align: center;
  font-family: "Times New Roman", serif;

  background-color: #ffd7ed;
  background-image: url("assets/background.jpg");
  background-repeat: repeat;
  background-size: 500px auto;

  animation: move-background 15s linear infinite;
}

@keyframes move-background {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -500px 0;
  }
}

.wrap {
  width: min(760px, calc(100% - 24px));
  margin: 24px auto;
}

.cake {
  display: block;
  width: min(500px, 100%);
  height: auto;
  margin: 0 auto 10px;
}

.picture-box {
  position: relative;
  width: min(650px, 100%);
  margin: 0 auto;
  overflow: hidden;

  border: 6px double #37b3ff;
  box-shadow: 5px 5px 0 #003759;
}

.picture-box > img {
  display: block;
  width: 120%;
  max-width: none;
  height: auto;

  animation: move-box-picture 4s ease-in-out infinite alternate;
}

.letter {
  position: relative;
  width: min(650px, 100%);
  margin: 0 auto;
}

.letter > img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes move-box-picture {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-16.5%);
  }
}

.box-words {
  position: absolute;
  inset: 14% 11%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: auto;
  padding: 8px;
  color: white;

  text-shadow:
    -1px -1px 0 #003759,
     1px -1px 0 #003759,
    -1px  1px 0 #003759,
     1px  1px 0 #003759;
}

.box-words h1 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 5vw, 2.8rem);
}

.box-words p {
  margin: 0;
  font-size: clamp(0.9rem, 2.8vw, 1.2rem);
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

  margin: 14px auto 0;
}

.button {
  display: inline-block;
  padding: 9px 14px;

  border: 3px outset white;
  background: #37b3ff;
  color: #003759;

  font: inherit;
  font-weight: bold;
  text-decoration: none;

  box-shadow: 3px 3px 0 #003759;
  color: white;

  text-shadow:
  -1px -1px 0 #003759,
   1px -1px 0 #003759,
  -1px  1px 0 #003759,
   1px  1px 0 #003759;
}

.button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #003759;
}

.button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #003759;
}

.card {
  width: min(700px, 100%);
  margin: 20px auto;
  padding: 18px;

  background: transparent;
  border: 0;
  box-shadow: none;
}

.card.with-picture {
  padding: 55px;

  background-image: var(--panel);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.card h1 {
  margin-top: 0;
    color: white;

  text-shadow:
    -1px -1px 0 #003759,
     1px -1px 0 #003759,
    -1px  1px 0 #003759,
     1px  1px 0 #003759;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;

  border: 4px solid white;
  box-shadow: 3px 3px 0 #003759;
}

.letter-text {
  position: absolute;
  inset: 10% 12%;

  overflow: auto;

  color: #3c2638;
  text-align: left;
  font-family: Georgia, serif;
  font-size: clamp(0.85rem, 2.4vw, 1.08rem);
  line-height: 1.5;
}

.letter-text h1 {
  margin-top: 0;
  text-align: center;
}

.soundcloud {
  display: block;
  width: 100%;
  height: 166px;
  margin: 14px auto;
  border: 0;
}

.small-note {
  font-size: 0.86rem;
}

.cursor-confetti {
  position: fixed;
  z-index: 10000;

  width: 5px;
  height: 11px;

  pointer-events: none;

  animation: cursor-confetti-fall 2s linear forwards;
}

@keyframes cursor-confetti-fall {
  from {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    opacity: 0;

    transform:
      translate(
        calc(-50% + var(--move-x)),
        var(--move-y)
      )
      rotate(var(--rotate));
  }
}

.page-confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 9998;

  overflow: hidden;
  pointer-events: none;
}

.page-confetti {
  position: absolute;
  top: -25px;

  animation: page-confetti-fall linear forwards;
}

@keyframes page-confetti-fall {
  from {
    transform:
      translateX(0)
      translateY(0)
      rotate(0deg);
  }

  to {
    transform:
      translateX(var(--move-x))
      translateY(110vh)
      rotate(900deg);
  }
}

.photo-layer {
  position: fixed;
  inset: 0;
  z-index: 9997;

  overflow: hidden;
  pointer-events: none;
}

.pop-photo {
  position: absolute;

  width: clamp(120px, 24vw, 230px);
  max-height: 60vh;
  object-fit: contain;

  opacity: 1;
  border: 4px solid white;
  box-shadow: 4px 4px 0 #003759;

  pointer-events: none;
  transition: opacity 0.5s;

  animation: photo-pulse 1.4s ease-in-out infinite;
}

.pop-photo.fade-out {
  opacity: 0;
}

@keyframes photo-pulse {
  0%,
  100% {
    transform:
      scale(1)
      rotate(var(--angle));
  }

  50% {
    transform:
      scale(1.07)
      rotate(var(--angle));
  }
}

@media (max-width: 520px) {
  .wrap {
    margin-top: 12px;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .card.with-picture {
    padding: 35px 20px;
  }

  .box-words {
    inset: 13% 9%;
  }
}
.soundcloud-credit,
.soundcloud-credit a {
  color: white !important;
  opacity: 1 !important;

  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}
.leaf-fall {
  position: fixed;
  top: -70px;
  z-index: 9999;
  pointer-events: none;
  animation: leaf-drop var(--fall-time) linear forwards;
}

.leaf-fall img {
  display: block;
  width: var(--leaf-size);
  height: auto;
  animation: leaf-sway 2.5s ease-in-out infinite alternate;
}

.leaf-fall.no-sway img {
  animation: leaf-spin 3s linear infinite;
}

@keyframes leaf-drop {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(120vh);
  }
}

@keyframes leaf-sway {
  from {
    transform:
      translateX(calc(var(--sway) * -1))
      rotate(-30deg);
  }

  to {
    transform:
      translateX(var(--sway))
      rotate(50deg);
  }
}

@keyframes leaf-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}