html{
    margin: auto;
    overflow-y: hidden;
    overflow-x: hidden;
  }
        body {
          background-image: url('ASSETSOTHER/background19201080.png');
          background-size: cover;
          aspect-ratio: 16/9;
          margin: auto;
        }

        @font-face {
          font-family: 'Saiba';
          src: url(../SAIBA-45.otf);
      }
      
      @font-face {
          font-family: 'Glasgow';
          src: url(../Not\ Jam\ Glasgow\ 16.ttf);

          
      }
      h1, h2, h3, h4 { 
          font-family: 'Saiba';
      }
      p { 
          font-family: 'Glasgow'; 
      }

      a:link {
         color: rgb(255, 0, 98);
         background-color: transparent;
         text-decoration: none;
        }

      a:visited {
         color: rgb(149, 15, 161);
         background-color: transparent;
         text-decoration: none;
            }

       
.header {
  position: absolute;
  left: 0%;
  top: 0%;
  background-image: url("ASSETSOTHER/titlepanel.png");
  background-position: bottom right,  top left;
  background-repeat: no-repeat;
  width: 620px;
  transform: scale(0.75);
  transform-origin: top left;
  aspect-ratio: 5 / 2.9;
  scale: 80%;
  z-index: 10;
}

.header .cd {

  position: absolute;
  top: 2.5%;
  left: 2.5%;
  width: 35%;
  height: 60%;
  scale: 120%;
  background-image: url("ASSETSOTHER/CDnormal.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 7; 
  pointer-events: none; 

}

.header .homelink {
 position: absolute;
  top: 0%;
  left: 0%;
  width: 35%;
  height: 50%;
    z-index: 7;
  
}

.header .homelink:hover ~ .cd {
  background-image: url("ASSETSOTHER/CDhover.png");
}

.header .titletext {
  position: absolute;
  top: 33%;
  height: 55%;
  right: 8%;
  width: 72%;

  font-family: "Saiba";
  font-size: 5em;
  color: white;
  text-align: center;
  text-shadow: 5px 5px 5px #000000;


  display: flex;
  align-items: center;
  justify-content: center;
}

.textbox {
position: absolute;
left: 20%;
top: 0%;
width: 305px;
height: 277px;
scale: 90%;
background-image: url(ASSETSOTHER/textboxfacingleft.png);
}

.textbox .introtext {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 235px;
  height: 150px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 80%;
  text-align: center;
  color: #000000;
 
}

.playerbar {
    position: absolute;
    top: 2%;
    left: 40%;
    width: 590px;
    height: 241px;
    scale: 90%;
    background-image: url(ASSETSOTHER/playerbar.png);
}

.playerbar .playertext {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 550px;
  height: 150px;
  font-family: "Glasgow";
  font-size: 2em;
  line-height: 100%;
  text-align: center;
  color: #ffffff;
  text-shadow: 5px 5px 5px #000000;


}

.musicnotes {
    position: absolute;
    top: 2%;
    left: 75%;
    width: 305px;
    height: 250px;
    background-image: url(ASSETSOTHER/musicnotes.png);
}

.musicnotes .secretbutton {
    position: absolute;
  border: none;
  padding: 5%;
  height: 20px;
  width: 20px;
  top: 80%;
  left: 68%;
  border-radius: 50%;
  display: block;
  text-decoration: none;
  background-color: transparent;
}

.fnafvinyl {
    position: absolute;
    top: 30%;
    left: 4%;
    width: 410px;
    height: 484px;
    scale: 90%;
    background-image: url(ASSETSOTHER/happiestdayvinyl.png);
    z-index: 10;
}

.fnafvinyl .fnaftext {
    position: absolute;
    top: 68%;
    left: 15%;
    width: 240px;
    height: 130px;
    font-family: 'Glasgow';
    font-size: 17pt;
    line-height: 85%;
    text-align: center;
    color: #000000;
 

}

.bunnyskatesvinyl {
    position: absolute;
    top: 30%;
    left: 28%;
    width: 410px;
    height: 484px;
    scale: 90%;
    background-image: url(ASSETSOTHER/bunnyskatesvinyl.png);
     z-index: 10;
}

.bunnyskatesvinyl .bunnytext {
    position: absolute;
    top: 68%;
    left: 15.5%;
    width: 238px;
    height: 130px;
    font-family: 'Glasgow';
    font-size: 15pt;
    line-height: 85%;
    text-align: center;
    color: #000000;
   

}

.mettatonvinyl {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 410px;
    height: 484px;
    scale: 90%;
    background-image: url(ASSETSOTHER/mettatonvinyl.png);
     z-index: 10;
}

.mettatonvinyl .mtttext {
    position: absolute;
    top: 69%;
    left: 15%;
    width: 240px;
    height: 130px;
    font-family: 'Glasgow';
    font-size: 18pt;
    line-height: 85%;
    text-align: center;
    color: #000000;
 

}

.blankvinyl {
    position: absolute;
    top: 30%;
    left: 75%;
    width: 410px;
    height: 484px;
    scale: 90%;
    background-image: url(ASSETSOTHER/blankvinyl.png);
     z-index: 10;
}

.recordbar {
    position: absolute;
    bottom: 0%;
    width: 1920px;
    height: 264px;
    background-image: url(ASSETSOTHER/bottomvinylbar.png);
    z-index: 1  ;
}