@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Indie+Flower&display=swap');

:root {
  --clr-hotpink: rgb(245, 6, 153);
  --clr-cyan: #2caeda;
  --clr-yellow: rgb(223, 221, 102);
  --clr-blue: rgb(2, 2, 122);
  --clr-green: rgb(20, 163, 20);
  --clr-red: rgb(224, 3, 3);
  --clr-pink: rgb(255, 218, 232);
  --clr-black: black;
  --clr-orange: rgb(238, 156, 3);
  --clr-grey-transparent: rgba(59, 7, 32, 0);
  --clr-grey-semi: rgba(59, 7, 32, 0.3);

  /*header and footer colors*/
  --clr-text: var(--clr-black);
  --clr-outline: var(--clr-cyan);
  --clr-outline-accent: var(--clr-hotpink);

  --font-lizzo: system-ui, sans-serif;
  --font-handwriting: 'Indie Flower', cursive;
  --font-pumpkin: 'Cherry Bomb One';
}

/* MY STYLES :) */

* {
  scrollbar-color: var(--clr-cyan) white;
}

body {
  background-color: var(--clr-pink);
  height: 100%;
  background-image: url(/assets/svgs/boys-bg.svg);
  background-size: 60vw;
  background-position: -15vw 5rem;
  background-repeat: no-repeat;
}

.body-wrapper {
  padding-inline: 2rem;
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
}

ul {
  display: flex;
  flex-direction: column;
  text-align: end;
  border-radius: 1rem;
  padding: 1.5rem;
  list-style: none;
}

header a {
  font-size: clamp(1.25rem, 1.5vw + 1rem, 2rem);
  color: var(--clr-black);
  -webkit-text-stroke: 0.3em var(--clr-cyan);
  font-family: var(--font-handwriting);
  text-decoration: none;
  paint-order: stroke;
}

header a:hover,
header a:focus-visible {
  -webkit-text-stroke: 0.3em var(--clr-hotpink);
}

.heading {
  margin-top: 3rem;
  margin-bottom: 4rem;
}

.line {
  display: inline-block;
}

.heading h1 {
  font-family: var(--font-pumpkin);
  font-size: clamp(2.2rem, 7vw + 1rem, 12rem);
  line-height: 0.8;
  color: var(--clr-dp-black);
  text-transform: uppercase;
  text-shadow:
    0.05em 0.05em 0 var(--clr-hotpink),
    -0.03em -0.03em 0 var(--clr-cyan);
  border-radius: 1rem;

  margin-bottom: 3rem;
}

.heading h2 {
  font-family: var(--font-pumpkin);
  font-size: clamp(1.5rem, 4vw + 1rem, 4rem);
  line-height: 0.9;
  color: var(--clr-dp-black);
  text-shadow: 0.05em 0.05em 0 var(--clr-cyan);

  border-radius: 1rem;
}

.how-to .grid-wrapper {
  --min-column-size: 550px;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-column-size), 100%), 1fr)
  );
}
.how-to p {
  color: var(--clr-dp-black);
  font-family: var(--font-handwriting);
  text-shadow:
    1px 1px 0px var(--clr-cyan),
    2px 2px 0px var(--clr-cyan);
  border-radius: 1rem;
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
  padding-inline: 0.5rem;
  max-width: 75ch;
}

.p-space {
  margin-bottom: 2rem;
}

.how-to h3 {
  font-family: var(--font-pumpkin);
  font-size: clamp(1.5rem, 4vw + 1rem, 4rem);
  line-height: 0.9;
  color: var(--clr-black);
  text-shadow: 0.05em 0.05em 0 var(--clr-cyan);
  border-radius: 1rem;
  padding-inline: 1rem;
  margin-block: 4rem;
}

.how-to .pink {
  text-shadow:
    1px 1px 0px var(--clr-hotpink),
    2px 2px 0px var(--clr-hotpink);
}

code {
  font-size: clamp(1.2rem, 2vw + 1rem, 2rem);
  text-shadow:
    1px 1px 0px var(--clr-cyan),
    2px 2px 0px var(--clr-cyan);
}

.code-block {
  background-color: var(--clr-black);
  outline: solid 2px var(--clr-cyan);
  color: white;
  border-radius: 0.2em;
  overflow-x: scroll;
  padding: 1rem;
  code {
    font-size: 1rem;
    text-shadow: 1px 1px 0px var(--clr-hotpink);
  }
  scrollbar-color: var(--clr-cyan) black;
}

.album-art {
  margin: 1em;
  width: clamp(260px, 35vw, 500px);
  align-self: center;
  justify-self: center;
}

.album-art > img {
  --photo-width: clamp(260px, 35vw, 500px);

  width: var(--photo-width);
  width: 100%;
  box-shadow: 0.2em 0.2em 1em 0em var(--clr-hotpink);
}

.caption {
  width: 100%;
  text-align: center;
  font-family: var(--font-pumpkin);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--clr-black);
  text-shadow: 0.05em 0.05em 0 var(--clr-hotpink);
  margin-top: 1em;
  margin-inline: auto;
}

.css-album-wrapper {
  margin-block: 4rem;
}

.album-pink {
  --width: clamp(150px, 80vw, 500px);
  display: grid;
  container-type: inline-size;
  width: var(--width);
  height: var(--width);
  grid-template-columns: repeat(6, calc(var(--width) / 6));
  grid-template-rows: repeat(5, calc(var(--width) / 5));
  background: var(--clr-pink);
  box-shadow: 0.2em 0.2em 0.5em 0em var(--clr-hotpink);
  border-radius: 0.2em;
  margin-inline: auto;
}

.album2 {
  /*for bottom message*/
  --width: clamp(100px, 80vw, 500px);
  display: grid;
  position: relative;
  container-type: inline-size;
  width: 100%;
  height: var(--width);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(5, calc(var(--width) / 5));
  background: var(--clr-pink);
  border-radius: 0.2em;
  margin-inline: auto;
}

.album {
  --width: clamp(150px, 80vw, 500px);
  display: grid;
  position: relative;
  container-type: inline-size;
  width: var(--width);
  height: var(--width);
  grid-template-columns: repeat(6, calc(var(--width) / 6));
  grid-template-rows: repeat(5, calc(var(--width) / 5));
  background: var(--clr-pink);
  box-shadow: 0.2em 0.2em 0.5em 0em var(--clr-hotpink);
  border-radius: 0.2em;
  margin-inline: auto;
}

.album::before {
  --width: clamp(150px, 80vw, 500px);
  content: '';
  position: absolute;
  width: var(--width);
  height: var(--width);
  background: linear-gradient(
    -125deg,
    var(--clr-grey-transparent),
    var(--clr-grey-semi)
  );
  z-index: 0;
}

.stripes {
  background: repeating-linear-gradient(
    -60deg,
    var(--clr-hotpink),
    var(--clr-hotpink) 4%,
    var(--clr-cyan) 4%,
    var(--clr-cyan) 12%,
    var(--clr-yellow) 12%,
    var(--clr-yellow) 20%,
    var(--clr-blue) 20%,
    var(--clr-blue) 28%,
    var(--clr-green) 28%,
    var(--clr-green) 36%,
    var(--clr-red) 36%,
    var(--clr-red) 44%,
    var(--clr-pink) 44%,
    var(--clr-pink) 52%,
    var(--clr-black) 52%,
    var(--clr-black) 60%,
    var(--clr-hotpink) 60%,
    var(--clr-hotpink) 68%,
    var(--clr-cyan) 68%,
    var(--clr-cyan) 76%,
    var(--clr-orange) 76%,
    var(--clr-orange) 84%,
    var(--clr-blue) 84%,
    var(--clr-blue) 92%,
    var(--clr-green) 92%,
    var(--clr-green) 100%
  );
}

.boys {
  grid-column: 1/-1;
  grid-row: 1/-1;
  justify-self: center;
  align-self: center;
  font-family: var(--font-lizzo);
  color: white;
  font-size: 33cqi;
  z-index: 10;
}

.lizzo {
  grid-column: 5/-1;
  grid-row: 4;
  align-self: center;
  justify-self: center;
  margin-top: -3cqi;
  font-family: var(--font-lizzo);
  color: white;
  font-size: 6cqi;
  z-index: 10;
}

.rainbow-outline-lg {
  background-clip: text;
  background-image: linear-gradient(
    to right,
    var(--clr-pink),
    var(--clr-hotpink),
    var(--clr-red),
    var(--clr-yellow),
    var(--clr-hotpink)
  );
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: 0.8cqi;
}

.rainbow-outline-sm {
  background-clip: text;
  background-image: linear-gradient(
    to right,
    var(--clr-pink),
    var(--clr-hotpink),
    var(--clr-red),
    var(--clr-orange)
  );
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: 0.4cqi;
}

/*BOTTOM MESSAGE*/

.line1 {
  grid-column: 1/-1;
  grid-row: 1/-1;
  justify-self: end;
  align-self: center;
  margin-right: 4cqi;
  font-family: var(--font-lizzo);
  color: white;
  font-size: 7cqi;
  z-index: 10;
}

.line2 {
  grid-column: 1/-1;
  grid-row: 4;
  align-self: baseline;
  justify-self: end;
  margin-right: 4cqi;
  font-family: var(--font-lizzo);
  color: white;
  font-size: 7cqi;
  z-index: 10;
}