@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
html, body {
  background: url('images/stars 2.gif') repeat #1a0826;
  color: #e0d6f6;
  font-family: 'Press Start 2P', 'Courier New', Courier, monospace, Verdana, Tahoma, Arial, sans-serif;
  letter-spacing: 0.5px;
}

/* Y2K Glow/Drop Shadow Banner */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Custom font example
   To use your own font files, drop them into a `fonts/` folder next to this stylesheet.
   Example: fonts/MyRetroFont.woff2 and fonts/MyRetroFont.woff

   The browser will try the local custom font first. If the files are missing the
   original Google/imported font and system fallbacks are used instead.
*/
@font-face {
  font-family: 'MyRetroFont';
  src: url('fonts/MyRetroFont.woff2') format('woff2'),
       url('fonts/MyRetroFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Local fonts found in fonts/ - register them */
@font-face {
  font-family: 'Cryptik';
  src: url('fonts/Cryptik.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dracutaz';
  src: url('fonts/Dracutaz.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AlmendraSC';
  src: url('fonts/AlmendraSC-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Base and background */
html, body {
  margin: 0;
  padding: 0;
  background: url('images/stars 2.gif') repeat #1a0826;
  color: #e0d6f6;
  /* Body text uses AlmendraSC if available, otherwise fall back */
  font-family: 'AlmendraSC', 'MyRetroFont', 'Press Start 2P', 'Courier New', Courier, monospace, Verdana, Tahoma, Arial, sans-serif;
  letter-spacing: 0.3px;
}

/* Color palette variables (so we can tweak easily) */
:root {
  --accent-1: #4ad6d6; /* teal/cyan */
  --accent-2: #ff77c2; /* soft pink */
  --accent-3: #9b6cf0; /* purple (kept for shadows) */
  --muted-bg: rgba(44,0,60,0.92);
  --panel-border: #4ad6d6; /*ZZZ  ary borders to the blue used in accents */
  --main-border: #4ad6d6; /* a different purple for the main column */
  --main-bg: rgba(98,26,125,0.72); /* slightly purple-tinted panel background for main */
}

/* Banner */
.banner {
  width: 920px; 
  max-width: 100vw;
  min-height: 110px;
  margin: 28px auto 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,8,38,0.95);
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  border-bottom: 3px solid var(--panel-border);
  box-shadow: 0 0 20px var(--panel-border), 0 0 8px var(--accent-1) inset;
  overflow: hidden;
}
.banner img { display:block; width:100%; height:auto; }

/* Layout grid */
.layout {
  display: grid;
  /* Make side columns identical so they sit equidistant from the main column */
  grid-template-columns: 190px 1fr 190px;
  grid-template-areas: "sidebar main widgets";
  gap: 24px;
  max-width: 920px;
  margin: 0 auto 32px auto;
  background: transparent; /* show page background through gaps */
  border: none; /* remove outer box */
  border-radius: 0;
  box-shadow: none;
  padding: 0; /* let columns sit flush so gaps reveal background */
}

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background: var(--muted-bg);
  border: 3px solid var(--panel-border);
  border-radius: 6px;
  padding: 12px 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  /* remove explicit width so the grid column defines the size */
}
/* Give each column a banner-like glow (use blue panel-border for glow so borders read blue) */
.sidebar {
  box-shadow: 0 0 20px var(--panel-border), 0 0 8px var(--accent-1) inset;
}
.col-label {
  background: linear-gradient(90deg,#a259e6,#c77dff);
  color: #ffffff; /* white for contrast */
  font-family: 'Dracutaz', 'Press Start 2P', monospace;
  font-size: 1.0em; /* larger label */
  text-align:center;
  border-radius:8px 8px 0 0;
  border: 3px solid var(--panel-border);
  border-bottom: none;
  padding: 8px 0 6px 0; /* more padding for larger text */
  box-shadow: 0 2px 8px var(--panel-border), 0 0 8px var(--accent-1);
}

.sidebar ul {
  list-style: none;
  padding: 8px 0 0 0;
  margin: 0;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar ul li a {
  display:block;
  color: #ffffff; /* use white for nav text */
  background: transparent;
  text-decoration: none;
  font-weight: bold;
  padding: 14px 16px; /* larger padding so text fits */
  border-radius:6px;
  transition: background 0.15s, color 0.15s;
  box-shadow: 0 0 6px var(--panel-border);
  font-size: 1.14em; /* larger nav text */
}
.sidebar ul li a:hover { background:var(--accent-1); color:#111; text-shadow:0 0 8px var(--accent-2); }

/* Main content */
.main-content {
  grid-area: main;
  /* give the main column a distinct purple border/background so it reads different from inner boxes */
  background: var(--main-bg);
  border: 3px solid var(--main-border);
  border-radius: 6px;
  padding: 18px;
  /* do not constrain the main column with a max-width or auto margin; let the grid center via .layout */
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.main-content { box-shadow: 0 0 28px var(--main-border), 0 0 10px var(--accent-1) inset; }
.site-header h1 {
  font-size: 56px; /* slightly smaller */
  margin: 0;
  color: #ffffff; /* fill white */
  /* remove outline, use purple glow to match borders */
  -webkit-text-stroke: 0; 
  text-shadow:
    0 0 28px var(--accent-3),
    0 0 18px var(--main-border),
    0 0 10px var(--accent-1);
  font-family: 'Cryptik', 'MyRetroFont', 'Press Start 2P', monospace;
  letter-spacing: 1px;
}
.site-desc { color: #a259e6; font-size: 12px; text-shadow: 0 0 8px var(--accent-1); }

.content-section {
  background: var(--muted-bg);
  border: 3px solid var(--panel-border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 0 12px var(--panel-border) inset, 0 0 8px var(--accent-1);
  color:#e6d8ff;
}
.content-section h2 { font-size: 16px; margin:0 0 8px 0; text-align:left; color:var(--panel-border); text-shadow: 1px 1px 0 rgba(0,0,0,0.35), 0 0 6px rgba(162,89,230,0.6); font-family: 'Dracutaz', 'MyRetroFont', 'Press Start 2P', monospace; }

/* Artbox */
.art { display:flex; justify-content:center; margin-top:8px; }
.artbox { width:120px; height:120px; background:#222; border:3px dashed var(--panel-border); border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow: 0 0 8px var(--accent-2), 0 0 6px var(--panel-border); }
.artbox img { width:100px; height:auto; display:block; }

/* Widgets */
.widgets { grid-area: widgets; background: var(--muted-bg); border:3px solid var(--panel-border); border-radius:6px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.widgets { box-shadow: 0 0 20px var(--panel-border), 0 0 8px var(--accent-1) inset; }
.widget { background:#222; border:3px solid var(--panel-border); border-radius:6px; color:#fff; padding:14px; text-align:center; box-shadow: 0 0 8px var(--accent-1) inset, 0 0 6px var(--panel-border); font-size: 1.16em; }

/* Floating chatbox */
.floating-chatbox { position: fixed; bottom: 20px; right: 20px; width: 240px; background:#222; border:3px solid var(--panel-border); border-radius:8px; box-shadow:0 0 16px var(--accent-1); z-index:9999; color:#fff; }
.floating-chatbox-header { background:var(--accent-3); color:#fff; padding:8px; text-align:center; font-weight:bold; border-radius:6px 6px 0 0; }
.floating-chatbox-body { padding:8px; }
.floating-chatbox input { display:none; }
.floating-chatbox button { display:none; }

/* Chat input/button classes (used instead of inline styles) */
.chat-input {
  width:80%;
  background:#f1f1f1;
  color:var(--accent-2);
  border:1px solid var(--accent-1);
  padding:6px 8px;
  font-family:inherit;
}
.chat-send {
  background:var(--accent-2);
  color:#111;
  border:1px solid var(--accent-1);
  cursor:pointer;
  padding:6px 8px;
  margin-left:6px;
}

/* Footer */
footer { text-align:center; color:#a259e6; padding:8px 0; text-shadow:0 0 8px var(--accent-1); }

/* Responsive tweaks */
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; gap:12px; padding:12px; }
  .widgets, .sidebar { width: auto; }
  .banner { margin: 18px auto 8px auto; }
  .sidebar ul li a { padding: 8px 10px; font-size: 0.95em; }
  .col-label { font-size: 0.8em; }
}

/* end of stylesheet */