/* variables */
:root {
  --body-bg-image: url('https://julian2punk.neocities.org/moon-melodies-3544496431.png');

  /* colors */
  --content: #43256E;
}

.page-wrapper {
  margin-top: 120px; /* Moves everything down */
}

/* Font setup */
@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
  font-style: italic;
}

@font-face {
  font-family: Nunito;
  src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
  font-style: italic;
  font-weight: bold;
}

body {
  font-family: 'Nunito', sans-serif;
  margin: 0;
  background-color: #08031A;
  background-size: 65px;
  color: #fceaff;
  background-image: var(--body-bg-image);
}
/* Layout container */
#container {
  max-width: 900px;
  margin: 0 auto;
}

/* Links styling */
#container a {
  color: #003399;
  font-weight: bold;
}

/* Header */
#header {
  width: 100%;
  background-color: #5e4e8c;
  height: 150px;
  background-image: var(--header-image);
  background-size: 100%;
}

/* Navbar */
#navbar {
  height: 40px;
  background-color: #13092D;
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
  padding-top: 10px;
}

#navbar li a {
  color: #003399;
  font-weight: 800;
  text-decoration: none;
}

#navbar li a:hover {
  color: #a49cba;
  text-decoration: underline;
}

/* Flex container */
#flex {
  display: flex;
}

/* Sidebars and main content styled as Windows 95 boxes */
main,
aside,
.box {
  /* Remove previous background colors and borders */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* Win95 Box style */
.win95-box {
  background-color: #C0C0C0;
  padding: 10px;
  font-family: 'Courier New', monospace;
  color: black;

  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #404040;
  border-right: 2px solid #404040;

  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #FFFFFF;
  margin-bottom: 15px;
}

/* Title bar for Windows 95 style windows */
.title-bar {
  background-color: navy;
  color: white;
  font-weight: bold;
  padding: 4px 8px;
  margin: -10px -10px 10px -10px;
  border-bottom: 2px solid #404040;
  font-family: 'Courier New', monospace;

  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.title-bar span {
  font-size: 22px; /* general size */
}

.title-bar .right-text {
  font-size: 14px; /* override for smaller side text */
  color: #ccc;
}

/* Headings color */
h1,
h2,
h3 {
  color: #003399;
}

h1 {
  font-size: 25px;
}

strong {
  color: #003399;
}

/* Top bar */
#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: smaller;
  background-color: #13092D;
}

/* Responsive Media Query */
@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }

  main {
    order: 1;
  }

  #leftSidebar {
    order: 2;
  }

  #rightSidebar {
    order: 3;
  }

  #navbar ul {
    flex-wrap: wrap;
  }
}

/* Background Image Override */
body {
  background-image: url("https://julian2punk.neocities.org/moon-melodies-3544496431.png");
  background-repeat: repeat;
  background-size: 450px 450px;
  background-attachment: fixed;
}

/* CRT scanlines overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* so clicks pass through */
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 2px,
    transparent 3px
  );
  z-index: 9999;
  animation: flicker 1s infinite alternate;
}

@keyframes flicker {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.25; }
}

.sidebar-photo {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px auto;
  border: 2px solid #404040;
}

.clouds, .clouds-bottom {
  position: fixed;
  left: 0;
  width: 300%;              /* same width */
  height: 100px;
  background: url('https://julian2punk.neocities.org/cloud.png') repeat-x;
  background-size: 350px 200px; /* same background size */
  opacity: 0.4;
  z-index: 0;
  animation-duration: 60s; /* same duration */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
}

.clouds {
  top: 0;
  animation-name: moveClouds;
}

.clouds-bottom {
  bottom: 20px; /* moved up */
  animation-name: moveCloudsBottom;
}

@keyframes moveClouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(-150px); } /* same distance */
}

@keyframes moveCloudsBottom {
  0% { transform: translateX(0); }
  100% { transform: translateX(-150px); } /* same distance */
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  justify-items: center;
}

.image-item {
  text-align: center;
}

.image-item img {
  width: 180px;
  height: 180px;
  border-radius: 4px;
  transition: transform 0.4s ease;
}

.image-item img:hover {
  transform: scale(1.70);
}

.image-item span {
  display: block;
  margin-top: 8px;
  font-size: 0.9em;
  color: #003399;
}

body {
  cursor: url('https://i.imgur.com/zJC1M9n.png') 0 0, auto;
}

#win95-header {
  width: 900px;
  margin: 20px auto 10px auto;
  border: 2px solid #000;
  box-shadow: inset -2px -2px #fff, inset 2px 2px #808080;
  background-color: #d4d0c8;
  font-family: 'Courier New', monospace;
}

/* TV container */
.tv-box {
  position: relative;
  max-width: 200px;    /* match sidebar-photo max width */
  width: 100%;
  aspect-ratio: 1 / 1; /* keep square */
  margin: 10px auto 20px auto;
}

/* TV Screen (the GIF) */
.tv-screen {
  position: relative;
  top: 14px;
  left: 14px;
  width: 80%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

/* TV Frame (overlay) */
.tv-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.junk-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 20px;
}