*{margin: 0; padding: 0; box-sizing: border-box; image-rendering: -moz-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges}

/*this part is for locking the page in place and stopping it from unergonimically refreshing the page and shit annoyingly.*/
html,body {height: 100%; width: 100%; margin: 0; overflow: hidden; position: fixed}

body {background-color: black; background-attachment: fixed; background-size: cover; color: #333; font-family: "Helvetica", "Ariel", sans-serif; margin: 0; padding: 5px; overscroll-behavior-y: contain; display: flex; flex-direction: column}


/*The padding-top should create extra space for iphone notch ONLY if there is a notch - the padding value is provided by the device, same for the #footer*/
#header {background-image: url("images/texture-medium.gif"); border: 1px solid #333; letter-spacing: +8px; text-align: center; margin: 0 auto; max-width:1000px; box-sizing: border-box; border-bottom: none; border-radius: 30px 30px 0px 0px; padding-top: env(safe-area-inset-top); width: 100%}

#ui-wrapper {display: flex; max-width:1000px; margin: 0 auto; width: 100%; flex-grow: 1; min-height: 0}

#main-window {background-image: url("images/texture-dark.gif"); border: 1px solid #333; flex: 7; min-width: 100px; padding: 5px; min-height: 0; overflow-y: scroll; text-align: center; overscroll-behavior-y: none}

/*this next thing is a rule for the streaming links because i added ----class="stream-link"---- in the html. i did this to add gaps between the bottons*/
.stream-link {margin-bottom: 5px}

/*here i have a second #blog underneath as webpages force a link text color, and doing this fixes it*/
#blog {padding: 5px; border: 1px solid #333; height: 300px; overflow-y: auto; background-image: url("images/texture-terminal.gif"); color: limegreen; max-width: 900px; text-align: justify; margin: 30px; letter-spacing: -1px; word-spacing: -0.5px; text-shadow: 0 0 5px rgba(255, 255, 100, 0.4); overscroll-behavior-y:none}

#blog a {color : lightblue}

#sidebar {background-image: url("images/texture-medium.gif"); border: 1px solid #333; flex: 1; max-width: 80px; min-width: 80px; padding-right: 5px; font-size: 12px; border-right: none}

#rightbar {background-image: url("images/texture-medium.gif"); flex: 1; max-width: 80px; min-width: 80px; border: 1px solid #333; border-left: none}

#footer {background-image: url("images/texture-medium.gif"); border: 1px solid #333; text-align: center; margin-top: 0px; margin: 0 auto; max-width:1000px; box-sizing: border-box; border-top: none; border-radius: 0px 0px 30px 30px; padding-bottom: env(safe-area-inset-bottom); overscroll-behavior-y: contain; width: 100%}

#swaglist {width: 75%; margin: 20px auto 0px auto; text-align: justify}

#philosophy-list a {font-size: 25px}

/*THIS PART IS FOR DISPLAYING YOUTUBE VIDS IN A PERCENTAGE OF THE MAIN WINDOW'S WIDTH*/
.video43 {width: 90%; max-width: 800px; aspect-ratio: 4 / 3}
.video169 {width: 90%; max-width: 800px; aspect-ratio: 16 / 9}
.videoshorts {width: 90%; max-width: 300px; aspect-ratio: 9 / 16}

.gallery-pic {border: 1px solid #000; margin-bottom: 6px; margin-right: 6px; margin-left: 6px; margin-top: 6px}

#splash-text {font-size: 10pt; color: red}

/*THIS SHOULD HIDE #rightbar WHEN SCREEN GETS TOO SQUISHED/MOBILE VIEWING - and i think everything after @media only applies to phones im not sure tho maybe just info provided by the device the page is running on. It's actually in this case applying these rules if the device's width is under 800px. On my phone its like 1200, but its standard for small devices like phones to put a 30% or so multiplier on how CSS reads how many pixels it has. 10px on CSS is actually like 30 or so on my phone.'*/
@media screen and (max-width: 800px)
{
#rightbar {display: none} 
#blog {font-size: 12px; width: 100%; margin: 10px 0; padding: 5px} 
.gallery-pic {width: 90%; height: auto; margin-bottom: 10px}
}