@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-lightblue: rgb(184, 208, 221);
  --bg-yellow: rgb(224, 247, 23);
  --accent-pink: rgb(250, 58, 116);
  --outline: rgb(197, 58, 125);
  --white: white;

  /*header and footer colors*/
  --clr-text: black;
  --clr-outline: var(--bg-pink);
  --clr-outline-accent: var(--bg-yellow);

  --font-handwriting: 'Indie Flower', cursive;
  --font-pumpkin: 'Cherry Bomb One', system-ui;
  --font-code: 'Nimbus Mono PS', 'Courier New', monospace;
}

/* My Styles */
* {
  scrollbar-color: var(--bg-pink) white;
}

body {
  background-image:
    url(/assets/svgs/doodle-bg.svg),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 30px,
      var(--bg-lightblue) 30px,
      var(--bg-lightblue) 32px
    );

  background-size: 800px;
  color: black;
  color: hotpink;
  font-family: var(--font-handwriting);
  margin-block: 0;
}

.body-wrapper {
  max-width: 800px;
  height: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}

.yes-wrapper {
  text-align: center;
}

.link {
  color: var(--clr-text);
  text-decoration: none;
}

.yes-btn {
  font-size: 2rem;
  display: inline-block;
  text-shadow:
    1px 1px 0px var(--bg-blue),
    2px 2px 0px var(--bg-blue);
  box-shadow:
    1px 1px 0px var(--bg-blue),
    2px 2px 0px var(--bg-blue);
  border-radius: 5px;
  border: 2px solid black;
  background: transparent;
  margin-top: 4rem;
  margin-bottom: 2rem;
  padding-block: 0.4em;
  padding-inline: 0.8em;

  &:hover,
  &:focus-visible {
    border-color: var(--accent-pink);
    color: var(--accent-pink);
  }

  &:active {
    box-shadow:
      1px 1px 0px var(--bg-blue),
      2px 2px 0px var(--bg-blue),
      3px 3px 0px var(--bg-blue),
      4px 4px 0px var(--bg-blue);
  }
}

.counter {
  color: var(--clr-text);
  font-size: clamp(1rem, 1.25vw + 1rem, 1.5rem);
  font-weight: 800;
  line-height: 1;
  text-shadow:
    1px 1px 0px var(--bg-blue),
    2px 2px 0px var(--bg-blue);
}