@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Indie+Flower&display=swap');
:root {
  --bg-clr: rgb(163, 114, 209);
  --pushpin-clr: rgb(115, 241, 12);
  --highlighter: rgb(250, 250, 22);
  --darkpurple: rgb(87, 0, 128);
  --dark-txt-clr: rgb(41, 2, 63);
  --whitish-clr: rgb(252, 237, 237);
  --pumpkin-orange: rgb(246, 148, 63);

  /*header and footer colors*/
  --clr-text: var(--dark-txt-clr);
  --clr-outline: var(--whitish-clr);
  --clr-outline-accent: var(--pushpin-clr);

  --font-handwriting: 'Indie Flower', cursive;
  --font-pumpkin: 'Cherry Bomb One';
}

/*my styles*/
* {
  scrollbar-color: var(--pushpin-clr) white;
}

@keyframes grow6 {
  0% {
    mask-size: 1px;
  }
  100% {
    mask-size: max(300dvh, 300dvw);
  }
}

body {
  font-family:
    var(--font-handwriting), 'Segoe Print', 'Bradley Hand', Chilanka,
    TSCu_Comic, casual, cursive;

  color: var(--whitish-clr);
  height: 100%;
  margin: 0;
  padding-top: 1rem;
  background-color: var(--bg-clr);

  background-image: url(/assets/svgs/halloween-bg.svg);
  background-repeat: repeat;
  background-size: 400px;

  /*
  position: relative;
  */
}

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

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

.pumpkin-emoji {
  width: clamp(150px, 25vw, 345px);
  filter: drop-shadow(0.25em 0.25em 0px var(--darkpurple));
}

.pumpkin-emoji-wrapper {
  float: right;
  shape-outside: circle(20vw);
  margin: 1rem;
  rotate: 10deg;
  background: repeating-conic-gradient(
    from 65deg at 50% 50%,
    var(--pushpin-clr) 0deg 5deg,
    transparent 5deg 30deg,
    var(--pushpin-clr) 30deg 32deg,
    transparent 32deg 57deg,
    var(--pushpin-clr) 57deg 60deg,
    transparent 60deg 85deg
  );

  position: relative;

  border-radius: 50%;

  padding: clamp(50px, 18vw, 120px);
  width: fit-content;
  z-index: -10;
}

/*.pumpkin-emoji::before {
  content: '';
  width: fit-content;
  border-radius: 50%;
  border: 1px solid hotpink;
  position: absolute;
  inset: 0;
  top: -50%;
  left: -50%;
  z-index: -10;
}
  */

h1 {
  font-family: var(--font-pumpkin);
  font-size: clamp(2.2rem, 6vw + 1rem, 7rem);
  line-height: 0.8;
  color: var(--pumpkin-orange);
  width: fit-content;
  text-transform: uppercase;
  text-shadow:
    0.05em 0em 0px var(--highlighter),
    0.1em 0em 0px var(--darkpurple);
  /*
  -webkit-text-stroke: 20px var(--highlighter);
  paint-order: stroke;
*/

  padding-inline: 1rem;
  margin-bottom: 0.9em;
}

.description {
  /*background-color: var(--whitish-clr);*/
  color: var(--dark-txt-clr);
  text-shadow:
    1px 1px 0px var(--whitish-clr),
    2px 2px 0px var(--whitish-clr);
  border-radius: 1rem;
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
  padding: 1.5rem;
  max-width: 75ch;
  -webkit-text-stroke: 0.3em var(--clr-outline);
  paint-order: stroke;
}

.submissions {
  --min-column-size: 300px;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-column-size), 100%), 1fr)
  );
  gap: 4rem;
  row-gap: 6rem;
}

.pumpkin-emoji-whistle {
  width: 175px;
  filter: drop-shadow(0.25em 0.25em 0px var(--darkpurple));
  justify-self: center;
  align-self: center;
  rotate: -12deg;
  transition: rotate 1100ms
    linear(
      0,
      0.01 0.7%,
      0.04 1.4%,
      0.165 3%,
      0.815 8.4%,
      1.052 10.8%,
      1.197 13.1%,
      1.236 14.2%,
      1.258 15.4%,
      1.26 16.8%,
      1.237 18.4%,
      0.998 26.5%,
      0.952 29%,
      0.933 31.5%,
      0.938 34.6%,
      1 42.7%,
      1.017 47.5%,
      0.996 63.4%,
      1
    );

  &:hover {
    rotate: 40deg;
  }
}

/* accessible polaroid button stuff */
.polaroid {
  --photo-width: clamp(225px, 35vw, 300px);
  container-type: inline-size;
  justify-self: center;
  background-color: var(--whitish-clr);
  width: var(--photo-width);
  height: calc(var(--photo-width) * 1.15);
  border-radius: 2px;
  border: 3px solid var(--darkpurple);
  box-shadow: 2px 2px 5px 0px var(--darkpurple);
  padding-top: calc(var(--photo-width) / 15);
  padding-inline: calc(var(--photo-width) / 15);

  position: relative;
  /*border-style: none;*/
}

.polaroid:hover,
.polaroid:focus-visible {
  transform: rotate(4deg);
  box-shadow: 2px 2px 20px 0px var(--highlighter);
  cursor: pointer;
}

/*the pushpin*/
.polaroid::before {
  content: '';
  background-color: var(--pushpin-clr);
  border-radius: 50%;
  border: 3px solid var(--darkpurple);
  width: 10cqw;
  height: 10cqw;
  box-shadow: 1px 1px 1px 0px var(--bg-clr);
  position: absolute;
  inset: 0;
  top: -2cqw;
  left: 54cqw;
  z-index: 10;
}

.photo {
  object-fit: cover;
  height: 100cqw;
  width: 100cqw;
  border-radius: 1px;
  border: 3px solid var(--darkpurple);
  opacity: 0.9;
}

.pumpkin-label {
  margin-block: 1rem;
  color: var(--dark-txt-clr);
  text-align: center;
  font-family: var(--font-handwriting);
  font-size: 10cqw;
  font-weight: 800;
  line-height: 1;
  text-shadow:
    1px 1px 0px var(--highlighter),
    2px 2px 0px var(--highlighter);
}

/*
[popover]:not(:popover-open):not(dialog[open]) {
  display: none;
}
  */

[popover] {
  font-family: var(--font-handwriting);
  color: var(--dark-txt-clr);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 0.9;
  max-width: 45ch;
  max-height: calc(100vh - 4rem);

  background-color: var(--highlighter);
  box-shadow: 2px 2px 5px 0px var(--darkpurple);
  border-radius: 1.5rem;
  border: none;
  margin-inline: auto;
  margin-top: 4rem;
  padding-inline: 1rem;
  overflow-y: scroll;

  img {
    max-width: 100%;
    margin-inline: auto;
    border-radius: 1.5rem;
  }

  p {
    padding-block: 1rem;
  }

  video {
    display: block;
    padding-block: 1rem;
    max-width: 250px;
    border-radius: 1.5rem;
  }

  button {
    cursor: pointer;
    border: none;
    font-family: var(--font-handwriting);
    color: var(--dark-txt-clr);
    font-size: 1.5rem;
    font-weight: 800;
    background-color: var(--pushpin-clr);
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 2px 2px 0px 0px var(--darkpurple);
    margin-block: 1rem;
  }

  button:hover {
    background-color: var(--pumpkin-orange);
    box-shadow: 2px 2px 0px 0px var(--bg-clr);
  }
}

h2 {
  color: var(--dark-txt-clr);
  text-align: center;
  font-family: var(--font-handwriting);
  font-size: 10cqw;
  font-weight: 800;
  margin-top: 1rem;
  line-height: 1;
  text-shadow:
    1px 1px 0px var(--highlighter),
    2px 2px 0px var(--highlighter);
}

.tilt-left3 {
  rotate: -3deg;
}

.tilt-left2 {
  rotate: -2deg;
}

.tilt-right3 {
  rotate: 3deg;
}

.tilt-right2 {
  rotate: 2deg;
}

.close {
  border: none;
  font-family: var(--font-handwriting);
  color: var(--dark-txt-clr);
  font-size: 1.5rem;
  font-weight: 800;
  background-color: var(--pushpin-clr);
  border-radius: 0.5rem;
  padding: 0.5rem;
  box-shadow: 2px 2px 0px 0px var(--darkpurple);
  margin-top: 1rem;
}

.close:hover {
  background-color: var(--pumpkin-orange);
  box-shadow: 2px 2px 0px 0px var(--bg-clr);
}