@import url("https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@500;600&display=swap");

:root {
  color-scheme: light;
  --ink: #000000;
  --note: rgba(255, 244, 168, 0.82);
  --note-edge: rgba(255, 253, 221, 0.76);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  background: #e7f6fb;
}

.stage {
  position: relative;
  display: grid;
  min-height: 100vh;
  align-items: center;
  justify-items: center;
  padding: 0 0 12vh 0;
  isolation: isolate;
}

.wallpaper {
  position: absolute;
  inset: -8%;
  overflow: hidden;
  background:
    linear-gradient(180deg, #bfeaff 0 30%, #79d7ee 30% 42%, #42abc3 42% 54%, #f7dfaa 54% 100%);
  filter: blur(22px) saturate(1.12);
  transform: scale(1.07);
  z-index: -2;
}

.wallpaper::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.26)),
    radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.42), transparent 12%);
  backdrop-filter: blur(18px);
}

.sun,
.ocean,
.shore,
.umbrella,
.palm,
.towel {
  position: absolute;
}

.sun {
  top: 8%;
  left: 58%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: #ffd670;
  box-shadow: 0 0 100px rgba(255, 214, 112, 0.8);
}

.ocean {
  left: -8%;
  width: 116%;
  border-radius: 50%;
}

.ocean-far {
  top: 33%;
  height: 180px;
  background: rgba(56, 181, 205, 0.78);
}

.ocean-near {
  top: 44%;
  height: 210px;
  background: rgba(22, 139, 174, 0.7);
}

.shore {
  inset: auto -10% 0;
  height: 43%;
  background:
    radial-gradient(ellipse at 58% 10%, rgba(255, 255, 255, 0.7), transparent 18%),
    linear-gradient(180deg, rgba(247, 224, 174, 0.92), rgba(232, 177, 111, 0.68));
}

.umbrella {
  right: 10%;
  bottom: 22%;
  width: 250px;
  height: 130px;
  border-radius: 140px 140px 22px 22px;
  background:
    linear-gradient(90deg, rgba(255, 108, 95, 0.86) 0 33%, rgba(255, 244, 196, 0.92) 33% 66%, rgba(81, 171, 220, 0.86) 66%);
  transform: rotate(-8deg);
}

.umbrella::after {
  position: absolute;
  top: 105px;
  left: 126px;
  width: 12px;
  height: 190px;
  content: "";
  background: rgba(116, 85, 61, 0.62);
  transform: rotate(10deg);
  transform-origin: top;
}

.palm {
  width: 340px;
  height: 470px;
}

.palm::before {
  position: absolute;
  left: 150px;
  top: 116px;
  width: 34px;
  height: 360px;
  content: "";
  border-radius: 999px;
  background: rgba(101, 70, 45, 0.55);
  transform: rotate(8deg);
}

.palm::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 26% 28%, rgba(31, 124, 76, 0.66) 0 18%, transparent 19%),
    radial-gradient(ellipse at 39% 16%, rgba(41, 139, 86, 0.7) 0 19%, transparent 20%),
    radial-gradient(ellipse at 50% 10%, rgba(35, 126, 78, 0.72) 0 20%, transparent 21%),
    radial-gradient(ellipse at 62% 17%, rgba(37, 130, 80, 0.68) 0 19%, transparent 20%),
    radial-gradient(ellipse at 75% 30%, rgba(32, 116, 72, 0.64) 0 18%, transparent 19%),
    radial-gradient(ellipse at 50% 32%, rgba(53, 154, 93, 0.46) 0 24%, transparent 25%);
}

.palm-left {
  left: -12%;
  bottom: -10%;
  transform: scale(1.28) rotate(-10deg);
}

.palm-left-mid {
  left: 8%;
  bottom: 4%;
  transform: scale(0.96) rotate(6deg);
  opacity: 0.74;
}

.palm-center {
  left: 26%;
  bottom: -5%;
  transform: scale(1.08) rotate(-3deg);
  opacity: 0.78;
}

.palm-center-back {
  left: 44%;
  top: 9%;
  transform: scale(0.72) rotate(13deg);
  opacity: 0.58;
}

.palm-right {
  right: -18%;
  top: -8%;
  transform: scale(1.3) rotate(18deg);
}

.palm-right-low {
  right: 2%;
  bottom: -5%;
  transform: scale(1.04) rotate(-14deg);
  opacity: 0.68;
}

.towel {
  bottom: 12%;
  width: 180px;
  height: 76px;
  border-radius: 18px;
  transform: rotate(-8deg);
}

.towel-a {
  left: 22%;
  background: repeating-linear-gradient(90deg, #f8857e 0 30px, #fff0b5 30px 60px);
}

.towel-b {
  left: 48%;
  bottom: 9%;
  background: repeating-linear-gradient(90deg, #56bad7 0 28px, #f6e7ad 28px 56px);
  transform: rotate(5deg);
}

.note-wrap {
  width: min(46vw, 210px);
  perspective: 1100px;
  transform: translate(-24vw, -9vh);
}

.glass-note {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  min-height: 0;
  place-items: center;
  padding: 20px;
  border: 1px solid var(--note-edge);
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.3), transparent 34%),
    linear-gradient(165deg, var(--note), rgba(247, 219, 108, 0.7));
  box-shadow:
    0 24px 58px rgba(91, 75, 37, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -36px 54px rgba(198, 142, 34, 0.11);
  transform: rotate(-5deg) rotateX(4deg);
  backdrop-filter: blur(22px) saturate(1.25);
}

.glass-note::before {
  content: none;
}

.glass-note::after {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 38%;
  height: 36%;
  content: "";
  border-radius: 999px 6px 6px 999px;
  background: rgba(255, 255, 255, 0.2);
  filter: blur(18px);
}

.glass-note p {
  margin: 0;
  color: var(--ink);
  font-family: "Shantell Sans", "Comic Sans MS", "Bradley Hand", cursive;
  font-size: clamp(1rem, 2.25vw, 1.65rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
}

@media (max-width: 720px) {
  .sun {
    left: 52%;
    width: 130px;
    height: 130px;
  }

  .umbrella {
    right: -14%;
    width: 210px;
  }

  .palm-left {
    left: -46%;
  }

  .palm-left-mid {
    left: -6%;
  }

  .palm-center,
  .palm-center-back {
    left: 24%;
  }

  .palm-right-low {
    right: -28%;
  }

  .towel-a {
    left: 8%;
  }

  .towel-b {
    left: 46%;
  }

  .note-wrap {
    transform: translate(-18vw, -10vh);
  }

  .glass-note {
    min-height: 0;
    padding: 18px;
  }
}