/* Start https://www.cursors-4u.com */ * {cursor: url(https://ani.cursors-4u.net/food/foo-7/foo655.cur), auto !important;} /* End https://www.cursors-4u.com */
 
 body{
   box-sizing: border-box;
    background-image: url('/imgnstuff/tumblr_6a0347c4be4af7de22ca499c0adb7db1_1571470f_100.webp');
  
  }
  
  
  :root{
  --grad1:linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(252, 249, 151, 1) 35%, rgba(245, 225, 154, 1) 100%);
	}
    
  
  
  
  
  ::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #ffcfdb;
}

::-webkit-scrollbar-thumb {
  background:#ffcfdb;
}

::-webkit-scrollbar-thumb:hover {
  background:#ffcfdb;
}
  
  
  
 
  * {
    font-family:HelvetiPixel;
    box-sizing: border-box;
}
  
  .lace{
     position: fixed;
     top:0;
  left: 0; right: 0;
  height: 75px;
  width: 100vw;
  background: url('/imgnstuff/tumblr_lpc37pxsX41qcn2vb.png') repeat-x top, bottom center;
  z-index:100;
  pointer-events: none;
}

.layout {
 margin: 0 auto;
   width: 900px;
  height: 900px;
  display: grid;
  grid-template-areas:
    "header header header" 
    "header header header"
    "nav main todo"
    "nav main todo"
    "nav main button"
    "another andano etano"
    "another andano etano"
    "another andano etano"
    "time footer link" ;
  grid-template-columns:.75fr 1.45fr .75fr;
 grid-template-rows: .25fr .45fr .25fr 1fr .45fr .75fr .50fr .50fr .25fr;
  border-width:11px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
gap:8px;

  }



.header{
grid-area: header;
 text-align: left ;
  background-image:url("https://sh3q.neocities.org/image142.png");
  color:#FFB6C1;
  
  }
 
    
.idk{
   grid-area: idkbro;
    border:#d14750 1px solid;
    background-color:#ffcfdb;
      font-size: 50px;
}
   #m{
     width: 100%;
     position: sticky;
     } 
.nav{
   grid-area: nav;
      font-family:HelvetiPixel;
border-width: 7px;
border:8px ridge #ffcfdb;
border-radius:20px;
overflow-y:scroll;
overflow-x:hidden;
padding:2px;
  }
  .nav a {
  color: black; 
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.nav a:hover {
 background:var(--grad1);
 border-radius: 20px;
 font-style: italic;
}

.nav a .active {
  background-color:#ffadd1;
  color: white;
}

.main{
   grid-area: main;
    border:#d14750 1px solid;
      background-color:#ffcfdb;
      padding: 10px;
      text-align:center;
     
  }
  
  .another{
   grid-area:another;
border:#ff82ae 5px ridge;
      background-color:#fff;
  }
  
  #mp{
    width: 100%;
     padding:10px;
  text-align:center; 

    }
    
    #thumbnail{
      width:100%;
      }
        .songtitle, .track-info{
                padding:-5px;
            }
 
            .controls{
                display:flex; 
                flex-direction:column; 
                gap:15;
                padding:-7px;
            }
 
            .buttons{
                display:flex;
                justify-content:center;
                font-size:100px; /* size of controls */
                width:100%;
            }
 
            .buttons div{
                width:40px;
            }
 
            .playpause-track, .prev-track, .next-track{
                color:#70b1fa; /* color of buttons */
                font-size:40px !important; /* size of buttons */
            }
 
 
            .seeking{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:px;
            }
 
 
            .now-playing{
                font-weight:bold;
            }
            
               input[type=range]{
                -webkit-appearance:none; /* removes default appearance of the tracks */
                width:100%;
            }
 
            input[type=range]:focus{
                outline:none; /* removes outline around tracks when focusing */
            }
 
            input[type=range]::-webkit-slider-runnable-track{
                width:100%;
                height:10px; /* thickness of seeking track */
                background:#d3ebf0; /* color of seeking track */
               
            }
 
            input[type=range]::-webkit-slider-thumb{
              height:20px; /* height of seeking square */
                width:20px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background-image:url("/imgnstuff/coffee20.gif"); 
                -webkit-appearance:none;
                margin-top:-6px; /* 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:#e74492; /* color of seeking track */
            }
 
            input[type=range]::-moz-range-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#e74492; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }
 
  .andano{
   grid-area: andano;
    border:#d14750 1px solid;
      background-color:#ffcfdb;
      padding:10px;
      text-align:center;
      border-width: 7px;
border-style: solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;  

     
     
  }
  .etano{
   grid-area: etano;
    border:#d14750 1px solid;
      background-color:#ffcfdb;
      overflow:hidden;
     
  }
  

    
  .burgh{
   font-family: cheri; 
  text-align: center;
    
    }
  
.todo{
   grid-area: todo;
    border:#d14750 1px solid;
      background-color:#ffcfdb;
        list-style-type: none;
       font-family:HelvetiPixel;
       padding:5px;
  overflow: auto;
  }
  .inner{
    margin:auto;
    background-color: white;
    border: 1px dashed black;
    width:170px;
    }
.tas {
    width: 100px; 
   margin: auto;
    padding: 5px;
  }
.button{
   grid-area: button;
    border:#fff 10px solid;
      background-color:#fff;
      padding: 10px;
      font-family:HelvetiPixel;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
 overflow-x:hidden;
      
  }
  
.link{
   grid-area: link;
    border:#d14750 1px solid;
      background-color:#ffcfdb;
      text-align: center;
  }
.time{
   grid-area: time;
   display:flex;
   justify-content:center;
    border:#d14750 1px solid;
      background-color:#ffcfdb;
  }
  #clock{
    text-align:center;
    padding: 5px;
    font-size: 35px;
    }
    
.footer{
   grid-area: footer;
    border:#d14750 1px solid;
      background-color:#ffcfdb;
      text-align: center;
  }