:root {
  color-scheme: dark;
  font-family: "Courier New", Courier, monospace;
  background: #030205;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #030205;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 18px;
  color: #f4eaff;
  background-color: #030205;
  background-image:
    radial-gradient(circle at 50% 12%, rgb(116 36 170 / 28%), transparent 34%),
    linear-gradient(45deg, #0e0615 25%, transparent 25%),
    linear-gradient(-45deg, #0e0615 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #190923 75%),
    linear-gradient(-45deg, transparent 75%, #190923 75%);
  background-position: 0 0, 0 0, 0 11px, 11px -11px, -11px 0;
  background-size: auto, 22px 22px, 22px 22px, 22px 22px, 22px 22px;
}

.page-shell {
  position: relative;
  width: min(920px, 100%);
  margin: 0 auto;
  border: 5px ridge #9d4edd;
  outline: 2px dashed #d58dff;
  outline-offset: 5px;
  background: #09060d;
  box-shadow:
    0 0 0 8px #12081b,
    0 0 32px rgb(172 77 255 / 28%);
}

.page-shell::before {
  display: block;
  height: 13px;
  border-bottom: 2px inset #d69cff;
  background:
    linear-gradient(45deg, #aa37de 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, transparent 75%, #aa37de 75%) 0 0 / 12px 12px,
    #170820;
  content: "";
}

.masthead {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  min-height: 108px;
  border-bottom: 5px double #ca80ff;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 3%) 0 2px, transparent 2px 8px),
    linear-gradient(#220b32, #0d0612 58%, #260b38);
  box-shadow:
    inset 0 0 0 4px #08030b,
    inset 0 0 0 6px #6f268f;
  text-align: center;
}

h1 {
  margin: 0;
  transform: rotate(-1deg) skew(-6deg);
  color: #e3b4ff;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(2.9rem, 10vw, 6.6rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.92;
  text-shadow:
    3px 3px 0 #6a189e,
    -2px -2px 0 #ffffff,
    6px 7px 0 #110617,
    0 0 13px #c45cff;
}

.star {
  color: #d69bff;
  font-size: clamp(1.8rem, 5vw, 3rem);
  text-shadow: 0 0 10px #bd45ff;
  animation: blink 1.1s steps(2, end) infinite;
}

.gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 23px 17px;
  padding: 27px 24px 31px;
  overflow: hidden;
  background:
    linear-gradient(rgb(8 4 12 / 84%), rgb(8 4 12 / 84%)),
    repeating-linear-gradient(90deg, #4a1866 0 2px, transparent 2px 11px);
}

.gallery::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: repeating-linear-gradient(#8f3ab8 0 7px, transparent 7px 14px);
  content: "";
  opacity: 0.45;
}

.photo {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 8px;
  border: 3px outset #a63fe2;
  background: repeating-linear-gradient(45deg, #290d39 0 6px, #13071b 6px 12px);
  box-shadow:
    7px 7px 0 #020104,
    9px 9px 0 #5f1b80;
}

.photo::before,
.photo::after {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  border: 1px solid #f0d7ff;
  background: #8b28bd;
  content: "";
}

.photo::before {
  top: 3px;
  left: 3px;
}

.photo::after {
  right: 3px;
  bottom: 3px;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #dca9ff;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.86);
}

.photo figcaption {
  position: absolute;
  z-index: 3;
  right: 11px;
  bottom: 11px;
  padding: 3px 5px 2px;
  border: 1px solid rgb(222 169 255 / 58%);
  color: rgb(240 218 255 / 78%);
  background: rgb(8 2 12 / 72%);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 1px 1px #000;
}

.photo-wide {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(72%, 620px);
  aspect-ratio: 4 / 5;
  height: auto;
  padding: 10px;
  border-width: 5px;
  border-style: ridge;
  transform: rotate(-0.75deg) translateX(2px);
  box-shadow:
    -6px 7px 0 #09020d,
    8px 13px 0 #5f1b80,
    11px 16px 0 #17051f;
}

.photo-wide img {
  object-position: 50% 46%;
}

.photo-tall {
  height: min(70vw, 560px);
}

.photo-landscape {
  aspect-ratio: 4 / 3;
  height: auto;
}

.photo-left {
  border: 5px double #df83ff;
  transform: rotate(1.2deg) translateY(4px);
}

.photo-left img {
  object-position: 50% 48%;
}

.photo-right {
  border: 5px groove #7730ae;
  transform: rotate(-1.35deg) translateY(-3px);
}

.photo-right img {
  object-position: 50% 50%;
}

.photo-right figcaption {
  right: auto;
  left: 11px;
}

.deco-gif {
  position: absolute;
  z-index: 3;
  width: clamp(58px, 11vw, 104px);
  height: auto;
  padding: 3px;
  border: 3px ridge #dfacff;
  outline: 1px dashed #9c40cc;
  outline-offset: 3px;
  background: #000;
  box-shadow: 0 0 15px #c24fff;
}

.deco-left {
  top: 51%;
  left: 7px;
  transform: rotate(-9deg);
}

.deco-right {
  right: 7px;
  bottom: 18px;
  transform: rotate(8deg);
}

footer {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 7vw, 72px);
  padding: 12px;
  border-top: 5px double #ca80ff;
  color: #bd63ed;
  background:
    linear-gradient(45deg, #2c0c3e 25%, transparent 25%) 0 0 / 10px 10px,
    linear-gradient(45deg, transparent 75%, #2c0c3e 75%) 0 0 / 10px 10px,
    #100517;
  font-size: 1rem;
  text-shadow: 0 0 6px #c95dff;
}

footer span:nth-child(even) {
  animation: blink 1.3s steps(2, end) infinite reverse;
}

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

@media (max-width: 620px) {
  body {
    padding: 9px;
  }

  .page-shell {
    border-width: 3px;
    outline-offset: 3px;
    box-shadow:
      0 0 0 4px #12081b,
      0 0 22px rgb(172 77 255 / 24%);
  }

  .page-shell::before {
    height: 9px;
  }

  .masthead {
    grid-template-columns: 34px 1fr 34px;
    min-height: 82px;
  }

  .gallery {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 18px 15px 24px;
  }

  .gallery::before {
    left: 9px;
  }

  .photo-wide {
    grid-column: 1;
    width: 100%;
    height: auto;
    transform: rotate(-0.8deg);
  }

  .photo-landscape {
    height: auto;
  }

  .photo-tall {
    height: 115vw;
  }

  .deco-left {
    top: 32%;
    left: 4px;
  }

  .deco-right {
    right: 4px;
    bottom: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .star,
  footer span {
    animation: none;
  }
}