@import url('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;

  /*header and footer colors*/
  --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;
}

/* MY STYLES :) */
* {
  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;

  /*wavy sides*/
  --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(0.25em 0.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;
}

.howdy {
  font-size: clamp(2.25rem, 5vw + 1rem, 6.5rem);
  line-height: 0.8;
  color: black;
  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;
  overflow-wrap: normal;
}

h2 {
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  line-height: 0.8;
  color: black;
  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: black;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-style: wavy;
}

.text a:hover,
.text a:focus-visible {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-style: wavy;
  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: 0px 0px 60px 0px 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: 0.25rem;
  padding-inline: 1rem;
}

.ranma button:hover,
.ranma button:focus-visible {
  background-color: var(--bg-yellow);
}