body {
  background-image: url("images/086C.jpg");
  background-repeat: repeat;      
  background-attachment: fixed;   
  background-size: auto;          
  text-shadow: 0 0 2px rgba(0,255,200,0.4);
}

#container {
  width: 1000px;
  margin: 0 auto;
  background: #6fa3a3;
  border: 3px solid #003c3c;
}

/* HEADER */
#header {
  background: #0c5c5c;
  color: #bfffcf;
  padding: 15px;
  font-size: 32px;
  font-weight: bold;
  text-transform: lowercase;
}

#header span {
  font-size: 14px;
  color: #a0ff90;
}

/* TOP NAV */
#topnav {
  background: #003c3c;
  padding: 6px;
  text-align: center;
  border-top: 2px solid #001a1a;
  border-bottom: 2px solid #001a1a;
}

#topnav a {
  color: #aaffaa;
  text-decoration: none;
  margin: 0 8px;
  font-weight: bold;
  background: #0c5c5c;
  border: 2px solid #001a1a;
  padding: 3px 6px;
  margin: 0 4px;
  display: inline-block;
}

#topnav a:hover {
  text-decoration: underline;
  background: #aaffaa;
  color: #003c3c;
}

/* MAIN LAYOUT */
#content-area {
  display: flex;
}

.sidebar {
  width: 220px;
  padding: 8px;
}

.main {
  flex: 1;
  padding: 10px;
}

/* BOXES */
.box {
  border: 2px solid #003c3c;
  margin-bottom: 10px;
  background: #7fb5b5;
}

.box-title {
  background: #003c3c;
  color: #aaffaa;
  font-weight: bold;
  padding: 4px;
  font-size: 11px;
  text-transform: uppercase;
}

.box-content {
  padding: 6px;
  background: #bfe5e5;
}

.box-content.small {
  font-size: 11px;
  line-height: 1.4;
}

/* MAIN ARTICLE */
.article {
  border: 2px solid #003c3c;
  background: #bfe5e5;
  padding: 10px;
  margin-bottom: 12px;
}

.article h2 {
  margin: 0 0 6px 0;
  font-size: 18px;
  color: #002b2b;
}

.meta {
  font-size: 11px;
  color: #004444;
}

/* FOOTER */
#footer {
  background: #003c3c;
  color: #aaffaa;
  text-align: center;
  padding: 8px;
  font-size: 11px;
  border-top: 2px solid #001a1a;
}

/* MARQUEE */
#marquee {
  background: #bfe5e5;
  border-top: 2px solid #003c3c;
  border-bottom: 2px solid #003c3c;
  font-weight: bold;
  color: #cc0066;
  padding: 4px 0;
}

.blink {
  animation: blinker 0.8s steps(2, start) infinite;
  color: #ff0000;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

@keyframes blinker {
  to { visibility: hidden; }
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: hotpink;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 6px white;
  animation: fadeOut 0.8s linear forwards;
  z-index: 9999;
}

@keyframes fadeOut {
  to { opacity: 0; transform: scale(0.3); }
}

@keyframes floatUp {
  to { transform: translateY(-110vh); opacity: 0; }
}

.vhs-overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: flicker 0.15s infinite;
  z-index: 9998;
}

@keyframes flicker {
  0% { opacity: 0.95; }
  50% { opacity: 1; }
  100% { opacity: 0.97; }
}

/* POPUP */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}

/* =========================================
   AIM/NEO CHAT ARCHIVE STYLES
   Scoped to .chat-archive so it won't affect other pages
   ========================================= */
.chat-archive .main {
  display: flex;
  gap: 20px;
}

.chat-archive .buddylist {
  flex: 3;
}

.chat-archive .sidebar {
  flex: 1;
  background: #000;
  border: 3px ridge #00aa00;
  font-family: "Courier New", monospace;
  color: #00ff00;
  padding: 10px;
  height: fit-content;
}

.chat-archive .chatbox {
  background: black;
  color: #00ff00;
  font-family: "Courier New", monospace;
  padding: 10px;
  border: 3px ridge #00aa00;
  margin-bottom: 30px;
}

.chat-archive .screenname1 { color: #00ffff; }
.chat-archive .screenname2 { color: #ff66ff; }

.chat-archive .time {
  color: #888;
  margin-right: 6px;
  font-size: 12px;
}

.chat-archive .system {
  color: #aaaaaa;
  font-style: italic;
}

.chat-archive .awaybox {
  background: #001100;
  border: 2px dashed #00aa00;
  padding: 10px;
  margin-bottom: 30px;
}

.chat-archive .easteregg {
  color: #00ff00;
  cursor: pointer;
  text-decoration: underline;
}

.chat-archive .buddylist-header {
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid #00aa00;
  margin-bottom: 10px;
  padding-bottom: 5px;
}

.chat-archive .group {
  margin-top: 10px;
  color: #00ffff;
  font-size: 14px;
}

.chat-archive .sidebar ul {
  list-style: none;
  padding-left: 10px;
  margin: 5px 0;
}

.chat-archive .sidebar li {
  margin: 4px 0;
}

.chat-archive .online::before { content: "● "; color: #00ff00; }
.chat-archive .away::before { content: "● "; color: #ffff00; }
.chat-archive .offline::before { content: "● "; color: #555; }


/* Section Title */
.section-title {
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 1.5em;
  margin: 20px 0;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

/* Review Grid Layout */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 0 auto;
}

/* Each Review Box */
.review-box {
  background: #6fa3a3;
  border: 2px solid #003c3c;
  padding: 10px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.review-box img {
  max-width: 100%;
  height: auto;
  border: 1px solid #003c3c;
  margin-bottom: 10px;
}

/* Hover effect */
.review-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Label styling */
.review-text .label {
  display: block;
  background: #003c3c;
  color: #fff;
  font-weight: bold;
  padding: 2px 6px;
  margin-bottom: 5px;
  font-size: 0.8em;
  letter-spacing: 1px;
}

/* Review description text */
.review-text p {
  font-size: 0.9em;
  color: #fff;
  margin: 0;
  line-height: 1.3em;
}

.home-button {
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 6px 12px;
  
  font-family: "Verdana", "Tahoma", sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: #0000ff;
  
  background: linear-gradient(to bottom, #ffffff, #c0c0ff);
  border: 2px outset #ffffff;
  border-radius: 4px;
  
  box-shadow: 2px 2px 0px #000080;
  
  z-index: 9999;
}

.home-button:hover {
  color: #ff00ff;
  background: linear-gradient(to bottom, #ffffcc, #ffccff);
  border: 2px inset #ffffff;
  cursor: pointer;
}

.home-button:active {
  box-shadow: 1px 1px 0px #000080;
  transform: translate(1px, 1px);
}

.sidebar.right {
  order: 2;       /*  it stays after main content in flex order */
}

.main {
  order: 1;       /* main content comes first */
}

#content-area {
  display: flex;
  gap: 10px;      
  align-items: flex-start; /* prevents vertical misalignment */
}


.letter {
  background: #fffaf6;
  border: 2px solid #ffb6c1;
  padding: 20px 25px;
  line-height: 1.7;
  font-size: 15px;
  color: #3a2b2b;
}

.letter-title {
  text-align: center;
  font-size: 22px;
  margin-bottom: 15px;
  font-family: "Georgia", serif;
}

.letter p {
  margin-bottom: 14px;
  text-indent: 25px;
}

.letter-song {
  text-indent: 0;
  margin-top: 18px;
  font-style: italic;
}

.letter-signoff {
  text-indent: 0;
  margin-top: 25px;
  font-family: "Courier New", monospace;
}

#container {
  position: relative; /* this makes children position relative to it */
}

#corner-flan {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 200px;  
  z-index: 5;
}