:root {
  color-scheme: light;
  --ink: #151515;
  --cream: #fff2c6;
  --sun: #ffd84d;
  --sky: #68d9ff;
  --deep-sky: #2fb4ff;
  --grass: #44c84b;
  --dark-grass: #199238;
  --pink: #ff7bb8;
  --blue: #1b8cff;
  --shadow: 6px 6px 0 var(--ink);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.95) 0 34px, transparent 35px),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.95) 0 46px, transparent 47px),
    radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.95) 0 32px, transparent 33px),
    radial-gradient(circle at 78% 13%, rgba(255, 255, 255, 0.95) 0 38px, transparent 39px),
    radial-gradient(circle at 85% 11%, rgba(255, 255, 255, 0.95) 0 52px, transparent 53px),
    linear-gradient(180deg, var(--sky) 0%, #9eeaff 56%, var(--grass) 56%, var(--dark-grass) 100%);
}

body::before,
body::after {
  position: fixed;
  z-index: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(96px, 15vw, 220px);
  line-height: 1;
  pointer-events: none;
  text-shadow: 4px 4px 0 rgba(21, 21, 21, 0.15);
}

body::before {
  content: "$GOD";
  right: -18px;
  top: 18vh;
  transform: rotate(8deg);
}

body::after {
  content: "BORK";
  left: -18px;
  bottom: 7vh;
  transform: rotate(-8deg);
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 38px 0 48px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 330px);
  align-items: center;
  gap: 24px;
  min-height: clamp(240px, 33vh, 360px);
}

.hero-copy {
  transform: rotate(-1.5deg);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 8px 14px 7px;
  border: 4px solid var(--ink);
  background: var(--sun);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.4rem, 10vw, 8.8rem);
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow:
    5px 5px 0 var(--cream),
    10px 10px 0 var(--ink);
}

h1 span {
  display: block;
}

.tagline {
  width: fit-content;
  margin: 28px 0 0;
  padding: 8px 16px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: clamp(1.15rem, 2.8vw, 2rem);
}

.hero-dog {
  width: min(100%, 330px);
  justify-self: end;
  align-self: end;
  filter: drop-shadow(8px 10px 0 rgba(21, 21, 21, 0.3));
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: 24px 0 0;
}

.game-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transform: rotate(var(--tilt));
  transition: transform 160ms ease, filter 160ms ease;
}

.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-8px) rotate(var(--tilt));
  filter: saturate(1.12);
  outline: none;
}

.game-card:focus-visible .image-frame,
.game-card:focus-visible .game-title {
  outline: 5px solid var(--sun);
  outline-offset: 4px;
}

.solitaire {
  --tilt: -1.5deg;
}

.bone {
  --tilt: 1.2deg;
}

.keepy {
  --tilt: -0.6deg;
}

.image-frame {
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 6px solid var(--ink);
  border-radius: 8px;
  background: var(--cream);
  box-shadow: var(--shadow);
}

.image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-title {
  display: block;
  min-height: 64px;
  padding: 10px 14px 9px;
  border: 5px solid var(--ink);
  border-radius: 8px;
  background: var(--cream);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: clamp(1.65rem, 3.4vw, 3rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.solitaire .game-title {
  background: var(--sun);
}

.bone .game-title {
  background: #7dff70;
}

.keepy .game-title {
  background: #9ee7ff;
}

@media (max-width: 860px) {
  .page-shell {
    width: min(100% - 24px, 560px);
    padding-top: 22px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    text-align: left;
  }

  .hero-dog {
    width: min(58vw, 230px);
    margin-top: -20px;
    justify-self: end;
  }

  .tagline {
    margin-top: 22px;
  }

  .game-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 12px;
  }

  .game-card {
    transform: none;
  }

  .game-card:hover,
  .game-card:focus-visible {
    transform: translateY(-5px);
  }

  .image-frame {
    aspect-ratio: 16 / 10;
    border-width: 5px;
    box-shadow: 5px 5px 0 var(--ink);
  }

  .game-title {
    min-height: 56px;
  }
}

@media (max-width: 430px) {
  .page-shell {
    width: calc(100% - 30px);
  }

  h1 {
    max-width: 340px;
    font-size: clamp(2.65rem, 15vw, 3.75rem);
    text-shadow:
      3px 3px 0 var(--cream),
      6px 6px 0 var(--ink);
  }

  .hero-dog {
    width: min(54vw, 180px);
    margin-top: -8px;
  }

  .image-frame,
  .game-title {
    box-shadow: 4px 4px 0 var(--ink);
  }
}