body { 
margin: 0;
padding: 0;
box-sizing: border-box;
background-image: url('https://file.garden/aHpdPLUS6QhALJn9/neocities/pencilLead-background.png');
background-size: 200px 200px;
cursor: url('https://file.garden/aHpdPLUS6QhALJn9/neocities/cursor.png?v=1760866537164') 8 8 , auto;
}

footer {
display: flex;
justify-content: center;
align-self: center;
}

@font-face {
    font-family: Stick-Thin;
    src: url(fonts/Stick_thinV2-1.otf);
    }

@font-face {
    font-family: VCR-OSD-Mono;
    src: url(fonts/VCR_OSD_MONO.ttf);
    }
    
@font-face {
  font-family: Sudden-Impact;
  src: url(fonts/impact.ttf);
}

/* TOP ARTS */

header {
display: flex;
justify-content: center;
align-items: stretch;
object-fit: cover;
}

/* VERY STUPID SPACING STUFF */

.space1 { grid-area: space1; visibility: hidden; }
.space2 { grid-area: space2; visibility: hidden; }


/* MISC IMPORTANT OTHER STUFF */      

nav { grid-area: nav; }

#sotd #actualSOTD {
  grid-area: sotdREAL;
  border: 3px solid maroon;
  object-fit:scale-down;
}

nav.sotdNAV {
  font-family: 'VCR-OSD-Mono';
  font-size: 50%;
  grid-area: sotdNAV;
  border: 4px solid rgb(250, 92, 118);
  padding: 1em;
  background-color: aquamarine;
}

.sotdCHAT {
grid-area: sotdCHAT;
width: 97.5%;
height: 99%;
border: 2px outset #d4d0c8;
object-fit: scale-down;
margin: 0%;
padding: 0%;
}

.sotdCHAT iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


#sotd { grid-area: sotd; 
font-family: 'Stick-Thin', sans-serif;
border: 5px solid purple;
display: grid;
grid-template-columns: auto;
grid-template-rows: min-content min-content auto;
grid-template-areas: 
        'sotdREAL'
        'sotdNAV'
        'sotdCHAT';
}

.content { grid-area: main;}

.log { grid-area: log; 
border: 3px solid indigo;
font-family: 'VCR-OSD-Mono',sans-serif;
}


.grid-container {
  display: grid;
  grid-template-columns: 11.5% 14% 11.5% 11.5% 11.5% 11.5% 11.5%;
  grid-template-rows: auto 4.5% auto auto;
  grid-template-areas:         
    'space1 nav nav nav nav nav space2'
    'space1 sotd main main main main space2'
    'space1 sotd main main main main space2'
    'space1 sotd main main main main space2';
    text-align: center;
    justify-content: center;
    grid-gap: 0cap;
    margin: 0%;
    padding: 0%;
    object-fit: cover;
}

.grid-container > div {
  background-color: white;
  text-align: center;
  padding: 0px 0px;
  font-size: 30px;
}


.content .Section1 { grid-area: section1;
border: 3px solid rgb(255, 179, 37);
font-family: 'Stick-Thin'
}

.content .Section2 { grid-area: section2;
border: 3px solid green;
display: flex;
align-items: center;
}

.content .Section3 { grid-area: section3; border: 3px solid blue; 
height: 500px;
}s

.counter { grid-area: counter; border: 5px solid #414141;
font-family: 'Sudden-Impact';
}

.content .musicTab { grid-area: musicTab;
border: 5px solid #414141;
background-color: #0a2800;
}

.content .musicTab .musicPLayerr {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content .musicTab #playButton {
max-height: 100%; 
max-width: 100%;
width: 20%;
cursor: url('https://file.garden/aHpdPLUS6QhALJn9/neocities/cursorClick.png?v=1760866572755') 8 8, pointer;
}

.content .musicTab #musicTitleBackgroundLol {
background-color: #77DD77;
}

.content .musicTab #musicTitleBackgroundLol #musicTitle {
font-family: 'VCR-OSD-Mono', sans-serif;
animation: scroll-left-then-right 20s linear infinite;
animation-fill-mode: forwards; /* temporary, translate and move ts to musicPLayerr.js*/
}

#progressBarContainer {
width: 80%;
height: 20px;
background-color: #4d8b06;
cursor: url('https://file.garden/aHpdPLUS6QhALJn9/neocities/cursorClick.png?v=1760866572755') 8 8, pointer;
}

#progressBarFill {
height: 100%;
width: 0%;
background-color: #add010;
}


.content .content-container {
  display: grid;
  grid-template-columns: 25% 75%;
  grid-auto-rows: subgrid;
  grid-template-areas:
  'log log'
  'counter musicTab' 
  'section1 section1'
  'section3 section3';
}




/* OLD WINDOWS LOOKING BUTTON CONFIG STUFF PLS DONT TOUCH */

.oldbutton {
  background-color: #f0f0f0;
  border: 2px outset #d4d0c8;
  color: black;
  padding: 6px 2em;
  font-size: 14px;
  font-family: sans-serif;
  cursor: url('https://file.garden/aHpdPLUS6QhALJn9/neocities/cursorClick.png?v=1760866572755') 8 8, pointer;
}

.oldbutton:hover {
  border-style: inset;
  background-color: #e0e0e0;
  cursor: url('https://file.garden/aHpdPLUS6QhALJn9/neocities/cursorClick.png?v=1760866572755') 8 8, pointer;
}

/* TOOL TIPS */

.tool-tipped {
  text-decoration:none;
  position:relative;
  cursor: url('https://file.garden/aHpdPLUS6QhALJn9/neocities/cursor.png?v=1760867049326') 8 8 , auto;
}

.tool-tipped span {
  display: none;
  font-family: 'Courier New', Courier, monospace;
  position: fixed;
  background-color: #a3a3a3;
  color: black;
  border: 2px solid black;
  padding: 0.3rem;
  z-index: 100;
}

.tool-tipped:hover span {
  display:block;
  position:fixed;
  overflow:hidden;
  z-index: 1000;
}

/* NEWS MARQUEE GOOFY AUGHHH ROTATING TEXT THING 
for context <marquee> is a deprecated element that makes that one goofy sliding text from news
*/
.log .marquee-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
background-color: #a4a4a4;
line-height: 75%;
}

.log .marquee-container #marquee-content {
font-size: 50%;
display: inline-block; 
animation: scroll-left 20s linear infinite;
color: red;
}

/* Animationsz */

@keyframes scroll-left {
0% { transform: translateX(200%); } 
100% { transform: translateX(-200%); } 
}
@keyframes record-player {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes scroll-left-then-right {
0% { transform: translateX(30%); } 
50% { transform: translateX(-30%); } 
100% { transform: translateX(30%); } 
}