.love-letter{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;padding:100px max(8%,24px) 110px;background:repeating-linear-gradient(90deg,#e95180 0 46px,#e54878 46px 92px);color:#fffbed}
.letter-copy{position:relative;z-index:1;max-width:940px;margin:auto;font:400 17px/1.75 'Space Mono',monospace}
.letter-copy h2{font:inherit;font-weight:700;margin:0 0 22px}
.letter-copy p{margin:0 0 28px}
.letter-copy h2,.letter-copy p{transition:text-shadow .3s ease,color .3s ease;outline-offset:7px;border-radius:4px}
.letter-copy h2:hover,.letter-copy p:hover,.letter-copy h2:focus-visible,.letter-copy p:focus-visible{color:#fff;text-shadow:0 0 9px #fff9,0 0 22px #ffe9a655}
.letter-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.letter-star{position:absolute;width:48px;height:48px;image-rendering:pixelated;animation:letter-drift 7s ease-in-out infinite alternate}
.star-0{left:4%;top:12%}.star-1{right:7%;top:17%;animation-delay:-3s}.star-2{left:9%;top:43%;width:25px;height:25px;animation-delay:-5s}.star-3{right:3%;top:36%;width:25px;height:25px;animation-delay:-2s}.star-4{left:4%;top:74%;animation-delay:-4s}.star-5{right:3%;top:57%;animation-delay:-1s}.star-6{right:4%;top:86%;animation-delay:-6s}.star-7{right:17%;bottom:5%;width:25px;height:25px;animation-delay:-3s}
.love-letter .section-dedication{color:#fffbed}
@keyframes letter-drift{from{transform:translateY(-5px) rotate(-6deg);opacity:.8}to{transform:translateY(7px) rotate(6deg);opacity:1}}
@media(min-width:1100px){.love-letter{padding-left:20%;padding-right:20%}}
@media(max-width:700px){.love-letter{padding:65px 30px 100px}.letter-copy{font-size:14px;line-height:1.85}.letter-copy p{margin-bottom:24px}.letter-star{width:27px;height:27px;opacity:.6}.star-0,.star-4{left:1%}.star-1,.star-5,.star-6{right:1%}.star-2{left:0}.letter-copy{z-index:1}}
@media(prefers-reduced-motion:reduce){.letter-star{animation:none}.letter-copy h2,.letter-copy p{transition:none}}