body { background: rgba(128, 188, 204, 1.0);
    background-image: url(images/back.jpg);
    background-attachment: fixed;
    box-sizing: border-box;
    font-family: 'dudu', sans-serif;
    margin:0;
    cursor:url(https://files.catbox.moe/s0b9mf.cur), auto;
    a:hover {cursor: url(https://files.catbox.moe/nbdsng.cur), auto;}
    button:hover {cursor: url(https://files.catbox.moe/nbdsng.cur), auto;}
}
 a:link{
       color:cadetblue;
        text-decoration: none;   
    }
a:visited {
    color:#3c8183;
        text-decoration: none; 
}



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




#nav {
    width: 60%;
    color:darkseagreen;
    overflow: hidden;
    margin: auto;
    margin-top: 20px;
    padding: 25px;
    text-align: center;
    justify-content: center;
}


.bigbox {
    column-gap: 10px;
    display: flex;
    width: 90%;
    margin: auto;
    margin-top: 10px;
    height: 80vh;
    overflow: hidden;
    box-sizing: border-box;
   
}


   
.home {
    scale:0.4;
    position:absolute;
    margin-top: -12%;
    margin-left: -10%;
   
}

 p.home {
     color: #3c8183;
     position: absolute;
        margin-top: 4%;
     margin-left: -6%;
    font-size: 400%;
    }


.mid {
     box-sizing: border-box;
    color: rgb(193, 145, 83);
    padding-left: 100px;
    overflow: hidden;
}

.paper {
    position: absolute;
    width: 18%;
    margin-top: 4%;
    margin-left: -2%;
    
   
}

.papertxt {
    position: absolute;
    width: 15%;
    margin-top: 8%;
     color: #175052; 
}


.shelf {
     box-sizing: border-box;
    color: rgb(193, 145, 83);
    height: 160%;
    margin: auto;

}

.B1 {
    position: absolute;
    width:8%;
    margin-left: -35%;
    margin-top: 8px;
    
}


.b2 {
   position: absolute;
    width:200px;
    margin-left: -27%;
    margin-top: -20px; 
}

.b3 {
   position: absolute;
   width:10%;
    margin-top:1%;
    margin-left: -13%
 

}

.b4 {
   position: absolute;
   width:9%;
    margin-top:12.5%;
    margin-left: -35%
}

.b5 {
   position: absolute;
   width:11%;
    margin-top:14%;
    margin-left: -25%
}

.b6 {
   position: absolute;
   width:11%;
    margin-top:15%;
    margin-left: -14%
}

.links {

    list-style-image: url(images/fishgold.gif);
}
    

.tooltip .tooltext {
    font-weight: bold;
    font-size: x-large;
  visibility: hidden;
  width: 120px;
  background-color: rgba(95, 158, 160, 0.71);
  color: #175052;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
margin-left: 5%;
    margin-top:-4%;
}

.tooltip .tooltext2 {
    
    font-weight: bolder;
    font-size: xx-large;
  visibility: hidden;
  width: 120px;

  background-color: rgba(95, 158, 160, 0.71);
  color: #175052;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
margin-left: 10%;
    margin-top:5%;
}


.tooltip:hover .tooltext {
  visibility: visible;
}

.tooltip:hover .tooltext2 {
  visibility: visible;
}

#foot {
    text-align: center;
margin-top: 1%;
}




#musicbox {
    opacity: 1;
color:#5f84a0;
margin-top:140%
    

    
}

#musicplayer{
    box-sizing: border-box;
    font-family:'dudu', sans-serif; /* default font */
    font-weight: bold;
    background-color:#f4f4ee; /* background color of player */
    border:2px dashed cadetblue; /* border around player */
    width:90%; /* width of the player - make it 100% if you want it to fill your container */
    margin:auto; 
    display:flex;
    padding: 10px;
    flex-direction:column;
    gap:10px;
}

.songtitle, .track-info, .now-playing{
    text-align: center;
    padding:5px;
}

.controls{
    display:flex; 
    flex-direction:column; 
}

.buttons{
    margin: auto;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.buttons div{
    width:33.3%;

}

.seeking, .volume{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:5px;
}

.now-playing, .track-info{
    background: rgba(222, 184, 135, 0.3);/* background color of top two boxes */
}

.now-playing{
    font-weight:bold;
}

.material-icons{
    color:#5f84a0;

}

input[type=range]{
    -webkit-appearance:none; /* removes default appearance of the tracks */
    appearance:none;
    width:100%;
    background-color:inherit;
}

input[type=range]:focus{
    outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:cadetblue; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0; /* change to 5px if you want a circle seeker */
    background:#3c8183; /* color of seeker square */
    -webkit-appearance:none;
    margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:cadetblue; /* color of seeking track */
}

input[type=range]::-moz-range-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0; /* change to 5px if you want a circle seeker */
    background:cadetblue; /* color of seeker square */
    border:none; /* removes weird border around seeker square in firefox */
}