@font-face {
  font-family: 'Swiss Light Condensed';
  src: url("../fonts/Swiss721BT-LightCondensed.otf");
}
@font-face {
  font-family: 'Swiss Light';
  src: url("../fonts/Swiss721BT-Light.otf");
}
@font-face {
  font-family: 'Swiss Light Extended';
  src: url("../fonts/Swiss721BT-LightExtended.otf");
}

@font-face {
  font-family: 'digicold';
  src: url("../fonts/Digicold Detetiive.otf");
}
body {
font-family:"Swiss Light";
color:blue;
background-image:url("../stayup/dither.png");
background-repeat: no-repeat;

background-position:70% 1%;
background-size:600px
}

@keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
h1 {

font-size:24px;
font-style:italic;
letter-spacing:6px;
font-weight:normal;
font-family:"Swiss Light Extended"
}
h2 {

font-size:16px;
font-style:italic;
letter-spacing:3px;
font-weight:normal;
font-family:"Swiss Light Extended";

}

#bottomright {
	background-image:url("https://files.catbox.moe/f01f7q.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 100% 100%;
	height:64%;
	position: fixed; 
	right:10px;
	bottom:10px;
	width:170px;
	opacity:1;
	mix-blend-mode: normal;

}

#downloads:hover > h2 {
	letter-spacing:1;


}

#tracklist {

}
#tracklist:hover > h1 {
letter-spacing:2;
}

#tracklist h1 {
width: fit-content;
background-color:white;
}
#track_insert {
	display:inline;
background-color:white;
}

a {
color: blue
}
a:hover {
font-weight:bold;

}
#eptitle {
font-family:Digicold;
font-size:60px;
filter:drop-shadow(1px 1px 0.05rem rgba(25, 60, 255,0.2));
}
#center {
	position: relative;


width:600px;
height:600px;
top:10%;
    bottom: 15%;
    left: 0;
    right: 0;
    
    margin: auto;
/*filter:drop-shadow(4px 4px 0.1rem rgba(25, 60, 255,0.2));*/


animation-iteration-count: 1;
}
#center:hover {
	opacity:1;

}
#dash {
filter:drop-shadow(2px 2px 0.1rem rgba(25, 60, 255,0.2)) ;
opacity:0;

}
#center:hover > #dash {
filter:drop-shadow(2px 2px 0.1rem rgba(25, 60, 255,0.2));
opacity:0;

}
#downloads h2 {
background-color:white;
width:fit-content;
}
#downloads a:link {
background-color:white;
}

summary {
background-color:white;
width:fit-content;

}
#musicplayer {
        background: none;
/* width of the player */
font-size:18px;
width:400px;
filter:drop-shadow(2px 2px 0.1rem rgba(25, 60, 255,0.2));
    }
 
    .songtitle {
		font-size:26px;
         /* padding around song title */
        /* border under song title */
		color:blue;
background-color:none;
    }
     .songtitle:hover {
letter-spacing:10px;

    }
    .controls{
        font-size:12px !important; /* size of controls */
 /* background color of controls */
        text-align:center;
        width:100%;
		color:blue;
		letter-spacing:2px

    }
 
    .controls td{
        padding:0px 0px 0px 0px; /* padding around controls */
    }
 
    .seeking{
        background-color:none; /* background color of seeking bar */
        display:flex;
        justify-content: space-evenly;
        padding:2px; /* padding around seeking bar */
    }
 
    .current-time{
        padding-right:5px;
    }
 
    .total-duration{
        padding-left:5px;
    }
	
	.audiobutton {
	color:blue
	}
		.audiobutton:hover {
	color:blue;
	font-weight:bold;
	}
    
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        background-color:none; /* background color of seeking bar - make the color same as .seeking background color */
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px; /* thickness of seeking track */
        cursor: pointer;
        background: blue; /* color of seeking track */
    }
    
    input[type=range]::-webkit-slider-thumb {
        height: 10px; /* height of seeking square */
        width: 4px; /* width of seeking square */
        border-radius: 0px; /* change to 5px if you want a circle seeker */
        background: white; /* color of seeker square */
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -4.5px; 
		  border:5px solid blue;
        border:none;
box-shadow: 1px 1px 0px rgba(0,0,0, 1);
    }
    
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 4px; /* thickness of seeking track */
        cursor: pointer;
        background: blue; /* color of seeking track */
    }
    
    input[type=range]::-moz-range-thumb {
        height: 10px; /* height of seeking square */
        width: 5px; /* width of seeking square */
        border-radius:0px; /* change to 5px if you want a circle seeker */
        background: blue; /* color of seeker square */
		border:5px solid blue;
        cursor: pointer;
        border:none;

    }
	.volume {
  display: flex;
  justify-content: space-evenly;
  padding: 10px 10px 0px 10px;
  background-color: var(--bg);
  color: var(--color);
}

 .songtitle {
text-align:left;
font-family:"Swiss Light Condensed";
letter-spacing:3px;
}


.seeking {
font-family: "Swiss Light Condensed";
color:blue;
}
.seek_slider, .volume_slider {
background-color:rgba(255,255,255,0);
}

.prev-track:hover, .playpause-track:hover, .next-track:hover {
cursor:pointer;
font-weight:bold }

.playpause-track {
	font-size:16px
}
p {
background-color:white;
display:inline;
}

.clicked-track {
display:inline;
color:blue;
letter-spacing:4px;
font-size:16px;

}
.clicked-track:hover {
font-weight:bold;
cursor:pointer;
letter-spacing:2px;

}