* {
  box-sizing: border-box;
}

:root {
  --accent-1: hsl(24, 70%, 99%);
  --accent-2: hsl(22, 100%, 97.8%);
  --accent-3: hsl(34, 100%, 91.7%);
  --accent-4: hsl(33, 100%, 86.6%);
  --accent-5: hsl(31, 100%, 82.2%);
  --accent-6: hsl(27, 100%, 78.4%);
  --accent-7: hsl(21, 100%, 74.5%);
  --accent-8: hsl(19, 80.1%, 64.5%);
  --accent-9: hsl(24, 94%, 50%);
  --accent-10: hsl(24, 100%, 46.5%);
  --accent-11: hsl(16, 45%, 41.5%);
  --accent-12: hsl(16, 50%, 23%);

  --gray-1: hsl(50, 20%, 99%);
  --gray-2: hsl(60, 7.7%, 97.5%);
  --gray-3: hsl(59, 5.8%, 94.5%);
  --gray-4: hsl(58, 5.3%, 91.8%);
  --gray-5: hsl(57, 5.1%, 89%);
  --gray-6: hsl(56, 5%, 86%);
  --gray-7: hsl(54, 4.9%, 81.8%);
  --gray-8: hsl(51, 5%, 72.4%);
  --gray-9: hsl(60, 3%, 53.9%);
  --gray-10: hsl(60, 2.6%, 49%);
  --gray-11: hsl(50, 2.5%, 38%);
  --gray-12: hsl(50, 8%, 12%);

  --shadow-color: 60deg 5% 63%;
  --bento-shadow-color: 60deg 2% 61%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-1: hsl(30, 70%, 7.2%);
    --accent-2: hsl(29, 81.4%, 8.4%);
    --accent-3: hsl(26, 68.4%, 12%);
    --accent-4: hsl(25, 64.6%, 14.9%);
    --accent-5: hsl(25, 64.3%, 17.8%);
    --accent-6: hsl(25, 65.7%, 21.9%);
    --accent-7: hsl(25, 67.7%, 29.4%);
    --accent-8: hsl(25, 70.3%, 44.9%);
    --accent-9: hsl(24, 94%, 50%);
    --accent-10: hsl(24, 100%, 58.5%);
    --accent-11: hsl(24, 100%, 70%);
    --accent-12: hsl(30, 100%, 88%);

    --gray-1: hsl(60, 6%, 9%);
    --gray-2: hsl(60, 1.9%, 10.4%);
    --gray-3: hsl(56, 2.4%, 15.4%);
    --gray-4: hsl(53, 2.7%, 18.4%);
    --gray-5: hsl(51, 2.9%, 21.2%);
    --gray-6: hsl(49, 3.1%, 24.3%);
    --gray-7: hsl(47, 3.3%, 28.7%);
    --gray-8: hsl(43, 3.7%, 37.1%);
    --gray-9: hsl(50, 4%, 41.8%);
    --gray-10: hsl(48, 3.5%, 49.5%);
    --gray-11: hsl(50, 5%, 68.3%);
    --gray-12: hsl(56, 7%, 93%);

    --shadow-color: 60deg 5% 1%;
    --bento-shadow-color: 60deg 3% 2%;
  }
}

body {
  background: var(--gray-1);
  color: var(--gray-12);
  margin: 0;
}

/* Type logo */
.logo-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0.5rem;

  position: fixed;
  top: 0;
}

.typelogo-wrapper {
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);

  animation: fade-out 1s cubic-bezier(0.15, 0.4, 0.2, 1) infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

.charlogo-wrapper {
  left: 1.5rem;
  opacity: 0;

  animation: fade-in 1s cubic-bezier(0.8, 0, 0.85, 0.6) infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

.topper {
  width: 100%;
  height: 0.5rem;
  background: var(--accent-12);
}

.logo {
  color: var(--accent-12);
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-size: 2.5rem;
  font-style: italic;
  letter-spacing: -0.0625rem;
}

/* Wrapper for heading and CTA */
.wrapper {
  display: flex;
  max-width: 40rem;
  width: 100%;
  padding: 3.75rem 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  margin: 0 auto;
}

/* Heading */
h1 {
  font-family: Times New Roman;
  font-weight: normal;
  font-size: 3rem;
  line-height: 3.25rem;
  letter-spacing: -0.075rem;
  margin-bottom: 0.75rem;
  max-width: 20rem;
  width: 100%;
}

.subtitle {
  color: var(--gray-11);
  font-family: Arial;
  font-size: 1.125rem;
}

/* CTA Button */
a.button {
  display: flex;
  height: 2.75rem;
  padding: 0rem 0.75rem 0rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
  background: var(--accent-9);
  cursor: pointer;

  user-select: none;
  transition: box-shadow 150ms ease-out;

  box-shadow:
    0.2px 0.2px 0.3px hsl(var(--shadow-color) / 0.4),
    0.5px 0.6px 0.7px -0.4px hsl(var(--shadow-color) / 0.38),
    0.9px 1.1px 1.3px -0.8px hsl(var(--shadow-color) / 0.35),
    1.4px 1.8px 2.1px -1.2px hsl(var(--shadow-color) / 0.32),
    2.3px 3px 3.5px -1.7px hsl(var(--shadow-color) / 0.29),
    3.6px 4.7px 5.6px -2.1px hsl(var(--shadow-color) / 0.27),
    5.5px 7.2px 8.5px -2.5px hsl(var(--shadow-color) / 0.24),
    8.2px 10.6px 12.6px -2.9px hsl(var(--shadow-color) / 0.21),
    11.6px 15.1px 17.9px -3.3px hsl(var(--shadow-color) / 0.19),
    16.1px 20.9px 24.7px -3.7px hsl(var(--shadow-color) / 0.16);
}

a.button:hover {
  background: var(--accent-10);
  box-shadow:
    0.1px 0.1px 0.1px hsl(var(--shadow-color) / 0.4),
    0.3px 0.4px 0.5px -0.4px hsl(var(--shadow-color) / 0.38),
    0.5px 0.7px 0.8px -0.8px hsl(var(--shadow-color) / 0.35),
    0.8px 1.2px 1.4px -1.2px hsl(var(--shadow-color) / 0.32),
    1.3px 1.9px 2.2px -1.7px hsl(var(--shadow-color) / 0.29),
    2px 3px 3.4px -2.1px hsl(var(--shadow-color) / 0.27),
    3.1px 4.6px 5.2px -2.5px hsl(var(--shadow-color) / 0.24),
    4.6px 6.8px 7.7px -2.9px hsl(var(--shadow-color) / 0.21),
    6.5px 9.6px 10.9px -3.3px hsl(var(--shadow-color) / 0.19),
    9px 13.3px 15.1px -3.7px hsl(var(--shadow-color) / 0.16);
}

a.button:active {
  background: var(--accent-10);
  filter: brightness(0.92) saturate(1.1);
  box-shadow:
    0.1px 0.1px 0.1px hsl(var(--shadow-color) / 0.4),
    0.2px 0.3px 0.3px -0.4px hsl(var(--shadow-color) / 0.38),
    0.3px 0.5px 0.5px -0.8px hsl(var(--shadow-color) / 0.35),
    0.6px 0.9px 1px -1.2px hsl(var(--shadow-color) / 0.32),
    0.9px 1.4px 1.6px -1.7px hsl(var(--shadow-color) / 0.29),
    1.4px 2.3px 2.5px -2.1px hsl(var(--shadow-color) / 0.27),
    2.2px 3.5px 3.9px -2.5px hsl(var(--shadow-color) / 0.24),
    3.2px 5.1px 5.6px -2.9px hsl(var(--shadow-color) / 0.21),
    4.6px 7.3px 8.1px -3.3px hsl(var(--shadow-color) / 0.19),
    6.3px 10.1px 11.2px -3.7px hsl(var(--shadow-color) / 0.16);
}

@media (prefers-color-scheme: dark) {
  a.button:active {
    background: var(--accent-10);
    filter: brightness(1.08);
  }
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Bento grid of screenshots */
.bento {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--gray-2);
  border: 1px solid var(--gray-6);

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100%;
  grid-auto-flow: dense;
  grid-gap: 16px;
  padding: 16px;
}

@media only screen and (min-width: 840px) {
  .bento {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.bento > img {
  object-fit: cover;
  width: 100%;

  --shadow-color: box-shadow: 0.1px 0.2px 0.2px
      hsl(var(--bento-shadow-color) / 0.3),
    0.2px 0.4px 0.4px -0.5px hsl(var(--bento-shadow-color) / 0.27),
    0.4px 0.8px 0.8px -1.1px hsl(var(--bento-shadow-color) / 0.25),
    0.7px 1.4px 1.5px -1.6px hsl(var(--bento-shadow-color) / 0.22),
    1.3px 2.5px 2.6px -2.1px hsl(var(--bento-shadow-color) / 0.2),
    2.1px 4.2px 4.4px -2.7px hsl(var(--bento-shadow-color) / 0.17),
    3.4px 6.7px 7px -3.2px hsl(var(--bento-shadow-color) / 0.15),
    5.2px 10.1px 10.7px -3.7px hsl(var(--bento-shadow-color) / 0.12);
}

.wide {
  grid-column: span 2;
  grid-row: span 1;
  aspect-ratio: 2;
  height: 100%;
  margin-bottom: -6px;
}

.large {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1;
}

.small {
  grid-column: span 1;
  grid-row: span 1;
  aspect-ratio: 1;
}