/* Reset-ish */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }

/* Background */
body {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  background-color: #000;
  color: black;
  line-height: 1.35;
  
}



/* page container */
.page-wrap {
  max-width: 980px;
  margin: 24px auto;
  background: url('https://file.garden/ZnNr0mYRNQ9BoevX/IMG_2511.jpeg');
  padding: 18px;
  border-radius: 6px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.08);
}

/* header image */
.site-header { border: 3px groove lightgrey; padding: 8px; background: #fff; border-top-left-radius: 80px; }
.header-img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 3px;
  border-top-left-radius: 80px;
}

/* spine divider */
.spine {
  margin: 14px 0;
  padding: 8px 6px;
  display:flex;
  align-items:center;
  gap:10px;
  border-top: 1px groove #000;
  border-bottom: 1px groove #000;
}
.spine-icons { flex: 0 0 120px; text-align:center; color: grey;  }
.spine-marquee {
  overflow: hidden;
  flex: 1;
  border: 2px solid grey;
  background: rgba(255,255,255,0.6);
  padding: 10px;
  color: #000; 
}
.marquee-inner {
  display:inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 12s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

/* main grid layout roughly matching the wireframe */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows:
    380px /* big left log and big about */
    220px /* chat + music row */
    100px /* wide footer box */
  ;
  gap: 18px;
}

/* Panels */
.panel {
  width:150;
  background: #fff;
  border: 2px solid #000;
  padding: 12px;
  border-radius: 6px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.panel h2, .panel h3, .panel h4 { margin-bottom: 6px; text-align:center; font-weight:700; color:#444; }

/* left big log (occupies first column full height) */
.log { grid-column: 1 / 2; grid-row: 1 / 2; }

/* about sits top-right */
.about { grid-column: 2 / 3; grid-row: 1 / 2; 

}

.updates { grid-column: 2 / 3; grid-row: 2 / 3; }


/* footer */
.site-footer { margin-top:14px; text-align:center; color:#666; font-size:13px; }

/* responsive */
@media (max-width:920px) {
  .main-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .about, .music { order: 3; }
  .site-header .header-img { height: 120px; }
  .edge-nav { display:none; }
}

/* header 2 */
 h2 { font-family: "Jersey 10 Charted", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*------------------ scroll stuff --------------------------------------------------------------------*/



::-webkit-scrollbar {
width: 16px;
height: 16px;
}

::-webkit-scrollbar-track {
background: linear-gradient(90deg,gray 0%, lightgray 45%, gray 47%, black 100%); 
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:invert(10%);
border:outset 2px lightgray;
  border-radius: 2px;
}


::-webkit-scrollbar-thumb {
border:outset 2px gray;
  border-radius: 3px;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
width: 16px;
height: 16px;
background: linear-gradient(90deg,gray 0%, white 45%, gray 47%, gray 60%, lightgray 100%); 
z-index: 1;
}

::-webkit-scrollbar-corner {
background-color: lightgray;
}

::-webkit-resizer {
width: 16px;
height: 16px;
background: linear-gradient(180deg,gray 0%, white 45%, gray 47%, gray 60%, lightgray 100%);


image-rendering: pixelated;
}

::-webkit-scrollbar-button, ::-webkit-scrollbar-button {
border:outset 2px gray;
  border-radius: 3px;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 gray;
display: block;
width: 16px;
height: 16px;
background: lightgray;
image-rendering: pixelated;

}

::-webkit-scrollbar-button:horizontal:decrement, ::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

::-webkit-scrollbar-button:horizontal:increment, ::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:decrement, i::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:increment, ::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:horizontal:increment:start, ::-webkit-scrollbar-button:horizontal:increment:start {
display: none;
}

::-webkit-scrollbar-button:horizontal:decrement:end, ::-webkit-scrollbar-button:horizontal:decrement:end {
display: none;
}

::-webkit-scrollbar-button:vertical:increment:start, ::-webkit-scrollbar-button:vertical:increment:start {
display: none;
}

::-webkit-scrollbar-button:vertical:decrement:end, ::-webkit-scrollbar-button:vertical:decrement:end {
display: none;
}


::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
border-top: 1px solid #868a8e;
border-left: 1px solid #868a8e;
border-bottom: 1px solid #868a8e;
border-right: 1px solid #868a8e;
box-shadow: none;
}
/* stuuuuufffffffffffff navs */
.nav {
  background: linear-gradient(180deg,lightgray 0%, white 45%, white 47%, white 100%);
  border:ridge 2px white;
  border-radius: 8px;
  outline: solid 2px black;  
}