/* ========== Shaded Sundial – quick-tune variables ========== */
:root{
  --bg: #08031A;                 /* page background */
  --tile: url('/images/smalltile.png');
  --header-image: url('/images/header.jpg');

  --panel: #171717;              /* main panel */
  --sidebar: #0F0F0F;            /* sidebar */
  --nav: #0B0B0B;                /* navbar & footer */

  --text: #F2E9DE;
  --muted: #b6b3c9;
  --accent: #E3B341;
  --accent-2: #FFE4A3;

  --radius: 10px;
  --shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* Optional font – comment out if you don’t want Google Fonts */
@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: 700;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg) var(--tile) repeat fixed;
  background-size: 65px;
}

#container{ max-width: 1700px; margin: 0 auto; }

/* Links (not nav) */
#container a{
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
#container a:hover{
  color: var(--accent-2);
  border-bottom-style: solid;
}

/* Header */
#header{
  background: var(--header-image) center/cover no-repeat;
  min-height: 500px;
  position: relative;
}
#header::after{ /* darken image for text contrast */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,3,26,.45), rgba(8,3,26,.65));
}
.header-inner{
  position: relative; z-index: 1;
  padding: 32px 18px;
}
#header h1{ margin:0; color: var(--text); font-size: 28px; }
.tagline{ margin:.25rem 0 0; color: var(--muted); }

/* Nav */
#navbar{
  background: var(--nav);
  padding: 0 10px;
}
#navbar ul{
  display:flex; flex-wrap:wrap; gap: 14px;
  align-items:center; justify-content: center;
  list-style:none; margin:0; padding:10px 0;
}
#navbar a{
  color: var(--accent); font-weight:800; text-decoration:none;
}
#navbar a:hover{ color: var(--accent-2); text-decoration: underline; }

/* Layout */
#flex{ display:flex; gap:10px; }
main{
  background: var(--panel); flex:1; padding:20px;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
#leftSidebar{
  width: 260px; background: var(--sidebar); padding: 20px;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* (bug fix from template: removed stray comment that broke this selector) */

/* Cards & boxes */
.card{
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 14px 0;
}
.box{
  background: #13092D;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px;
}
.updates{ list-style:none; padding-left:0; margin:0; }
.updates time{ color: var(--muted); margin-right:.5rem; }

/* Buttons (88x31 bar) */
.buttons img{ height:31px; image-rendering: pixelated; margin:2px; }

/* Webring placeholder */
.webring{ margin-top:.5rem; }
.webring a{ border-bottom: none; }

/* Typography */
h1,h2,h3{ color: var(--accent); margin-top:.2rem; }
h1{ font-size:25px; }
strong{ color: var(--accent); }

/* Footer */
footer{
  background: var(--nav); color: var(--muted);
  text-align:center; padding:12px 10px; margin: 12px 0 20px;
  border-radius: var(--radius);
}

/* Responsive */
@media (max-width: 800px){
  #flex{ flex-wrap:wrap; }
  #leftSidebar{ width: 100%; order:2; }
  main{ order:1; }
  #navbar ul{ gap:10px; }
}