@import url("https://fonts.googleapis.com/css2?family=Comforter&family=Paytone+One&display=swap");

:root {
  --pp-background: #222;
  --pp-yellow: #ffbd59;
  --pp-blue: #4a7dbf;
  --pp-lightblue: #6aa0e0;
  --pp-primarytext: #ffe;

  --mfs-geometric-humanist:
    Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  --font-main: "Paytone One", var(--mfs-geometric-humanist);
  --font-script: "Comforter", fancy;
  /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

  /* @link https://utopia.fyi/type/calculator?c=360,18,1.25,1240,20,1.414,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN */

  --step--2: clamp(0.6252rem, 0.7588rem + -0.1724vw, 0.72rem);
  --step--1: clamp(0.884rem, 0.9065rem + -0.0291vw, 0.9rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.4063rem, 1.2585rem + 0.6568vw, 1.7675rem);
  --step-2: clamp(1.7578rem, 1.4545rem + 1.3481vw, 2.4992rem);
  --step-3: clamp(2.1973rem, 1.6504rem + 2.4303vw, 3.5339rem);
  --step-4: clamp(2.7466rem, 1.826rem + 4.0916vw, 4.997rem);
  --step-5: clamp(3.4332rem, 1.9472rem + 6.6046vw, 7.0657rem);

  --date-size: clamp(1rem, 1rem + 2.5vw, 3.5rem);

  /* Sizing for content-grid layout */
  --padding-inline: 1rem;
  --content-max-width: 75rem;
  --breakout-max-width: calc(var(--content-max-width) + 10rem);
  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );
  --content-size: min(
    100% - (var(--padding-inline) * 2),
    var(--content-max-width)
  );
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  font-weight: 400;
  font-style: normal;
}

a {
  color: var(--pp-primarytext);
}

body {
  background: var(--pp-background);
  color: var(--pp-primarytext);
  accent-color: var(--pp-blue);
  line-height: 1.5;
  font-family: var(--font-main);

  display: grid;

  grid-template-rows:
    [header-start]
    auto
    [header-end main-start]
    1fr
    [main-end footer-start]
    auto
    [footer-end];

  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] var(--content-size) [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

header {
  grid-row: header;
  grid-column: content;
}

.script {
  color: var(--pp-yellow);
  font-family: var(--font-script);
  position: relative;
  top: -0.5rem;
  padding-inline-start: 0.1rem;
}

/* HERO */
.hero {
  background: url("images/paper-texture.jpg") var(--pp-blue);
  background-blend-mode: multiply;
  text-align: center;
  rotate: -1.5deg;

  padding-block-start: var(--space-m);
  /* margin: var(--space-l) var(--space-m); */

  h1 {
    font-size: var(--step-5);
  }

  .script {
    position: relative;
    top: -1.5rem;
    padding-inline-start: 0.3rem;
  }

  h2 {
    text-transform: uppercase;
    font-size: var(--date-size);
    padding: 0;
  }

  #microphone {
    position: absolute;
    top: 10%;
    left: clamp(90%, 90% + 2vw, 90vw);
    width: clamp(70px, 75px + 5vw, 170px);
    rotate: 10deg;
  }
}

main {
  grid-row: main;
  grid-column: content;
  text-align: center;
  padding-block-start: var(--space-xl);

  p {
    font-size: var(--step-1);
    padding: var(--space-m);
  }
  h3 {
    font-size: var(--step-2);
    padding-block-end: var(--space-m);
  }
  form {
    input {
      font-size: var(--step-1);
      padding: var(--space-2xs);
    }
  }

  .upload {
    font-size: var(--step-1);
    vertical-align: middle;
    text-decoration: none;
    color: var(--pp-lightblue);
    line-height: 1;
    svg {
      vertical-align: middle;
      height: var(--step-2);
    }
    span.click {
      display: block;
      font-size: var(--step--1);
      font-family: var(--mfs-geometric-humanist);
      padding: 0;
      margin: 0;
    }
  }
}

footer {
  grid-row: footer;
  grid-column: content;

  padding-block: var(--space-xs);

  font-family: var(--mfs-geometric-humanist);
  text-align: center;
  line-height: 2;
  vertical-align: middle;
  font-size: var(--step-0);

  h3 {
    font-weight: bold;
    color: var(--pp-yellow);
  }

  p {
    padding-block-start: var(--space-3xs);
  }

  .whatsapp img {
    height: var(--step-0);
  }
}

/* ul.polaroids a:after {
  content: attr(title);
} */
.polaroids {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-end: var(--space-l);
}

.polaroids img {
  background: url("images/paper-texture.jpg");
  padding: 0.75rem;
  padding-block-end: 2.2rem;
  margin-inline: var(--space-3xs);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  width: 200px;

  @media screen and (max-width: 455px) {
    &:not(:first-child) {
      margin-block-start: calc(-100px - 3rem);
    }

    margin-inline-start: 0;
    margin-inline-end: var(--space-3xl);

    &:nth-child(even) {
      margin-inline-start: var(--space-3xl);
      margin-inline-end: 0;
    }
  }

  /* By default, we tilt all our images -2 degrees */
  rotate: -2deg;

  /* Rotate all even images 2 degrees */
  &:nth-child(even) {
    rotate: 2deg;
  }

  /* Don't rotate every third image, but offset its position */
  &:nth-child(3n) {
    rotate: none;
    position: relative;
    top: -5px;
  }

  /* Rotate every fifth image by 5 degrees and offset it */
  &:nth-child(5n) {
    rotate: 5deg;
    position: relative;
    right: 5px;
  }

  /* Keep default rotate for every eighth, but offset it */
  &:nth-child(8n) {
    position: relative;
    top: 8px;
    right: 5px;
  }

  /* Keep default rotate for every eleventh, but offset it */
  &:nth-child(11n) {
    position: relative;
    top: 3px;
    left: -5px;
  }

  /* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
  transition: 0.15s linear;
  &:hover,
  &:active {
    scale: 1.25;
    rotate: 0deg;
    position: relative;
    z-index: 5;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  }
}

.venue {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-block: var(--space-m);

  div {
    width: auto;
  }

  #map {
    /* flex: 1; */
    height: 400px;
    width: 400px;
    min-width: 340px;
    max-width: 100%;
    max-height: 100%;
  }
}