@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,800;1,800&family=DM+Sans:wght@500;700&display=swap");

/* A US Letter sheet. Sizes use cqw (1% of the sheet's width), so the screen
   preview and the printed page match exactly. */
:root {
  --navy: #0f1f4d;
  --navy-2: #172e70;
  --red: #d4202f;
  --paper: #f3f5fa;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 16px;
  background: #d9deea;
  font-family: "DM Sans", Arial, sans-serif;
}
.flyer-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 8.5in;
  margin: 0 auto 12px;
}
.flyer-tools a {
  color: var(--navy-2);
  font-weight: 700;
}
.flyer-tools button {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--navy-2);
  color: #fff;
  font:
    700 14px "DM Sans",
    Arial,
    sans-serif;
  cursor: pointer;
}
.sheet {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(8.5in, 100%);
  aspect-ratio: 8.5 / 11;
  margin: 0 auto;
  padding: 5cqw 6cqw 4cqw;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(
      172deg,
      transparent 0 69%,
      var(--red) 69% 70.6%,
      #fff 70.6% 72%,
      var(--red) 72% 73.6%,
      transparent 73.6%
    ),
    radial-gradient(
      ellipse 80% 30% at 50% 108%,
      rgb(38 128 72 / 55%),
      transparent 70%
    ),
    linear-gradient(180deg, #0c1a42 0%, var(--navy-2) 55%, #0b1638 100%);
  box-shadow: 0 20px 50px rgb(15 31 77 / 30%);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* Stadium floodlights in the top corners */
.lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 4% 3%,
      rgb(255 255 255 / 55%) 0 1.5cqw,
      rgb(170 200 255 / 22%) 7cqw,
      transparent 26cqw
    ),
    radial-gradient(
      circle at 96% 3%,
      rgb(255 255 255 / 55%) 0 1.5cqw,
      rgb(170 200 255 / 22%) 7cqw,
      transparent 26cqw
    ),
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 3%) 0 0.3cqw,
      transparent 0.3cqw 6cqw
    );
}
.sheet > * {
  position: relative;
}
.brand {
  display: grid;
  justify-items: center;
}
.emblem {
  width: 22cqw;
  filter: drop-shadow(0 0 3cqw rgb(120 160 255 / 45%))
    drop-shadow(0 1cqw 1.5cqw rgb(0 0 0 / 35%));
}
.league {
  margin: 1.6cqw 0 0;
  font:
    800 4.4cqw/1 "Barlow Condensed",
    Impact,
    sans-serif;
  letter-spacing: 0.5cqw;
  text-transform: uppercase;
}
h1 {
  display: grid;
  justify-items: center;
  gap: 0.6cqw;
  margin: 3.4cqw 0 0;
  font:
    italic 800 9.6cqw/0.95 "Barlow Condensed",
    Impact,
    sans-serif;
  text-transform: uppercase;
}
h1 span {
  padding: 0.4cqw 3cqw 0.8cqw;
  background: var(--red);
  transform: skew(-8deg);
  box-shadow: 0 1cqw 0 rgb(0 0 0 / 25%);
}
h1 span:first-child {
  background: #fff;
  color: var(--navy);
}
.invite {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  width: 100%;
  margin: 3.6cqw 0 0;
  font:
    800 3.6cqw/1.1 "Barlow Condensed",
    Impact,
    sans-serif;
  letter-spacing: 0.25cqw;
  text-transform: uppercase;
}
.invite::before,
.invite::after {
  content: "";
  flex: 1;
  height: 0.5cqw;
  background: var(--red);
}
.crests {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4cqw;
  width: 100%;
  margin: 3.4cqw 0 0;
  padding: 0;
  list-style: none;
}
.crests li {
  display: grid;
  justify-items: center;
  gap: 1cqw;
}
.crests img,
.crests .initials {
  display: grid;
  place-items: center;
  width: 15cqw;
  height: 15cqw;
  padding: 1.2cqw;
  border-radius: 2.4cqw;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 1cqw 2cqw rgb(0 0 0 / 30%);
}
.crests .initials {
  color: var(--navy);
  font:
    800 5cqw "Barlow Condensed",
    sans-serif;
}
.crests strong {
  font:
    800 2.7cqw/1.05 "Barlow Condensed",
    Impact,
    sans-serif;
  letter-spacing: 0.1cqw;
  text-transform: uppercase;
}
.scan {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4cqw;
  width: 100%;
  margin: auto 0 0;
  padding: 3cqw;
  border-radius: 3cqw;
  background: var(--paper);
  color: var(--navy);
  text-align: left;
  box-shadow: 0 1.5cqw 3cqw rgb(0 0 0 / 35%);
}
.qr {
  position: relative;
  width: 31cqw;
}
.qr svg {
  display: block;
  width: 100%;
  border-radius: 1.2cqw;
}
/* The code uses high error correction, so the emblem can sit in the middle. */
.qr-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7.5cqw;
  padding: 0.6cqw;
  border-radius: 1cqw;
  background: #fff;
  transform: translate(-50%, -50%);
}
.scan-cta {
  margin: 0;
  font:
    800 6.4cqw/0.95 "Barlow Condensed",
    Impact,
    sans-serif;
  text-transform: uppercase;
}
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8cqw;
  margin: 2.4cqw 0;
  padding: 0;
  list-style: none;
}
.features li {
  padding: 0.7cqw 1.4cqw;
  border-radius: 99cqw;
  background: var(--navy-2);
  color: #fff;
  font:
    700 2.2cqw/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.1cqw;
  text-transform: uppercase;
}
.url {
  margin: 0;
  color: var(--red);
  font:
    700 2.3cqw/1.2 "DM Sans",
    sans-serif;
  overflow-wrap: anywhere;
}
footer {
  width: 100%;
  margin-top: 5.4cqw;
}
.fields {
  margin: 0;
  font:
    800 2.9cqw/1.2 "Barlow Condensed",
    Impact,
    sans-serif;
  letter-spacing: 0.15cqw;
  text-transform: uppercase;
}
.byline {
  margin: 1cqw 0 0;
  color: rgb(255 255 255 / 70%);
  font:
    500 1.9cqw "DM Sans",
    sans-serif;
}
@page {
  size: letter;
  margin: 0;
}
@media print {
  body {
    padding: 0;
    background: none;
  }
  .flyer-tools {
    display: none;
  }
  .sheet {
    width: 8.5in;
    height: 11in;
    box-shadow: none;
  }
}
/* ?export renders just the sheet, for saving the flyer as an image */
body.export {
  padding: 0;
  background: none;
}
body.export .flyer-tools {
  display: none;
}
body.export .sheet {
  width: 100vw;
  box-shadow: none;
}