/* Page colors and layout */
/*html {*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    font-family: 'PIXEL Arial 14', sans-serif;*/
/*    letter-spacing:2px;*/
/*    line-height: 1.35;*/
/*    color: var(--textcolor);*/
/*    --bgcolor: #111100;*/
/*    --gapsize: 10px;*/
/* }*/

:root {
  --bg-color: #101000;
  --orange-bright: #dd3911;
  --orange-dimmer: #ee3900;
  /*--orange-dim: #ffffff;*/
  --orange-glow: #763600;
  --yellow-bright: #aadd22;
  /*--yellow-dimmer: #558822;*/
  --yellow-dim: #558822;
  --yellow-glow: #202500;
  
}
/* list window: */
body {
  background-color: var(--bg-color);
  color: var(--yellow-bright);
  font-family: "Tomorrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0 auto;
  padding: 1rem;
  max-width: 1000px;
  display: grid;
  gap: 2rem;
}

h1 { color: var(--yellow-bright); text-shadow: 0 0 18px var(--orange-glow); font-size: 7rem; font-family: "Monoton", serif; margin: 0; }
.label, #activity-count { font-family: "Geist Pixel"; color: var(--yellow-bright); }

/*       FFFF   OO    N   N  TTTTT  SSSS   */
/*      F     O  O   NN  N    T    S       */
/*     FFF   O  O   N N N    T     SSS     */
/*    F     O  O   N  NN    T        S     */
/*   F      OO    N   N    T     SSSS      */

.handjet-<uniquifier> {
  font-family: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
}

.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.monoton-regular {
  font-family: "Monoton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.geist-pixel-<uniquifier> {
  font-family: "Geist Pixel", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "ELSH" 0;
}

.bitcount-ink-<uniquifier> {
  font-family: "Bitcount Ink", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0,
    "SZP1" 0,
    "SZP2" 0,
    "XPN1" 0,
    "XPN2" 0,
    "YPN1" 0,
    "YPN2" 0;
}

.tomorrow-thin {
  font-family: "Tomorrow", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.tomorrow-extralight {
  font-family: "Tomorrow", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.tomorrow-light {
  font-family: "Tomorrow", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.tomorrow-regular {
  font-family: "Tomorrow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.tomorrow-medium {
  font-family: "Tomorrow", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.tomorrow-semibold {
  font-family: "Tomorrow", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.tomorrow-bold {
  font-family: "Tomorrow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.tomorrow-extrabold {
  font-family: "Tomorrow", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.tomorrow-black {
  font-family: "Tomorrow", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.tomorrow-thin-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.tomorrow-extralight-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.tomorrow-light-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.tomorrow-regular-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.tomorrow-medium-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.tomorrow-semibold-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.tomorrow-bold-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.tomorrow-extrabold-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.tomorrow-black-italic {
  font-family: "Tomorrow", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.rubik-broken-fax-regular {
  font-family: "Rubik Broken Fax", system-ui;
  font-weight: 400;
  font-style: normal;
}


.banner-box {
  text-align: center;
  text-shadow: 0 0 18px var(--yellow-glow);
  width: 100%;
  padding: 8px 0;
}

/*       FFFF   OO    N   N  TTTTT  SSSS   */
/*      F     O  O   NN  N    T    S       */
/*     FFF   O  O   N N N    T     SSS     */
/*    F     O  O   N  NN    T        S     */
/*   F      OO    N   N    T     SSSS      */

 .mainbox{
   display: grid;
  grid-template-columns: 33% 67%;
 }
 
 .footer-inner{
   background-image:url('fallskyline.png');
 }

.pixel-banner {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-repeat: repeat-x;
  width: 100%; /* Adjust to your art size */
  height: 80px;
}

/* content blocks */
.info-block {
  border: 1px solid var(--orange-bright);
  border-radius: 12px;
  padding: 1.5rem;
  background: linear-gradient(to right, #101, #111);
  /*box-shadow: 0 0 10px rgba(170, 0, 255, 0.1);*/
  box-shadow: 10px 10px var(--orange-bright);
}

.info-block h2 {
  color: var(--orange-bright);
  font-family: "Bitcount Ink";
  font-weight: 380;
  text-shadow: 0 0 8px var(--orange-glow);
  font-size: 1.4rem;
  margin-top: 0;
  border-bottom: 1px solid var(--orange-dimmer);
  padding-bottom: 0.3rem;
}

#head-title {font-family: "Monoton", system-ui;
  color: var(--orange-dimmer);
  font-weight: 320;
  font-style: normal;}

/* Filter and sort buttons */
button {
  background: #000;
  color: var(--yellow-bright);
  border: 1px solid #571;
  border-radius: 5px;
  padding: 0.2rem 0.5rem;
  margin: 0.25rem;
  font-family: "Geist Pixel";
  /*font-weight: 500;*/
  cursor: pointer;
}

button:hover, button.active { background: #571; border-color: var(--yellow-bright); }
#sort-button { margin-top: 1rem; }

/* Activity list */
#activity-list { list-style: none; padding: 0; margin: 0; }
#activity-list li { border-bottom: 1px solid #631; padding: 1rem 0; }
.categories { color: var(--yellow-dim); display: block; font-size: 0.8rem; margin-top: 0.4rem; }
#message { color: black; }

/* Small-screen adjustments */
@media (max-width: 600px) {
  body { padding: 1rem; gap: 1rem; }
  h1 { font-size: 3rem; }
  .info-block { padding: 1rem; }
  button { min-height: 44px; }
}