html {
      scroll-behavior: smooth;
    }
	
	body {
	   font-family: "Arial", sans-serif;
	   margin: 0;
	   background-color: #000000;
	   background-size: 65px;
	   color: #ffffff;
	   background-image: var(--body-bg-image);
	   cursor: url("cursor1.png"), auto;
	}

	* {
	   box-sizing: border-box;
	}

	#container {
	   max-width: 900px;
	   margin: 0 auto;
	}

	#navbar {
	   height: 40px;
	   background-color: #13092d;
	   width: 100%;
	}

	#navbar ul {
	   display: flex;
	   padding: 0;
	   margin: 0;
	   list-style-type: none;
	   justify-content: space-evenly;
	}
	
	hr {
		box-shadow: 0px 0px 3px white;
		border: 2px solid white;
		border-radius: 5px;
	}

	#navbar li {
	   padding-top: 10px;
	}

	#navbar li a {
	   color: #ed64f5;
	   font-weight: 800;
	   text-decoration: none;
	}

	#navbar li a:hover {
	   color: #a49cba;
	   text-decoration: underline;
	}

	#flex {
	   display: flex;
	}

	aside {
	   background-color: #5662b4;
	   background: linear-gradient(
		  180deg,
		  rgba(86, 98, 180, 1) 0%,
		  rgba(168, 116, 190, 1) 50%,
		  rgba(169, 59, 42, 1) 100%
	   );
	   width: 200px;
	   border: 1px solid #ffffff;
	}

	.box a {
	   font-weight: bold;
	   text-shadow: 1px 1px 0px red;
	   text-decoration: none;
	}

	main {
	   background-color: #5662b4;
	   background: linear-gradient(
		  180deg,
		  rgba(86, 98, 180, 1) 0%,
		  rgba(168, 116, 190, 1) 50%,
		  rgba(169, 59, 42, 1) 100%
	   );
	   flex: 1;
	   padding: 20px;
	   order: 2;
	   border: 1px solid #ffffff;
	}

	*/ #leftSidebar {
	   order: 1;
	}

	#rightSidebar {
	   order: 3;
	}

	footer {
	   background-color: #5662b4;
	   background: linear-gradient(
		  180deg,
		  rgba(86, 98, 180, 1) 0%,
		  rgba(168, 116, 190, 1) 50%,
		  rgba(169, 59, 42, 1) 100%
	   );
	   width: 100%;
	   height: 40px;
	   padding: 10px;
	   text-align: center;
	   border: 1px solid #ffffff;
	}

	h1 {
	   font-size: 25px;
	   text-shadow: 1px 1px 0px red;
	}

	strong {
	   color: red;
	   text-shadow: 0px 0px 3px red;
	   font-weight: bold;
	}

	a {
	   color: white;
	   text-shadow: 0px 0px 3px white;
	   text-decoration: none;
	   transition: all 0.2s ease-in-out;
	}

	a:hover {
	   color: red;
	   text-shadow: 0px 0px 2px red;
	   cursor: url("cursor2.png"), auto;
	}

	.box {
	   background: #5662b4;
	   background: linear-gradient(
		  360deg,
		  rgba(86, 98, 180, 1) 0%,
		  rgba(168, 116, 190, 1) 50%,
		  rgba(169, 59, 42, 1) 100%
	   );
	   border: 1px solid #ffffff;
	   padding: 10px;
	}

	.mainbox {
	   background: #5662b4;
	   background: linear-gradient(
		  360deg,
		  rgba(86, 98, 180, 1) 0%,
		  rgba(168, 116, 190, 1) 50%,
		  rgba(169, 59, 42, 1) 100%
	   );
	   border: 1px solid #ffffff;
	   padding: 10px;
	}
	
	.gallery {
	   background: #5662b4;
	   background: linear-gradient(
		  360deg,
		  rgba(86, 98, 180, 1) 0%,
		  rgba(168, 116, 190, 1) 50%,
		  rgba(169, 59, 42, 1) 100%
	   );
	   border: 1px solid #ffffff;
	   padding: 10px;
	   z-index: 1;
	}
	
	.gallery img {
	   filter: grayscale(1);
	   transition: filter 0.3s ease-in-out;
	}
	
	.gallery img:hover {
	   filter: grayscale(0)
	}

	#topBar {
	   width: 100%;
	   height: 30px;
	   padding: 10px;
	   background-color: #13092d;
	}

	.collapsible {
	}

	.active,
	.collapsible:hover {
	}

	.content {
	   overflow: hidden;
	   text-align: left;
	   padding-left: 10px;
	   font-size: 13px;
	}

	@media only screen and (max-width: 800px) {
	   #flex {
		  flex-wrap: wrap;
	   }

	   aside {
		  width: 100%;
	   }

	   main {
		  order: 1;
	   }

	   #leftSidebar {
		  order: 2;
	   }

	   #rightSidebar {
		  order: 3;
	   }

	   #navbar ul {
		  flex-wrap: wrap;
	   }
	}

	/* Width */
	::-webkit-scrollbar {
	   width: 15px;
	}

	/* Track */
	::-webkit-scrollbar-track {
	   background: #000000;
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
	   background: linear-gradient(
		  180deg,
		  rgba(255, 255, 255, 1) 0%,
		  rgba(199, 199, 199, 1) 100%
	   );
	   border-radius: 2px;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	   background: linear-gradient(
		  180deg,
		  rgba(212, 212, 212, 1) 0%,
		  rgba(140, 140, 140, 1) 100%
	   );
	}

	/* red theme */

	#musicplayer {
	   font-family: "arial";
	   font-weight: bold;
	   height: 30px;
	   width: 100%;
	   left: 0;
	   top: 0;
	   position: fixed;
	   margin-bottom: 20px;
	   display: flex;
	   background: linear-gradient(
		  360deg,
		  rgba(86, 98, 180, 1) 0%,
		  rgba(168, 116, 190, 1) 50%,
		  rgba(169, 59, 42, 1) 100%
	   );
	   border: ridge 2px #cc2d3e; /* border around player */
	   outline: solid 2px black;
	   z-index: 2;
	}

	.songtitle {
	   display: block;
	   padding: 2px; /* padding around song title */
	   font-family: "arial";
	   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 {
	   color: red;
	   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 0 black) drop-shadow(0.5px 0.5px 0 black)
		  drop-shadow(0.5px 0.5px 0 black);
	}

	.total-duration {
		color: red;
		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;
	}
	
	/*CRT*/
	@keyframes flicker {
	  0% {
		opacity: 0.27861;
	  }
	  5% {
		opacity: 0.34769;
	  }
	  10% {
		opacity: 0.23604;
	  }
	  15% {
		opacity: 0.90626;
	  }
	  20% {
		opacity: 0.18128;
	  }
	  25% {
		opacity: 0.83891;
	  }
	  30% {
		opacity: 0.65583;
	  }
	  35% {
		opacity: 0.67807;
	  }
	  40% {
		opacity: 0.26559;
	  }
	  45% {
		opacity: 0.84693;
	  }
	  50% {
		opacity: 0.96019;
	  }
	  55% {
		opacity: 0.08594;
	  }
	  60% {
		opacity: 0.20313;
	  }
	  65% {
		opacity: 0.71988;
	  }
	  70% {
		opacity: 0.53455;
	  }
	  75% {
		opacity: 0.37288;
	  }
	  80% {
		opacity: 0.71428;
	  }
	  85% {
		opacity: 0.70419;
	  }
	  90% {
		opacity: 0.7003;
	  }
	  95% {
		opacity: 0.36108;
	  }
	  100% {
		opacity: 0.24387;
	  }
	}
	.crt::after {
	  content: " ";
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  background: rgba(18, 16, 16, 0.1);
	  opacity: 0;
	  z-index: 2;
	  pointer-events: none;
	  animation: flicker 1s infinite;
	}