@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.ttf");
}

@font-face {
  font-family: "VCR OSD Mono";
  src: url("/fonts/VCR_OSD_Mono.ttf");
}

:root {
  --palette-black: #06061a;
  --palette-purple: #b000ff;
  --palette-pink: #ff0064;
  --palette-pink-overlay: #ff006440;
  --palette-pink-overlay-less: #ff006420;
  --palette-aqua: #b9eefc;
  --palette-yellow: #ffd000;
  --palette-green: #00ffb0;
  --palette-green-overlay: #00ffb080;
  --palette-green-dark: #00100680;
  --palette-white: #ffffff;
  --palette-red: #ff0033;
  --palette-blue: #0520ff;
  --palette-blue-overlay: #0520ff80;
  --palette-blue-dark: #00031780;
  --palette-purpleDark: #1a0a2e;

  --palette-background: var(--palette-blue-dark);
  --palette-borders: var(--palette-purple);
  --palette-borders1: var(--palette-pink);
  --palette-borders2: var(--palette-purple);
  --palette-bodyLinks: var(--palette-aqua);
  --palette-bodyText: var(--palette-white);
  --palette-postTitle: var(--palette-aqua);
  --palette-postTimestamp: var(--palette-pink);
  --palette-menu: var(--palette-purple);
  --palette-blogName: var(--palette-pink);

  --neon-glow-pink:
    0 0 7px var(--palette-pink), 0 0 10px var(--palette-pink),
    0 0 21px var(--palette-pink), 0 0 42px var(--palette-pink);
  --neon-glow-purple:
    0 0 7px var(--palette-purple), 0 0 10px var(--palette-purple),
    0 0 21px var(--palette-purple);
  --neon-glow-yellow:
    0 0 7px var(--palette-yellow), 0 0 10px var(--palette-yellow),
    0 0 21px var(--palette-yellow);
  --neon-glow-green:
    0 0 7px var(--palette-green), 0 0 10px var(--palette-green),
    0 0 21px var(--palette-green);

  --background-position: 50% 0, 50% 0, 50% 0;
}

/* ═══════════════════════════════════
   Base
   ═══════════════════════════════════ */

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      #00000080 2px,
      transparent 4px
    ),
    radial-gradient(#13136b, #000000);
  background-size: cover;
  background-position: var(--background-position);
  background-attachment: fixed;
  background-repeat: repeat;
  color: var(--palette-white);
  font-size: 16px;
  margin: 0;
  min-width: 345px;
  min-height: 100vh;
  border: 2px solid var(--palette-purple);
  box-shadow:
    inset 0 0 30px rgba(176, 0, 255, 0.15),
    inset 0 0 60px rgba(176, 0, 255, 0.05);
}

a {
  text-decoration: none;
  color: var(--palette-bodyLinks);
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-family: "VCR OSD Mono", sans-serif;
  color: var(--palette-yellow);
  text-shadow: var(--neon-glow-yellow);
  margin: 0;
}

p {
  color: var(--palette-bodyText);
}

.hidden {
  display: none;
}

/* ═══════════════════════════════════
   Intro Overlay
   ═══════════════════════════════════ */

body:has(#intro-overlay:not(.dismissed)) {
  overflow: hidden;
}

#intro-overlay {
  position: fixed;
  inset: 0px;
  z-index: 5000;
  background:
    conic-gradient(
      from 15deg,
      var(--palette-pink-overlay),
      transparent,
      transparent,
      transparent,
      var(--palette-pink-overlay-less),
      transparent,
      transparent,
      var(--palette-pink-overlay)
    ),
    rgba(6, 6, 26, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

#intro-overlay.dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: float-banner 9s ease-in-out infinite;
}

/* We use pseudo-elements on the banner for the horizontal neon divider lines */
.intro-banner::before,
.intro-banner::after {
  content: "";
  display: block;
  width: min(60vw, 700px);
  height: 2px;
  background: var(--palette-pink);
  box-shadow: var(--neon-glow-pink);
}

.intro-banner::before {
  margin-bottom: 2em;
}

.intro-banner::after {
  margin-top: 2em;
}

#intro-hide-button {
  background-color: #000000c0;
  padding: 1em;
  border-radius: 1em;
  animation: float-button 7s ease-in-out infinite;
}

.intro-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes float-banner {
  0% {
    transform: translate(3, 0) rotate(0deg);
  }
  20% {
    transform: translate(3px, -12px) rotate(2.5deg);
  }
  40% {
    transform: translate(0px, 12px) rotate(1deg);
  }
  60% {
    transform: translate(0px, 12px) rotate(-1deg);
  }
  80% {
    transform: translate(3px, 0) rotate(-2.5deg);
  }
  100% {
    transform: translate(3, 0) rotate(0deg);
  }
}

@keyframes float-button {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(8px, -6px) rotate(2deg);
  }
  50% {
    transform: translate(0, -12px) rotate(0deg);
  }
  75% {
    transform: translate(-8px, -6px) rotate(-2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.intro-logo {
  width: min(80vw, 512px);
  height: auto;
  aspect-ratio: 1024 / 230;
  background-image: url("/images/neon_style/type-error-banner.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 8px var(--palette-pink))
    drop-shadow(0 0 20px rgba(255, 0, 100, 0.4));
}

.intro-header h1 {
  position: relative;
  align-self: flex-end;
  margin-top: -1.2em;
  margin-right: -0.5em;
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  letter-spacing: 0.05em;
  z-index: 1;
}

#intro-hide-button {
  text-align: center;
  cursor: pointer;
}

#intro-hide-button p {
  font-family: "VCR OSD Mono", sans-serif;
  color: var(--palette-pink);
  text-shadow: var(--neon-glow-pink);
  margin: 0.3em 0;
  letter-spacing: 0.08em;
}

#intro-hide-button p:first-child {
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  font-weight: bold;
}

#intro-hide-button p:last-child {
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#intro-hide-button:hover p {
  filter: brightness(1.3);
}

/* ═══════════════════════════════════
   Sitemap / Navigation
   ═══════════════════════════════════ */

#siteName {
  position: fixed;
  left: 0;
  top: 50%;
  float: left;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: min(3vw, 3vh);
  color: var(--palette-purple);
  text-shadow: var(--neon-glow-purple);
  font-family: "VCR OSD Mono", sans-serif;
  text-transform: uppercase;
  text-wrap: nowrap;
  margin: 16px;
}

#sectionName {
  font-size: 32px;
  color: var(--palette-purple);
  text-shadow: var(--neon-glow-purple);
  font-family: "VCR OSD Mono", sans-serif;
  text-transform: uppercase;
  text-align: center;
}

#header.backgroundFill {
  background-color: unset;
}

#contents {
  margin: 0 auto;
  /*background-color: var(--palette-background);*/
  padding: 10px;
  padding-top: 10px;
  color: var(--palette-bodyText);
  font-size: 16px;
}

#contents .section-name {
  color: var(--palette-purple);
  text-shadow: var(--neon-glow-purple);
}

#contents ul {
  list-style: none;
  padding-left: 1em;
}

#contents li {
  margin: 0.4em 0;
}

#contents a {
  color: var(--palette-aqua);
  font-family: "VCR OSD Mono", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
}

#contents a:hover {
  color: var(--palette-pink);
  text-shadow: var(--neon-glow-pink);
}

#contents.backgroundFill {
  background-color: unset;
}

/* ═══════════════════════════════════
   Main / Sections
   ═══════════════════════════════════ */

#main,
#header,
body > section.section {
  margin: 0;
  background-color: var(--palette-background);
  padding: 10px;
  color: var(--palette-bodyText);
  font-size: 16px;
}
body > section.intro-gallery {
  background-color: var(--palette-green-dark);
}
.intro-gallery > .gallery .item .text {
  color: var(--palette-green);
  text-shadow: 0 0 4px var(--palette-green);
}
.gallery .item a:hover .text {
  color: var(--palette-white);
}
section.intro-gallery .section-name {
  color: var(--palette-green);
  text-shadow:
    0 0 6px var(--palette-green),
    0 0 12px var(--palette-green);
}
section.intro-gallery p {
  color: var(--palette-green);
}

#header {
  box-shadow: none;
}
#main,
body > section.section {
  border: 2px solid var(--palette-blue);
  border-radius: 12px;
  box-shadow:
    0 0 7px rgba(5, 32, 255, 0.5),
    0 0 14px rgba(5, 32, 255, 0.25),
    inset 0 0 7px rgba(5, 32, 255, 0.1);
}

#main,
body > section.section:first-child {
  border-top-style: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
}

#header {
  border-left: 2px solid var(--palette-blue);
  border-right: 2px solid var(--palette-blue);
  position: relative;
  z-index: 1;
}

body > section.intro-gallery {
  border-color: var(--palette-green);
  box-shadow:
    0 0 7px rgba(0, 255, 176, 0.5),
    0 0 14px rgba(0, 255, 176, 0.25),
    inset 0 0 7px rgba(0, 255, 176, 0.1);
}

#main.backgroundFill {
  background-color: unset;
}

.section:not(:first-child) {
  margin-top: min(5vh, 5vw);
}

.section-name {
  font-size: 28px;
  color: var(--palette-blue);
  font-family: "VCR OSD Mono", sans-serif;
  text-shadow:
    0 0 6px var(--palette-blue),
    0 0 12px var(--palette-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-description {
  font-size: 16px;
  color: var(--palette-bodyText);
  font-family: "Open Sans", sans-serif;
}

.section-description > p a {
  text-decoration: underline;
  color: var(--palette-aqua);
}

.section-description > p a:hover {
  color: var(--palette-pink);
  text-shadow: var(--neon-glow-pink);
}

#about-section {
  color: var(--palette-blue);
}

#about-section .section-description p {
  color: var(--palette-blue);
}

.reference-link {
  cursor: help;
  text-decoration: underline;
}

.reference-note {
  font-size: 14px;
}

/* ═══════════════════════════════════
   Gallery
   ═══════════════════════════════════ */

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  box-sizing: border-box;
}

.gallery > .section {
  width: 100%;
}

.gallery.full .item {
  flex: auto;
  width: 100%;
  display: block;
  margin: 0;
  box-sizing: border-box;
  aspect-ratio: 3/2;
}

.gallery .item {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(50% - 16px - 8em);
  filter: brightness(0.95);
  margin: 4em;
  transition: filter 0.3s ease;
}

.gallery .item.tall {
  cursor: pointer;
}

.gallery .item.tall .image {
  aspect-ratio: 2/3;
}

.gallery .item:hover {
  filter: brightness(1.05);
}

.gallery .item:hover .image {
  box-shadow:
    0 0 16px rgba(176, 0, 255, 0.5),
    0 0 30px rgba(176, 0, 255, 0.2);
}

.gallery .item a {
  display: flex;
  flex-direction: column;
}

.intro-gallery > .gallery .item .image {
  background-blend-mode: multiply;
}

.gallery .item .image {
  object-fit: cover;
  aspect-ratio: 3/2;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: black;
  border: 1px solid var(--palette-purple);
  box-shadow:
    0 0 8px rgba(176, 0, 255, 0.3),
    inset 0 0 8px rgba(176, 0, 255, 0.1);
  overflow: hidden;
  transition:
    background-color 0.4s ease,
    box-shadow 0.3s ease;
  background-blend-mode: multiply;
  background-color: var(--palette-blue-overlay);
}

.intro-gallery .gallery .item .image {
  background-color: var(--palette-green-overlay);
}
.gallery .item:hover .image {
  background-color: white;
}

.gallery .item .image.pixelated {
  image-rendering: pixelated;
  background-image: url(/images/album_art/no-art.png);
}

.gallery .item .text {
  background: unset;
  text-align: center;
  font-size: 1em;
  color: var(--palette-aqua);
  font-family: "VCR OSD Mono", sans-serif;
  text-shadow: 0 0 4px var(--palette-blue);
}

.text {
  background: unset;
  font-size: 1em;
  color: var(--palette-bodyText);
}

/* ═══════════════════════════════════
   Background / Layout helpers
   ═══════════════════════════════════ */

#background {
  z-index: -50;
}

.background {
  border: 1px solid var(--palette-purple);
  box-shadow: 0 0 10px rgba(176, 0, 255, 0.3);
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: var(--palette-background);
  background-size: 256px;
  background-position: var(--background-position);
  background-repeat: repeat;
}

body.background {
  border-style: none;
}

body.background canvas {
  float: left;
  z-index: -1;
}

.backgroundFill {
  margin: 0 auto;
  padding: 0;
  background-color: var(--palette-background);
  width: fit-content;
}

.centerText {
  text-align: center;
  margin: 0 auto;
}

.fullPageBreak {
  margin-bottom: 100vh;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}

.fullscreen a {
  pointer-events: all;
}

#three {
  margin: 4em;
  height: calc(100vh - 6px - 8em);
}

/* ═══════════════════════════════════
   Audio Player
   ═══════════════════════════════════ */

.audio-player {
  width: calc(100% - 40px);
  padding: 20px;
}

.controls {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.icon {
  height: 32px;
  margin-bottom: -2px;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
}

.fa-play {
  background-image: url(/images/icons/icon-play.png);
}

.fa-pause {
  background-image: url(/images/icons/icon-pause.png);
}

.fa-volume-up {
  background-image: url(/images/icons/icon-volume.png);
}

.fa-volume-mute {
  background-image: url(/images/icons/icon-muted.png);
}

.play-pause-btn,
.mute-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-right: 10px;
}

.seek-bar,
.volume-bar {
  flex: 1;
  height: 6px;
  background-color: var(--palette-purpleDark);
  box-shadow: 0 0 4px rgba(176, 0, 255, 0.3);
  position: relative;
  margin-right: 10px;
  border-radius: 3px;
  cursor: pointer;
}

.fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--palette-pink),
    var(--palette-purple)
  );
  box-shadow: 0 0 6px var(--palette-pink);
  border-radius: 3px;
}

.volume-bar .handle {
  left: 100%;
}

.handle {
  width: 14px;
  height: 14px;
  background-color: var(--palette-pink);
  box-shadow: 0 0 6px var(--palette-pink);
  border-radius: 50%;
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: none;
}

/* ═══════════════════════════════════
   Serene Cards (kept from 1bit)
   ═══════════════════════════════════ */

#sereneCards {
  perspective: 5000px;
}

#sereneCards a {
  transform-style: preserve-3d;
}

.serene.description .section {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 1s ease,
    opacity 0.5s ease;
}

.serene.description .section.visible {
  max-height: 1080px;
  opacity: 1;
}

/* ═══════════════════════════════════
   Overlay Photo Viewer
   ═══════════════════════════════════ */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 26, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.overlay.hidden {
  display: none;
}

.overlay-content {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
}

.overlay-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.overlay-image-wrap {
  flex: 1 1 auto;
  align-self: center;
  width: auto;
  max-width: 95vw;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--palette-purple);
  box-shadow:
    0 0 15px rgba(176, 0, 255, 0.4),
    inset 0 0 15px rgba(176, 0, 255, 0.1);
  background-color: var(--palette-background);
  background-size: 256px;
  background-position: var(--background-position);
  background-repeat: repeat;
}

.overlay-img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
  width: 200%;
  height: 200%;
}

.overlay-caption {
  flex: 0 0 auto;
  max-height: 30%;
  overflow: auto;
  padding: 0.5em 0.25em;
}

.overlay-name {
  font-family: "VCR OSD Mono", sans-serif;
  font-size: 24px;
  color: var(--palette-aqua);
  text-shadow: 0 0 6px var(--palette-aqua);
}

.overlay-description {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: var(--palette-bodyText);
}

.overlay-close {
  position: fixed;
  top: 12px;
  right: 12px;
  background: var(--palette-background);
  border: 1px solid var(--palette-purple);
  color: var(--palette-pink);
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 0 8px rgba(176, 0, 255, 0.4);
  transition:
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.overlay-close:hover {
  color: var(--palette-yellow);
  box-shadow: 0 0 16px rgba(176, 0, 255, 0.6);
}

/* ═══════════════════════════════════
   Responsive
   ═══════════════════════════════════ */

@media screen and (max-width: 1199px) {
  .gallery .item {
    flex: 0 0 100%;
    margin: 1em 0;
  }

  .gallery .item .image {
    aspect-ratio: 5/4;
  }

  #main,
  #header,
  body > section.section {
    padding: 10px;
  }

  #siteName {
    position: unset;
    transform: unset;
    writing-mode: unset;
    text-orientation: unset;
    float: none;
    margin: 0;
    top: unset;
    left: unset;
    padding-bottom: 1em;
    font-size: 6vw;
  }

  #sectionName {
    text-align: unset;
  }

  .intro-logo {
    width: 90vw;
  }
}

@media screen and (min-width: 1200px) {
  #contents {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 280px;
    max-width: 280px;
    max-height: calc(100vh - 100px);
    overflow: auto;
    padding: 20px;
    /*background-color: #000000;*/
  }

  #header,
  #main,
  body > section.section {
    margin-left: 100px;
    margin-right: 350px;
    padding-top: 10px;
  }
}