/* ====== Fonts ====== */
@font-face {
    font-family: 'chibo';
    src: url(https://squids-world.neocities.org/Chibolddemo-1GD7g.ttf);
}
 
 @font-face {
    font-family: 'alte';
    src: url(' https://squids-world.neocities.org/AlteHaasGroteskRegular.ttf') format("truetype");
 }

 @font-face {
    font-family: 'minecraft';
    src: url('https://squids-world.neocities.org/Minecraft.ttf') format("truetype");
 }
 
  @font-face {
    font-family: 'upheav';
    src: url('https://squids-world.neocities.org/upheavtt.ttf') format("truetype");
 }

/* ====== base elements ====== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
}

body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background: url('https://squids-world.neocities.org/uriel-xtgONQzGgOE-unsplash%20(1).jpg') no-repeat center; background-size: cover; 
    image-rendering: pixelated;
    
}

h1 {
    font-weight: bold;
    font-family: 'chibo';
    font-size: 200%;
    border: 10px dotted lightblue;
    border-image: url('https://squids-world.neocities.org/border%20template%20blue.png') 3% round;
    border-image-outset: 2px;
    background-color: #0057FF;
    padding-left: 7px;
    border-radius: 7px;
    line-height: 150%;
    color: white;
}

h2 {
    font-weight: bold;
    font-family: 'chibo';
    font-size: 150%;
    border: 10px dotted lightblue;
    border-image: url('https://squids-world.neocities.org/border%20template%20blue.png') 3% round;
    border-image-outset: 2px;
    background-color: #0057FF;
    padding-left: 7px;
    border-radius: 7px;
    line-height: 150%;
    color: white;
}

h3 {
    font-weight: bold;
    font-family: 'chibo';
    font-size: 120%;
    padding-left: 7px;
    border-radius: 7px;
    line-height: 100%;
    color: darkblue;
}


/* ====== Classes ====== */
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.gridbox {
    display: grid;
    grid-template-columns:
        [nav-start] 16.8%
        [nav-end] .9%
        [mainbox-start] 54.7%
        [mainbox-end] 1.5%
        [right-start] 26.1%
        [page-end] auto;
    grid-template-rows: 
        17% 3% 4.3% 13.2% 27% 28% auto;
    width: 1550px;
    height: 1080px;
    background: url('https://squids-world.neocities.org/Mock%20Website9.png') no-repeat center;
    image-rendering: pixelated;
    background-size: 100% 100%;
    margin-top: 40px;
    position: relative;
}

.item-a {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 7;
    padding: 10px;
    padding-top: 0px;
    font-family: "alte";
    color: white;
    font-size: 100%;
    margin: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 140%;
    border: 10px dotted lightblue;
    border-image: url('https://squids-world.neocities.org/border%20template%20blue.png') 3% round;
    overflow-y: scroll;
    scrollbar-color: #b5eeff #e2ffc200;
}

.status {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 4;
    grid-row-end: 4;
    padding: 10px;
    padding-top: 0px;
    font-family: "alte";
    color: darkblue;
    font-size: 100%;
    
}

.stamps-banner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbox {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 6;

    display: flex;
    flex-direction: column;
}

.button {
    background-color: darkblue;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-family: 'chibo';
    border-radius: 7px;
    border: 5px solid black;
    border-image: url('https://squids-world.neocities.org/175804907285091498.png') 2% repeat;
    border-image-outset: 1px;
    margin: 7px;
    margin-top: 0px;
}

.button:hover {
  background-color: lightblue; /* Green */
  color: white;}
  
.rightbar {
    grid-column-start: 6;
    grid-column-end: 8;
    grid-row-start: 2;
    grid-row-end: 4;
    padding: 10px;
    padding-top: 0px;
    font-family: "alte";
    color: darkblue;
    font-size: 100%;
} 

.fishhome {
    position: absolute;
    left: 240px;
    top: 600px;
    width: 250px;
} 
.nge1 {
    position: absolute;
    right: 375px;
    bottom: 10px;
} 
.stamp1 {
    position: absolute;
    right: 300px;
    top: 190px;
} 
.stamp2 {
    position: absolute;
    right: 200px;
    top: 190px;
} 
.stamp3 {
    position: absolute;
    right: 100px;
    top: 190px;
} 
.stamp4 {
    position: absolute;
    right: 0px;
    top: 190px;
} 

.blinkies {
    width: 100%;
} 
.selfie {
    position: absolute;
    left: 280px;
    top: 800px;
}

.changelog {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 7;
    padding: 15px;
    padding-top: 0px;
    font-family: "minecraft";
    color: black;
    font-size: 85%;
    background-color: #e8f7ff;
    border: 10px dotted lightblue;
    border-radius: 20px;
    border-image: url('https://squids-world.neocities.org/border1.png') 2.5% round;
    border-image-outset: 3px;
    overflow-y: scroll;
}

.addtosite {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.additions {
    width: 80%;
    border: 10px dotted lightblue;
    border-radius: 20px;
    border-image: url('https://squids-world.neocities.org/Border%20template-Lime%20Green.png') 25% round;
    border-image-outset: 3px;
    background-color: #CEC63C;
    color:darkgreen;
    margin: auto;
    margin-top: 15px;
    font-family: alte;
}

.additions > h1 {
    color: white;
}





















/* ====== Music Top Banner ====== */
        
#musicplayer{ 
  font-family: 'basiic';
  font-weight:bold;
  height:30px;
  width:100%;
  left:0;
  top:0;
  position:fixed;
  margin-bottom:20px;  
  display:flex;
  background: linear-gradient(180deg,#77BBFF 0%,  #f0f5ff  45%, #3885d2 47%, #59a3ec 60%, #77BBFF 100%);
 border:ridge 2px #77BBFF;/* border around player */
  outline: solid 2px black;  
 box-shadow: inset 10px 0px 6px -10px #3885d2, inset -13px 0px 6px -10px #3885d2, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #3885d2;
    }
 
    .songtitle{ 
    display:block;
    padding:2px; /* padding around song title */
    font-family: 'pixel';
    margin-top:4px;
    margin-right: 5px; 
    font-size:15px;
    color:black;
    letter-spacing: 1px; 

    background: white;/* background of song title */
    border: gray inset 1px;
       border-radius:6px;
       box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
 
    .controls{
      font-size:12px; /* size of controls */
      text-align:center;
      width:100px;
      height:20px;
      text-decortation:none;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
 
    .controls td{
       padding-top:5px; /* padding around controls */
    }
 
    .seeking{
      width:75%;
      background: transparent;/* background color of seeking bar */
      display:flex;
      justify-content: space-evenly;
      padding:7px; /* padding around seeking bar */
       
    }
 
    .current-time{  
      padding-right:5px;
      margin-right: 3px; 
     filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
       
    }
 
    .total-duration{
      padding-left:5px;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
 
   .ctrlimg {
height:16px;
width:16px;
}
.ctrlimg:hover{
cursor:help;
}
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
      background: transparent;
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px; /* thickness of seeking track */
        cursor: help;
        border-radius: 6px;
        background: black; /* color of seeking track */
        border: 1px white solid;
    }

    input[type=range]::-webkit-slider-thumb {
      
        height: 30px; /* height of seeking square */
        width: 20px; /* width of seeking square */
        background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
        background-size: 25px;
        -webkit-appearance: none;
        margin-top: -10px;
        
    }
    
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: white; /* color of volume seeking track */
     filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
    }
    
 input[type=range].volume_slider::-webkit-slider-thumb {
    background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
   }
 
 
.slider_container {  
  width: 15%;       /* width of volume seeker */
  display: flex;
  justify-content: center;
  align-items: center;
}    
        
        
        
#musicplayer {
  position: fixed;    /* so it stays even when you scroll */
  top: 0;             /* stick to top of viewport */
  left: 0;            /* align to left */
  width: 100%;        /* stretch across page (if desired) */
  z-index: 9999;      /* very high so it stays above other elements */
}