/* ------------------------------ */
/*  GLOBAL + RESET                */
/* ------------------------------ */
html, body {
  height: 100%;
  margin: 0;
  position: relative;
}

/* ------------------------------ */
/*  5‑IMAGE CROSSFADE SLIDESHOW   */
/* ------------------------------ */

html::before,
.bg2, .bg3, .bg4, .bg5 {
  content: "";
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -3;          /* very back */
  animation: fade 25s infinite;
  opacity: 0;
}

/* Assign images + staggered delays */
html::before { background-image: url("img/purple5.png"); animation-delay: 0s; }
.bg2        { background-image: url("img/blue2.png"); animation-delay: 5s; }
.bg3        { background-image: url("img/green7.png"); animation-delay: 10s; }
.bg4        { background-image: url("img/purple7.png"); animation-delay: 15s; }
.bg5        { background-image: url("img/blue6.png"); animation-delay: 20s; }

/* Fade animation */
@keyframes fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  20%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ------------------------------ */
/*  HUE‑ROTATE RAINBOW OVERLAY    */
/* ------------------------------ */

html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;          /* above slideshow, below content */

  background: url("img/purple5.png");
  background-size: 1000px 1000px;
  background-repeat: repeat;

  mix-blend-mode: color;
  animation: hueSpin 30s linear infinite;
}

@keyframes hueSpin {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ------------------------------ */
/*  TEXT + FONTS                  */
/* ------------------------------ */

@font-face {
  font-family: 'punk';
  src: url('punk.ttf');
}

h1, h2, p {
  color: white;
}

h1, h2 {
  font-family: "punk";
}

p {
  font-family: "Verdana", sans-serif;
}

/* ------------------------------ */
/*  TEXT BOXES + LAYOUT           */
/* ------------------------------ */

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.textbox {
  background: black;
  color: white;
  padding: 20px;
  border: 4px white;
  position: relative;
  z-index: 10;          /* above overlays */
  min-width: 128;
  min-height: 128;
}