* {
  box-sizing: border-box;
font-family: "Bitcount Prop Single Ink";
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}

body {
  margin: 0;
}




/* --------------------------------------------------------------------
   Spacing tokens — two tiers only: mobile (default) and 13"+ screens.
   Reuses the 993px sidebar breakpoint so there's a single number to
   keep in sync across the whole stylesheet.
   -------------------------------------------------------------------- */

:root {
  --hero-padding: 6vh 4vw;   /* mobile: less vertical room to spare */
  --hero-max-h: 80vh;        /* leaves ~20vh for padding + breathing room */
}

@media (min-width: 993px) {
  :root {
    --hero-padding: 4vh 6vw; /* laptop: shorter viewport relative to width */
    --hero-max-h: 90vh;
  }
}

/* Fits a large image fully inside the viewport height, no cropping,
   no scroll. Use on any "hero" style image (banner, brain drawings, etc). */
.hero-fit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--hero-padding);
}
.hero-fit img {
  max-width: 100%;
  max-height: var(--hero-max-h);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------
   Layout primitives (w3-container / w3-row / w3-half / w3-third / etc.)
   -------------------------------------------------------------------- */

.w3-container {
  padding: 8px 16px;
}
.w3-container::after {
  content: "";
  display: table;
  clear: both;
}

.w3-half,
.w3-third,
.w3-twothird,
.w3-rest {
  float: left;
  width: 100%;
}

@media (min-width: 601px) {
  .w3-half   { width: 50%; }
  .w3-third  { width: 33%; }
  .w3-twothird { width: 66%; }
  .w3-rest   { width: 100%; }
}

.w3-content {
  max-width: 980px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------
   Text / alignment utilities
   -------------------------------------------------------------------- */

.w3-center { text-align: center; }
.w3-left   { text-align: left; float: left; }
.w3-right  { float: right; }
.w3-justify { text-align: justify; }

.w3-large  { font-size: 18px; }
.w3-xlarge { font-size: 24px; }

/* --------------------------------------------------------------------
   Spacing utilities
   -------------------------------------------------------------------- */

.w3-padding    { padding: 8px 0; }
.w3-padding-16 { padding: 16px 0; }
.w3-padding-32 { padding: 32px 0; }
.w3-margin-bottom { margin-bottom: 16px; }

/* --------------------------------------------------------------------
   Color utilities
   -------------------------------------------------------------------- */

.w3-black { background-color: #000; color: #fff; }
.w3-white { background-color: #fff; color: #000; }
.w3-text-white       { color: #fff; }
.w3-text-light-grey  { color: #ccc; }
.w3-transparent { background-color: transparent; }

/* --------------------------------------------------------------------
   Images
   -------------------------------------------------------------------- */

.w3-image {
  max-width: 100%;
  height: auto;
}
.w3-round {
  border-radius: 4px;
}
.zoomable {
  cursor: zoom-in;
}

/* --------------------------------------------------------------------
   Tags (used for the "friends" links list)
   -------------------------------------------------------------------- */

.w3-tag {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.w3-tag a {
  color: inherit;
  text-decoration: none;
}
.w3-tag a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------
   Tooltip (hover-reveal caption under artwork titles)
   -------------------------------------------------------------------- */

.w3-tooltip .w3-text {
  display: none;
}
.w3-tooltip:hover .w3-text {
  display: inline-block;
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */

.w3-button {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
  background: none;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}
.w3-button:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------- */

.w3-sidebar {
  height: 100%;
  width: 222px;
  background-color: #000;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 0;
  font-size: 18px;
}

.w3-bar-block .w3-bar-item {
  width: 100%;
  display: block;
  padding: 12px 16px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
.w3-bar-block .w3-bar-item:hover {
  background-color: #222;
}

/* Hidden by default (mobile); toggled open via JS by setting display:block */
.w3-collapse {
  display: none;
}

/* Force sidebar visible, and hide the mobile top bar, on large screens */
@media (min-width: 993px) {
  .w3-collapse {
    display: block !important;
  }
  .w3-hide-large {
    display: none !important;
  }
}

.w3-main {
  margin-left: 222px; /* room for the sidebar, which is visible by default on large screens */
  transition: margin-left 0.4s;
}

@media (max-width: 992px) {
  .w3-main {
    margin-left: 0; /* sidebar is hidden (display:none) below this breakpoint until opened */
  }
}

/* Fixed header shown only on small/medium screens */
.w3-top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

/* Dark overlay behind the mobile sidebar */
.w3-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

/* --------------------------------------------------------------------
   Modal (full-size image viewer)
   -------------------------------------------------------------------- */

.w3-modal {
  display: none;
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.w3-modal-content {
  margin: auto;
  max-width: 90%;
}
.w3-display-topright {
  position: absolute;
  right: 16px;
  top: 8px;
  cursor: pointer;
}

/* --------------------------------------------------------------------
   Simple animations (used on open/close + modal)
   -------------------------------------------------------------------- */

@keyframes animateLeft {
  from { left: -300px; }
  to   { left: 0; }
}
.w3-animate-left {
  animation: animateLeft 0.4s;
}

@keyframes animateOpacity {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.w3-animate-opacity {
  animation: animateOpacity 0.6s;
}

@keyframes animateZoom {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.w3-animate-zoom {
  animation: animateZoom 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .w3-animate-left,
  .w3-animate-opacity,
  .w3-animate-zoom {
    animation: none;
  }
}