/*FONTS*/

@font-face {
    font-family: 'to_japanregular';
    src: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Fonts/to_japan-webfont.woff2') format('woff2'),
         url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Fonts/to_japan-webfont.woff') format('woff');
}

@font-face {
src: url(https://dl.dropbox.com/s/mes7b666uvig5wc/Winkle-Regular.otf);
font-family: winkle;
}



/*FONTS END*/



.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.color-picker > fieldset {
  border: 0;
  display: flex;
  gap: 2rem;
  width: fit-content;
  background: #fff;
  padding: 1rem 3rem;
  margin-inline: auto;
  border-radius: 0 0 1rem 1rem;
}

.color-picker input[type="radio"] {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  outline: 3px solid var(--radio-color, currentColor);
  outline-offset: 3px;
  border-radius: 50%;
}

/*HIDE RADIOS*/
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + .radimg {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + .radimg {
  outline: 2px solid var(--boxoutline);
  outline-offset: 5px;
}

.radimg {
	border: 2px var(--text);
}

:root {
	--text: rgb(89, 50, 147);
	--musicText: rgb(89, 50, 147);
    --font: winkle;
    --titlefont: to_japanregular;
	--border: rgb(242, 223, 255);
	--accent: rgb(186, 119, 102);
	--boxoutline: rgb(1, 1, 1);
	--bg: #c7a0ef;
	--gradientTop: rgb(244, 211, 199);
	--gradientBottom: rgb(255, 247, 240);
    --bg-image: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Website%20Background%20-%20Lavender%20Chocolate%20Chip.png');
    --headimg: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Website%20Banner%20-%20Lavender%20Chocolate%20Chip.png');
    --containimg: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Containers/lavendercookie_checkerboard.png');
	--link: rgb(188, 139, 234);
	--linkGradTop: rgb(69, 31, 21);
	--linkGradMiddle: rgb(126, 63, 37);
	--linkGradBottom: rgb(152, 85, 59);
	--musicgrad: linear-gradient(180deg,rgba(233, 204, 248, 1) 0%, rgba(255, 255, 255, 1) 45%, rgba(171, 124, 214, 1) 47%, rgba(255, 255, 255, 1) 100%);
	--musicborder: rgb(103, 62, 149);
	--titlebg: rgb(255, 255, 255);
	--titleborder: rgb(221, 207, 231);
	--musiccontrols: rgb(138, 102, 209);
	--scrollbar: rgb(245, 213, 188);
	--scrollbarbg: rgb(231, 181, 151);
	--scrollbaractive: rgb(188, 139, 234);
}
	

.darkchocolate {
    --text: rgb(244, 240, 233);
	--musicText: rgb(36, 36, 36);
    --font: winkle;
    --titlefont: to_japanregular;
	--border: rgb(1, 1, 1);
	--accent: rgb(194, 190, 183);
	--boxoutline: rgb(1, 1, 1);
	--bg: #dce3e1;
	--gradientTop: rgb(19, 17, 16);
	--gradientBottom: rgb(46, 42, 41);
    --bg-image: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Website%20Background%20-%20Dark%20Chocolate%20Twinkie.png');
    --headimg: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Website%20Banner%20-%20Dark%20Chocolate%20Twinkie.png');
	--containimg: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Containers/darkchocolate_checkerboard.png');
	--link: rgb(75, 71, 69);
	--linkGradTop: rgb(228, 225, 220);
	--linkGradMiddle: rgb(186, 176, 168);
	--linkGradBottom: rgb(166, 157, 146);
	--musicgrad: linear-gradient(180deg,rgb(250, 245, 226) 0%, rgba(255, 255, 255, 1) 45%, rgb(225, 220, 210) 47%, rgba(255, 255, 255, 1) 100%);
	--musicborder: rgb(196, 189, 164);
	--titlebg: rgb(0, 0, 0);
	--titleborder: rgb(75, 71, 69);
	--musiccontrols: rgb(1, 1, 1);
	--scrollbar: rgb(19, 17, 16);
	--scrollbarbg: rgb(46, 42, 41);
	--scrollbaractive: rgb(75, 71, 69);
}

.blueberry {
    --text: rgb(2, 22, 72);
    --font: winkle;
    --titlefont: to_japanregular;
	--border: rgb(247, 234, 210);
	--accent: rgb(244, 238, 216);
	--boxoutline: rgb(1, 1, 1);
	--bg: #ebe0a9;
	--gradientTop: rgb(10, 86, 133);
	--gradientBottom: rgb(25, 108, 143);
    --bg-image: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Website%20Background%20-%20Galette%20Blueberry.png');
    --headimg: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Banners/Website%20Banner%20-%20Galette%20Blueberry.png');
	--containimg: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Containers/blueberrygalette_checkerboard.png');
	--link: rgb(32, 140, 173);
	--linkGradTop: rgb(240, 198, 134);
	--linkGradMiddle: rgb(235, 216, 152);
	--linkGradBottom: rgb(250, 250, 204);
	--musicgrad: linear-gradient(180deg,rgb(248, 236, 204) 0%, rgba(255, 255, 255, 1) 45%, rgb(214, 190, 124) 47%, rgba(255, 255, 255, 1) 100%);
	--musicborder: rgb(149, 120, 62);
	--titlebg: rgb(255, 255, 255);
	--titleborder: rgb(192, 212, 230);
	--musiccontrols: rgb(5, 48, 140);
	--scrollbar: rgb(240, 198, 134);
	--scrollbarbg: rgb(10, 86, 133);
	--scrollbaractive: rgb(5, 48, 140);
}

.matcha {
    --text: rgb(91, 58, 46);
    --font: winkle;
    --titlefont: to_japanregular;
	--border: rgb(136, 165, 110);
	--accent: rgb(209, 234, 169);
	--boxoutline: rgb(1, 1, 1);
	--bg: #4d7544;
	--gradientTop: rgb(230, 175, 133);
	--gradientBottom: rgb(255, 248, 240);
    --bg-image: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Website%20Background%20-%20Matcha%20Cheesecake.png');
    --headimg: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Website%20Banner%20-%20Matcha%20Cheesecake.png');
	--containimg: url('https://file.garden/ZmIrgyOgiFXI9bZ5/NeoCities/Images/Backgrounds/Containers/matchacheesecake_checkerboard.png');
	--link: rgb(255, 242, 215);
	--linkGradTop: rgb(141, 180, 93);
	--linkGradMiddle: rgb(140, 182, 76);
	--linkGradBottom: rgb(100, 159, 60);
	--musicgrad: linear-gradient(180deg,rgb(231, 248, 204) 0%, rgba(255, 255, 255, 1) 45%, rgb(166, 214, 124) 47%, rgba(255, 255, 255, 1) 100%);
	--musicborder: rgb(88, 149, 62);
	--titlebg: rgb(255, 255, 255);
	--titleborder: rgb(221, 216, 205);
	--musiccontrols: rgb(68, 97, 27);
	--scrollbar: rgb(100, 159, 60);
	--scrollbarbg: rgb(209, 234, 169);
	--scrollbaractive: rgb(136, 165, 110);
}


* { 
	box-sizing: border-box;
}
body {
	padding: 10px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);
    font-family: var(--font);

	/* page background pattern */
	background-image: var(--bg-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}


.container {
	max-width: 55rem;
	margin: 5vw auto 12px auto;
	border: 6px ridge var(--border);
	outline: 3px solid var(--gradientTop);
	outline-offset: 4px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;

	/* container background pattern */
	background-image: var(--containimg);
    background-size: cover;
}
/* these control the column widths */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }


header {
    background-image: var(--headimg);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 120px; /* change banner height here*/
	border: 2px ridge var(--border);
	border-radius: 5px;
	position: relative;
}
header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: bold;
	text-shadow: 1px 1px var(--text),
		-1px 1px var(--text),
		1px -1px var(--accent),
		-1px -1px var(--accent);
	color: var(--gradientTop);
}


nav {
	border: 2px ridge var(--border);
	border-radius: 5px;
	padding: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}
nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}
nav a {
	display: block;
	margin: 5px;
	background: linear-gradient(to right,var(--linkGradTop),var(--linkGradMiddle),var(--linkGradBottom));
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;
}

nav a:hover, nav a:focus {
	background: linear-gradient(to right,var(--linkGradBottom), var(--linkGradMiddle), var(--linkGradTop));
}

/* optional button styling like in the preview */
div.small > img {
	display: block;
	margin: 5px auto;
	border:2px ridge var(--border);
	border-radius: 5px;
}


section {
	border: 2px ridge var(--border);
	border-radius: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
	padding: 5px;
}


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
}
h4 { 
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }

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

a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--accent);
}

/* MUSIC PLAYER START*/

#musicplayer{ 
          font-family: var(--font);
          font-weight:bold;
          height:30px;
          width:100%;
          left:0;
          top:0;
          position:fixed;
          margin-bottom:20px;  
          display:flex;
		  z-index: 1;
          background: var(--musicgrad);
		  border:ridge 2px white; /* border around player */
          outline: solid 2px black;
		  box-shadow: inset 10px 0px 6px -10px var(--musicborder), inset -13px 0px 6px -10px var(--musicborder), inset 0px 10px 6px -10px var(--musicborder), inset 0px -13px 6px -10px var(--musicborder);
        }
         
            .songtitle{ 
            display:block;
            padding:2px; /* padding around song title */
            font-family: var(--titlefont);
            margin-top:4px;
            margin-right: 5px; 
            font-size:15px;
            color: var(--text);
            letter-spacing: 1px; 
        
            background: var(--titlebg);/* background of song title */
            border: gray inset 1px;
               border-radius:6px;
               box-shadow: inset 13px 0px 6px -10px var(--titleborder), inset -13px 0px 6px -10px var(--titleborder), inset 0px 13px 6px -10px var(--titleborder), inset 0px -13px 6px -10px var(--titleborder);
            }
         
            .controls{
              font-size:12px; /* size of controls */
              text-align:center;
			  color: var(--musiccontrols);
              width:100px;
              height:20px;
              text-decoration: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);
			  color: var(--musiccontrols);
            }
         
            .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);
			  color: var(--musiccontrols);
            }
         
           .ctrlimg {
   height:16px;
   width:16px;
   }
            
            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;
        }    
        
/*MUSIC PLAYER END*/

/*SCROLLBAR START*/

::-webkit-scrollbar {
        width: 16px;
        height: 16px;
        background-color: var(--scrollbar);
        }

        ::-webkit-scrollbar-track {
        background-color: var(--scrollbarbg);
        }

        ::-webkit-scrollbar-track:active {
        background-color: var(--scrollbaractive);
        }

        ::-webkit-scrollbar-thumb {
        border-top: 1px solid var(--scrollbar);
        border-left: 1px solid var(--scrollbar);
        border-right: 1px solid #1F0D04;
        border-bottom: 1px solid #1F0D04;
        box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #1F0D04;
        width: 16px;
        height: 16px;
        background-color: var(--scrollbar);
        z-index: 1;
        }

        ::-webkit-scrollbar-corner {
        background-color: var(--scrollbar)
        }

        ::-webkit-resizer {
        width: 16px;
        height: 16px;
        background-color: var(--scrollbar);
        background-position: bottom right;
        background-repeat: no-repeat;
        image-rendering: pixelated;
        }

        ::-webkit-scrollbar-button,
        .scroll::-webkit-scrollbar-button {
        border-top: 1px solid var(--scrollbar);
        border-left: 1px solid var(--scrollbar);
        border-right: 1px solid #1F0D04;
        border-bottom: 1px solid #1F0D04;
        box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #1F0D04;
        display: block;
        width: 16px;
        height: 16px;
        background-color: var(--scrollbar);
        image-rendering: pixelated;
        background-repeat: no-repeat;
        background-position: center center;
        }

        ::-webkit-scrollbar-button:active,
        .scroll::-webkit-scrollbar-button:active {
        background-color: var(--scrollbaractive);
        }

        ::-webkit-scrollbar-button:horizontal:decrement,
        .scroll::-webkit-scrollbar-button:horizontal:decrement {
        background-color: var(--scrollbar);
        }

        ::-webkit-scrollbar-button:horizontal:increment,
        .scroll::-webkit-scrollbar-button:horizontal:increment {
        background-color: var(--scrollbar);
        }

        ::-webkit-scrollbar-button:vertical:decrement,
        .scroll::-webkit-scrollbar-button:vertical:decrement {
        background-color: var(--scrollbar);
        }

        ::-webkit-scrollbar-button:vertical:increment,
        .scroll::-webkit-scrollbar-button:vertical:increment {
        background-color: var(--scrollbar);
        }

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

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

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

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

        ::-webkit-scrollbar-button:active,
        .scroll::-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;
        }

/*SCROLLBAR END*/