body { margin-top: 0;
  margin-bottom:0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  image-rendering: crisp-edges;
image-rendering: pixelated;
  background-image: url("bg.png"), linear-gradient(to right, white, transparent);
background-repeat: no-repeat;
background-size: cover;
  background-position:bottom right;
background-attachment:fixed;
  
  color: black;
  font-family: "Times New Roman";
  font-size:18px;

}

@font-face {
  font-family: 'Frutiger';
  src: url('/fonts/Frutiger.ttf');
}

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

    100% { opacity:1; }
}

.main {
	padding-left:60px;
	padding-top:20px;
	position:absolute;
	background-color:none;
	width:800px;
	height:100%;
	background-image:linear-gradient(to right, white 25%, rgba(255,255,255,0.5) 80%, transparent);
	
}

#bgVideo {
	  position: fixed;
  right: 0;

  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

      

h1 {position:absolute;
	font-size:58px;
	animation: fadein 2s;
animation-delay:0.5s;
animation-fill-mode: forwards;
	opacity:0;
	font-family:Arial;
	font-weight:bold;
	color:white;
	text-shadow:1px 1px 0px slategray, 1px -1px 0px slategray, -1px -1px 0px slategray, -1px 1px 0px slategray, 2px 2px 0px black;
	line-height:0px;
	
}

h2 { position:absolute;
	font-size:90px;
	transform:scaleX(2.5);
	transform-origin:top left;
	margin-top:40px;
animation-fill-mode: forwards;
	opacity:0.2;
	mix-blend-mode:multiply;
	font-family:Times New Roman;
	font-style: italic;
	font-weight:bold;
	color:white;
	text-shadow:1px 1px 0px slategray, 1px -1px 0px slategray, -1px -1px 0px slategray, -1px 1px 0px slategray;
	line-height:0px;
	
}
.mainTitle {
	position:relative;
}


h3 {
	font-size:20px;
	margin-top:-10px;
	opacity:0;
	animation: fadein 1.5s;
animation-fill-mode: forwards;
animation-delay:0.5s;
  font-family:"Frutiger";
	font-weight:normal;
	line-height:0px;

}
.text {
width:400px;
background-color:none;

	opacity:0;
animation: fadein 2s;
animation-fill-mode: forwards;
animation-delay:2.25s;

}

#tracklist {
width:400px;
background-color:NONE;

/*animation: fadein 3s;
animation-fill-mode: forwards;
animation-delay:2s;*/
}
summary:hover {
cursor:pointer;
font-weight:bold;
}
summary {
	color:slategray;
	font-size:18px;
}

details {
	font-family:"Frutiger";
	font-size:16px;
}
  li {
  opacity: 0;
  -webkit-animation: fadeIn 0.9s 1;
  animation: fadein 1.5s 1;
  animation-delay: 1.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  font-family:"Frutiger";
  font-size:18px;
color:slategray;
margin:0 0 0 0;
padding:0 0 0 0;
}
	li:hover {
	cursor:pointer;
	font-weight:bold;
	color:black;
	}
#musicplayer {
padding-top:120px;
  opacity: 0;
  -webkit-animation: fadeIn 0.9s 1;
  animation: fadein 1.5s 1;
  animation-delay: 1s;
   -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  font-family:"Frutiger";
  width:400px;

}  

.controls{
        font-size:14px !important; /* size of controls */
 /* background color of controls */
        text-align:center;

		color:slategray;
		letter-spacing:1px;
	background-color:none;

    }
 
    .controls td{
        padding:0px 0px 0px 0px;
	/* padding around controls */
    }
	
    .controls td:hover {
        color:black; 
		cursor:pointer;/* 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;
		color:slategray;
    }
 
    .total-duration{
        padding-left:5px;
		color:slategray;
    }
	
	.audiobutton {
	color:slategray
	}
		.audiobutton:hover {
	color:black;
	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: slategray; /* color of seeking track */
    }
   .seek_slider, .volume_slider {
background-color:rgba(255,255,255,0);
} 
    input[type=range]::-webkit-slider-thumb {
        height: 10px; /* height of seeking square */
        width: 4px; /* width of seeking square */
        border-radius: 3px; /* change to 5px if you want a circle seeker */
        background: none; /* color of seeker square */
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -4.5px; 
		  border:5px solid slategray;
        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: 2px; /* thickness of seeking track */
        cursor: pointer;
        background: slategray; /* color of seeking track */
    }

    input[type=range]::-moz-range-thumb {
        height: 10px; /* height of seeking square */
        width: 6px; /* width of seeking square */
        border-radius:0px; /* change to 5px if you want a circle seeker */
        background: slategray; /* color of seeker square */
		border:5px solid slategray;
        cursor: pointer;
        border:none;

    }
	.volume {
  display: flex;
  justify-content: space-evenly;
  padding: 10px 10px 0px 10px;
  background-color: var(--bg);
  color: var(--color);
}
a:link {
color:slategray;
text-decoration: none;
}
a:hover {
font-weight:bold;
}
a:visited {
  color:slategray;
  text-decoration: none;
}

button {
	font-family:Times New Roman;
	color: slategray;
	font-size:18px;
	background-color:ghostwhite;
	border:none;
	box-shadow:1px 1px 2px slategray;
	padding:4px;
	margin-bottom:20px;
	width:250px;
}
button:hover {
	cursor:pointer;
	font-weight:bold;
}