@import"https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Indie+Flower&display=swap";:root{--bg-pink: rgb(252, 193, 225);--bg-blue: rgb(140, 189, 218);--bg-yellow: rgb(224, 247, 23);--accent-pink: rgb(250, 58, 116);--white: white;--clr-text: black;--clr-outline: rgb(252, 193, 225);--clr-outline-accent: rgb(224, 247, 23);--font-handwriting: "Indie Flower", cursive;--font-pumpkin: "Cherry Bomb One", system-ui}*{scrollbar-color:var(--bg-pink) white}body{min-height:100vh;font-family:var(--font-handwriting);font-size:1.25rem;background-color:var(--bg-pink);background-image:url(/assets/svgs/ranma-white-blobs.svg);background-size:250px;position:relative;display:grid;grid-template-columns:1fr max-content 1fr;grid-template-rows:repeat(10,10vh)}.bg-white{grid-column:2/3;grid-row:1/-1;height:max-content;max-width:clamp(40ch,80vw + 1rem,100ch);padding-inline:clamp(2.5rem,4vw + 1rem,6rem);background-color:var(--white);z-index:10;--mask: radial-gradient(55.9px at 75px 50%, #000 99%, #0000 101%) 0 calc(50% - 50px) / 51% 100px repeat-y, radial-gradient(55.9px at -50px 50%, #0000 99%, #000 101%) 25px 50% / calc(51% - 25px) 100px repeat-y, radial-gradient(55.9px at calc(100% - 75px) 50%, #000 99%, #0000 101%) 100% calc(50% - 50px) / 51% 100px repeat-y, radial-gradient(55.9px at calc(100% + 50px) 50%, #0000 99%, #000 101%) calc(100% - 25px) 50% / calc(51% - 25px) 100px repeat-y;-webkit-mask:var(--mask);mask:var(--mask)}.bg-blue{grid-column:1/-1;grid-row:2/-1;background-color:var(--bg-blue);background-image:url(/assets/svgs/ranma-yellow-dots.svg);background-size:250px;transform:skewY(10deg);z-index:0}.bg-yellow{grid-column:1/-1;grid-row:7/-1;background-color:var(--bg-yellow);background-image:url(/assets/svgs/ranma-blue-blobs.svg);background-size:250px;transform:skewY(-4deg);z-index:0}.ed-emoji{width:clamp(100px,20vw,200px);filter:drop-shadow(.25em .25em 0px var(--bg-blue));float:right;shape-outside:circle(20vw);margin:1rem}.tilt-right{rotate:10deg}.tilt-left{rotate:-10deg}h1,h2{font-family:var(--font-pumpkin);margin-bottom:3rem}h3{font-family:var(--font-pumpkin);margin-bottom:1rem}h1{font-size:clamp(2.25rem,5vw + 1rem,7rem);line-height:.8;color:#000;text-shadow:1px 1px 0 var(--bg-yellow),2px 2px 0 var(--bg-yellow),3px 3px 0 var(--bg-yellow),-1px -1px 0 var(--bg-pink),-2px -2px 0 var(--bg-pink),-3px -3px 0 var(--bg-pink);text-transform:uppercase;paint-order:stroke}h2{font-size:clamp(2rem,4vw + 1rem,4rem);line-height:.8;color:#000;text-transform:uppercase;text-shadow:1px 1px 0px var(--bg-blue),2px 2px 0px var(--bg-blue);paint-order:stroke}.nelly-tasha{background:url(assets/photos/tasha-nelly.jpg);background-size:contain;background-repeat:no-repeat;background-color:var(--bg-pink);background-blend-mode:darken;width:clamp(50px,50vw,500px);height:clamp(50px,50vw,500px);margin-inline:auto;border-radius:1rem}p,ol{font-size:clamp(1.25rem,1.5vw + 1rem,2rem);text-shadow:1px 1px 0px var(--bg-blue),2px 2px 0px var(--bg-blue)}.p-space{margin-bottom:3rem}.text a{color:#000;font-weight:800;text-decoration-style:wavy}.text a:hover,.text a:focus-visible{color:var(--accent-pink)}.text button{cursor:pointer;border:none;background:none;font-weight:800;font-size:clamp(1.25rem,1.5vw + 1rem,2rem);text-shadow:1px 1px 0px var(--bg-blue),2px 2px 0px var(--bg-blue);text-decoration-line:underline;text-decoration-style:wavy}.text button:hover,.text button:focus-visible{color:var(--accent-pink)}.text{margin-top:3rem;margin-bottom:5rem}.ranma{width:clamp(200px,80vw,500px);max-height:calc(100vh - 5rem);padding:1rem;border:var(--bg-pink) solid 5px;border:none;border-radius:10px;box-shadow:0 0 60px 0 var(--accent-pink);margin-inline:auto;margin-top:4rem;margin-bottom:1rem;line-height:1.1;text-align:center;overflow-y:scroll}.ranma h3{font-family:var(--font-pumpkin);font-size:clamp(1.5rem,3vw + 1rem,3rem);text-shadow:1px 1px 0 var(--bg-blue),2px 2px 0 var(--bg-blue)}.ranma img{max-height:600px;border-radius:10px;margin-top:1rem}.ranma button{border-radius:10px;text-decoration:none;background:var(--bg-pink);margin-block:1rem;padding-block:.25rem;padding-inline:1rem}.ranma button:hover,.ranma button:focus-visible{background-color:var(--bg-yellow)}
