html {
scroll-padding-top: 17%;
scroll-behavior: smooth;
}
.a404page {
width:40%;
margin-right:450%;
margin-left: 15%;
font-size:30px;
background-color:lightBlue;
color:white;
border: 3px solid blue;
border-radius: 10%;
padding:4px;
}

.changesongs {
display:flex;
justify-content:space-between;
width:90%;
margin-top: 10px;
padding:3px;
}
.percent45 {
width:45%;
}
#openSmartphoneNav {
float:right;
height:100%
}
#adjust-volume {
float:right;
width:15%;
vertical-align:middle;
display:flex;
align-items:center;
justify-content:center;
}
#adjust-volume:hover {
cursor:pointer; 
}
#adjust-volume::-webkit-slider-thumb {
background-color:lightBlue;
vertical-align:middle;
margin-top:-7px;
}
#adjust-volume::-webkit-slider-runnable-track {
background-color:white;
height:20px;
border-radius:8px;
border:8px solid lightBlue;
}
.URLs {
width:30%;
font-size: 25px;
color:blue;
border: 2px solid white;
border-left: 2px solid blue;
padding:3px;
cursor:pointer;
}
.URLs:hover {
border-left: 4px solid blue;
}
.audio-controls {
background-color:lightBlue;
text-align:center;
font-size:20px;  
float:right; 
padding:2px;
border-style:none;
color:white;
border-radius:5px;
margin: 5px;
border: 2px solid white;
}
.audio-controls:hover {
  background-color:white;
  border:2px solid blue;
  color:lightBlue;
  cursor:pointer; 
}
.slider-background {
border-radius:10px;
background-color:lightBlue;
border: 1px solid blue;
display:flex;
justify-content:center;
}
.content{
margin-top:200px;
margin-left:10%;
}
#amount {
float:center;
width:80%;
vertical-align:middle;
display:flex;
align-items:center;
justify-content:center;
}
#amount:hover {
cursor:pointer; 
}
#amount::-webkit-slider-thumb {
background-color:lightBlue;
vertical-align:middle;
margin-top:-7px;
}
#amount::-webkit-slider-runnable-track {
background-color:white;
height:20px;
border-radius:8px;
border:8px solid lightBlue;
}
#stop-redirect {
text-decoration-line:underline;
color:blue;
}
#stop-redirect:visited {
text-decoration-line:underline;
color:purple;
}
header {
background-color:lightBlue;  
position:fixed;
z-index: 3;
}
a.head {
  text-decoration-line:none; 
}
a .active {
  color:blue;
} 
h3, h1 {  
  margin-top: 70 px;
  padding-top: 100 px;
}
#glossOver {
top:15%;
padding:60px;
background-color:grey;
text-align:center;
opacity:0.85;
font-size:50px;
font-color:black;
z-index: 1;
height:100%;
position:absolute;
margin:-5px;
vertical-align:center;
padding-top:60px;
}
audio {
 width:90%;
 border-width:1px;
 border-color:blue;
 border-style:solid;
 border-radius:10px;
 background-color:lightBlue;
}
.header {
  color:lightBlue;
  background-color:lightBlue;
  height:15%;
  position:fixed;
  top:0;
  left:0;
  width:100%;
}

.head {
  text-align:center;
  float:right; 
  padding-right:20px;
  padding-left:20px;
  padding-top:5px;
  padding-bottom:5px;
  margin-top:30px;
  color:white;
  font-size: 2em;
  height: 40px;
    border:2px solid lightBlue;


}
.body1 {
  background-color:rgba(230,230,250);
  padding:2px;
  border-width:2px;
  border-style:dashed;
  border-color:rgb(0,0,190);
  font-size: 30px;
}
.head:hover {
  background-color:white;
  color:lightBlue;
  border:2px solid blue;
  font-size: 1.1;
}
.logo {
  object-fit:cover; height:130%; margin-left:15px; margin-top:15px; z-index:6;
}
.code {
font-family:monospace;
font-size:32px;
background-color:rgba(220,220,240);
}
.blog-sidebar {
padding:10px;
right:10px;
position:fixed;
float:right;
background-color:light-blue;
display: flex;
align-items: center;
justify-content: space-between;  
flex-direction: column;
border: 3px double blue;
}
.blog-sidebar button {
margin: 2px;
}

#mycanvas {
  width:1000px;
  height:400px;
  border: 2px solid blue;
  background-color: light-blue;

}