* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 64px 24px 96px;
  background-color: #0d0f14;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  color: #e6e8ec;
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.wrap {
  max-width: 620px;
  margin: 0 auto;
}

h1 {
  margin: 0 0 20px;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(20px, 5vw, 28px);
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(77, 166, 255, 0.35);
}

.cursor {
  display: inline-block;
  color: #4da6ff;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

h2 {
  margin: 0 0 16px;
  color: #e6e8ec;
  font-size: 22px;
  font-weight: 600;
}

main.wrap > h2 {
  margin-top: 56px;
}

nav a {
  color: #4da6ff;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-decoration: none;
}

nav a::before {
  content: "[ ";
}

nav a::after {
  content: " ]";
}

a {
  color: #4da6ff;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

a:hover {
  color: #ff5470;
}

section {
  margin-top: 56px;
}

.eyebrow {
  margin: 0 0 10px;
  color: #4da6ff;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  letter-spacing: 1px;
}

p {
  margin: 0 0 16px;
}

.can-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

.can-card {
  position: relative;
  margin: 0;
  padding: 28px 20px 16px;
  background-color: #161a23;
  background-image:
    linear-gradient(#4da6ff, #4da6ff),
    linear-gradient(#4da6ff, #4da6ff),
    linear-gradient(#4da6ff, #4da6ff),
    linear-gradient(#4da6ff, #4da6ff),
    linear-gradient(#4da6ff, #4da6ff),
    linear-gradient(#4da6ff, #4da6ff),
    linear-gradient(#4da6ff, #4da6ff),
    linear-gradient(#4da6ff, #4da6ff);
  background-repeat: no-repeat;
  background-position:
    top 8px left 8px,
    top 8px left 8px,
    top 8px right 8px,
    top 8px right 8px,
    bottom 8px left 8px,
    bottom 8px left 8px,
    bottom 8px right 8px,
    bottom 8px right 8px;
  background-size:
    2px 14px,
    14px 2px,
    2px 14px,
    14px 2px,
    2px 14px,
    14px 2px,
    2px 14px,
    14px 2px;
  text-align: center;
  transition: background-color 0.2s ease;
}

.can-card:hover {
  background-color: #1c212c;
}

.can-card img {
  width: 96px;
  height: auto;
  image-rendering: pixelated;
  transition: transform 0.2s ease;
}

.can-card:hover img {
  transform: scale(1.06);
}

.can-card figcaption {
  margin-top: 14px;
  color: #8a8f9c;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }

  .can-card,
  .can-card img {
    transition: none;
  }
}