/* FONT IMPORT */
@import url('https://fonts.cdnfonts.com/css/open-dyslexic');

  
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #eeeeee;
  --content-background-color:linear-gradient(to bottom, #1C1C1C 5%, #000000 100%);
  --sidebar-background-color:linear-gradient(to bottom, #1C1C1C 5%, #000000 100%);

  /* Text Colors: */
  --text-color: #ffffff;
  --sidebar-text-color: #ffffff;
  --link-color: #ffffff;
  --link-color-hover: #ff0000;

  /* Text: */
  --font: 'Open-Dyslexic', sans-serif;
  --heading-font: Lucida Console, monospace;
  --font-size: 14px;

  /* Other Settings: */
  --margin: 6px;
  --padding: 14px;
  --border: 2px solid #474747;
  --round-borders: 14px;
  --sidebar-width: 180px;
  --shadow: 0 0 0 2px #6E0A0A;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("https://bettysgraphics.neocities.org/images/backgrounds/stars%201.gif");
  
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

/* Links: */
a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
  box-shadow: var(--shadow);
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  grid-area: header;
  font-size: 1.2em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  box-shadow: var(--shadow);
}

.header-content {
  padding: var(--padding);
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}

.header-image img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
  
  
  .myButton {
	box-shadow:inset 0px 1px 0px 0px #cf866c;
	background:linear-gradient(to bottom, #cc3c14 5%, #381009 100%);
	background-color:#cc3c14;
	border-radius:11px;
	border:2px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:10px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #854629;
}
.myButton:hover {
	background:linear-gradient(to bottom, #381009 5%, #cc3c14 100%);
	background-color:#381009;
}
.myButton:active {
	position:relative;
	top:1px;
}


  grid-area: aside;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
}

.left-sidebar {
  grid-area: leftSidebar;
  box-shadow: var(--shadow);
}

.right-sidebar {
  grid-area: rightSidebar;
  box-shadow: var(--shadow);
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
}

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

/* Sidebar Blockquote: */

.sidebar-section blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
  
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
  
}


  
  


/* Site Button: */

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
}



/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* NAVIGATION IN HEADER */

header nav {
  margin-bottom: 0;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

header nav ul li {
  position: relative;
}

header nav ul li:first-child > a {
  padding-left: 0;
}

header nav ul li:last-child > a {
  padding-right: 0;
}

/* Subnavigation (Drop-Down): */

header nav ul ul {
  background: var(--content-background-color);
  display: none;
  position: absolute;
  top: 100%;
  left: 10px;
  padding: 0.5em;
  z-index: 1;
  border: var(--border);
  min-width: 100%;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

header nav ul li:hover ul,
header nav ul li:focus-within ul {
  display: block;
}

header nav ul li strong {
  color: var(--link-color);
  text-decoration: underline;
  font-weight: normal;
}

header nav ul ul li a {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}

main a,
main a:visited {
  color: var(--link-color);
}

main a:hover,
main a:focus {
  color: var(--link-color-hover);
  text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;

}




/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.5em;
}

main h2 {
  font-size: 1.4em;
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1em;
}

/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template: "header" auto  "leftSidebar" auto "main" auto "footer" auto / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  
  .right-sidebar { 
    display: none;
  }

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }

  
  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }
}




/* black theme */

#musicplayer{ 
  font-family: 'basiic';
  font-weight:bold;
  height:30px;
  width:100%;
  left:0;
  top:0;
  position:fixed;
  margin-bottom:20px;  
  display:flex;
    background: linear-gradient(180deg,black 0%, lightgray 45%, black 47%, black 60%, gray 100%);  
  border:ridge 2px gray;/* border around player */
  outline: solid 2px black;  
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
 
    .songtitle{ 
    display:block;
    padding:2px; /* padding around song title */
    font-family: 'pixel';
    margin-top:4px;
    margin-right: 5px; 
    font-size:15px;
    color:black;
    letter-spacing: 1px; 

    background: white;/* background of song title */
    border: gray inset 1px;
       border-radius:6px;
       box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
 
    .controls{
      font-size:12px; /* size of controls */
      text-align:center;
      width:100px;
      height:20px;
      text-decortation:none;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
 
    .controls td{
       padding-top:5px; /* padding around controls */
    }
 
    .seeking{
      width:75%;
      background: transparent;/* background color of seeking bar */
      display:flex;
      justify-content: space-evenly;
      padding:7px; /* padding around seeking bar */
       
    }
 
    .current-time{  
      padding-right:5px;
      margin-right: 3px; 
     filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
       
    }
 
    .total-duration{
      padding-left:5px;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
  .ctrlimg {
   height:16px;
   width:16px;
   }
    .ctrlimg:hover{
        cursor:help;
    }
    
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
      background: transparent;
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px; /* thickness of seeking track */
        cursor: help;
        border-radius: 6px;
        background: black; /* color of seeking track */
        border: 1px white solid;
    }

    input[type=range]::-webkit-slider-thumb {
      
        height: 30px; /* height of seeking square */
        width: 20px; /* width of seeking square */
        background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
        background-size: 25px;
        -webkit-appearance: none;
        margin-top: -10px;
        
    }
    
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: white; /* color of volume seeking track */
     filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
    }
    
 input[type=range].volume_slider::-webkit-slider-thumb {
    background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
   }
 
 
.slider_container {  
  width: 15%;       /* width of volume seeker */
  display: flex;
  justify-content: center;
  align-items: center;
}    




<style>

/* Background and overall layout */

html {
  background: #5aa;
  font-family: monospace;
  font-size: 9pt;
  background-image: url("/img/y2k_water_tile.png");
  background-size: 1024px;
  image-rendering: optimizespeed;
  image-rendering: pixelated;
}

.column {
    image-rendering: initial;
}

.columnsWrapper {
    display: flex;
    width: fit-content;
    margin: auto;
}

/* box+scrollbar base styling */

.boxContent {
  background: white;
  overflow: scroll;
  scrollbar-width: none;
  padding: 1em;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.scrollBox {
  scrollbar-width: none;
}

.scrollBar {
    margin:0;
    padding:0;
    width:16px;
    --scrollthumb-height: 40%;
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
}

/* win95 specific stying */

.win95.window{
  --win95Color: #ccc;
  --win95Gradient: linear-gradient(90deg, #048, #0ea);
  padding:4px;
  margin:24px;
  background: var(--win95Color);
  width: fit-content;
  box-shadow:
     inset -1px -1px 0px 0px black,
     inset -2px -2px 0px 0px #0008,
     inset 1px 1px 0px 0px var(--win95Color),
     inset 2px 2px 0px 0px #FFFA,
     8px 8px 0 0 #0004;
}

.win95.scrollBox{
  border: white 1px solid;
  border-color: black #FFFA #FFFA black;
  height: 250px;
  width: 300px;
  display: flex;
}

.win95.titleBar {
  height: 16px;
  background: var(--win95Gradient);
  color: white;
  text-shadow: 1px 1px black;
}

.win95 textarea {
  align-self: stretch;
  color: grey;
}

/* The following rules will only work for their respective browser */
/* If you edit the styling, make sure to copy it to the other browser's rules or it will look very odd for those users */

/* Firefox */

input[type=range].scrollBar::-moz-range-thumb {
  box-shadow:
     inset -1px -1px 0px 0px black,
     inset -2px -2px 0px 0px #0008,
     inset 1px 1px 0px 0px var(--win95Color),
     inset 2px 2px 0px 0px #FFFA;
  height: var(--scrollthumb-height);
  width: 16px;
  border-radius: 0;
  border: none;
  background: var(--win95Color);
  box-sizing: border-box;
}

input[type=range].scrollBar::-moz-range-track {
  background: url("/img/2x2dith.png"), var(--win95Color);
  background-blend-mode: overlay, normal;
  width: 16px;
  box-sizing: border-box;
}

/* Chromium */
/* Chrome sucks ass so if your css doesnt look good on it, */
/* just put a button on ur page that says "download firefox" */
/* Then it's magically not your problem anymore */

input[type=range].scrollBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-shadow:
     inset -1px -1px 0px 0px black,
     inset -2px -2px 0px 0px #0008,
     inset 1px 1px 0px 0px var(--win95Color),
     inset 2px 2px 0px 0px #FFFA,
     inset 90px 90px 0px 0px var(--win95Color);
  height: 90px;
  width: 16px;
  border-radius: 0;
  border: none;
  background: var(--win95Color);
  box-sizing: border-box;
}

input[type=range].scrollBar::-webkit-slider-runnable-track {
  background: url("/img/2x2dith.png"), var(--win95Color);
  background-blend-mode: overlay, normal;
  width: 16px;
  box-sizing: border-box;
}

/* stuff to hide the default scrollbar for chrome don't edit */
.boxContent::-webkit-scrollbar {
  display: none;
  width: 0;
  background: transparent;
}

</style>




<script> 
// Custom Scrollbars Script by kiophen 2022
// Put this at the bottom of your page to make the scrollbars functional

function setThumbsHeight() { // make the scrollbar thumbs the right height (firefox only) and add event listeners
	bars = document.querySelectorAll(".scrollBar");
	for (var i = 0; i<bars.length; i++) {
	  var hite = bars[i].previousElementSibling.clientHeight / bars[i].previousElementSibling.scrollHeight * 100 + "%"
	  bars[i].style.setProperty("--scrollthumb-height", hite); 
	}
}
setTimeout(function(){setThumbsHeight()},500);
// do it after a delay because images will change the height of a box
setInterval(function(){setThumbsHeight()},10000);
// do it every 10 seconds in case someone uses this to have dynamic content
// like something a user will type something in idk

bars = document.querySelectorAll(".scrollBar");
	for (var i = 0; i<bars.length; i++) {
	  bars[i].oninput = function(){scrollBarUpdate(this)};
	}

boxes = document.querySelectorAll(".boxContent");
for (var i = 0; i<boxes.length; i++) {
  boxes[i].onscroll = function(){boxContentUpdate(this)};
}

function scrollBarUpdate(a) {
  a.previousElementSibling.scrollTo(0,(1-a.value/100)*(a.previousElementSibling.scrollHeight-a.previousElementSibling.clientHeight));
}

function boxContentUpdate(a) {
  a.nextElementSibling.value=(1-a.scrollTop/(a.scrollHeight-a.clientHeight))*100;
 }
</script>