html{
    margin: auto;
    overflow-y: scroll;
    overflow-x: hidden;
  }
        body {
          background-image: url('ASSETSFRIENDS/background1920x2160.png');
          background-size: cover;
          aspect-ratio: 89/1;
          margin: auto;
        }

a {
  color: inherit;
}

@font-face {
    font-family: 'Saiba';
    src: url(../fonts/SAIBA-45.otf);
}

@font-face {
    font-family: 'Glasgow';
    src: url(../fonts/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: 3% ;
  top: 4%;
  background-image: url("ASSETSFRIENDS/titlepanel.png");
  background-position: center;
  width: 500px;
  height: 250px;
  scale: 80%;
  z-index: 9;
}

.header .cd {

  position: absolute;
  top: -30%;
  left: -20%;
  width: 100%;
  height: 100%;
  background-image: url("ASSETSFRIENDS/CDnormal.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2; 
  pointer-events: none; 

}

.header .homelink {
  position: absolute;
  left: -15%;
  top: -20%;
  width: 35%;
  height: 70%;
  z-index: 3;

}

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

.header .titletext {
  position: absolute;
  top: 30%;
  left: 15%;
  height: 55%;
  width: 72%;
  line-height: 80%;

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

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


.row1 {
 position: absolute;
 top: 25%;
 left: 12%;
 width: 1423px;
 height: 381px;
 background-image: url(ASSETSFRIENDS/friendsrow1.png);
z-index: 10;
}

.row1 .windytext {
 position: absolute;
  top: 55%;
  left: 2%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;

}

.row1 .vaportext {
 position: absolute;
  top: 55%;
  left: 28%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;

}

.row1 .moonytext {
 position: absolute;
  top: 55%;
  left: 61%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: right;
  color: #000000;

}

.row1 .flaretext {
 position: absolute;
  top: 55%;
  left: 87%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: right;
  color: #000000;

}

.row2 {
 position: absolute;
 top: 60%;
 left: 12%;
 width: 1423px;
 height: 402px;
 background-image: url(ASSETSFRIENDS/friendsrow2.png);
 z-index: 10;

}

.row2 .etchtext {
 position: absolute;
  top: 20%;
  left: 2%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;

}

.row2 .vriskatext {
 position: absolute;
  top: 20%;
  left: 28%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;
 
}

.row2 .vriskatext {
 position: absolute;
  top: 20%;
  left: 28%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;

}

.row2 .jojotext {
 position: absolute;
  top: 20%;
  left: 61%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: right;
  color: #000000;

}

.row2 .jonayatext {
 position: absolute;
  top: 20%;
  left: 87%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: right;
  color: #000000;

}


.row3 {
 position: absolute;
 top: 102%;
 left: 12%;
 width: 1423px;
 height: 370px;
 background-image: url(ASSETSFRIENDS/friendsrow3.png);
z-index: 10;
}


.row3 .dreamtext {
 position: absolute;
  top: 55%;
  left: 2%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;

}

.row3 .dantext {
 position: absolute;
  top: 55%;
  left: 28%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;

}

.row3 .coletext {
 position: absolute;
  top: 55%;
  left: 61%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: right;
  color: #000000;

}

.row3 .austintext {
 position: absolute;
  top: 55%;
  left: 87%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: right;
  color: #000000;

}


.row4 {
 position: absolute;
 top: 139%;
 left: 12%;
 width: 1423px;
 height: 381px;
 background-image: url(ASSETSFRIENDS/friendsrow4.png);
z-index: 10;
}


.row4 .jamestext {
 position: absolute;
  top: 16%;
  left: 2%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;

}

.row4 .vofttext {
 position: absolute;
  top: 16%;
  left: 28%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;

}

.row4 .vofttext {
 position: absolute;
  top: 16%;
  left: 28%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: left;
  color: #000000;

}

.row4 .t2ktext {
 position: absolute;
  top: 10%;
  left: 61%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: right;
  color: #000000;

}

.row4 .nattext {
 position: absolute;
  top: 16%;
  left: 87%;
  width: 160px;
  height: 130px;
  font-family: "Glasgow";
  font-size: 1.5em;
  line-height: 90%;
  text-align: right;
  color: #000000;
}



.textbox {
position: absolute;
left: 75%;
top: 0%;
width: 363px;
height: 337px;
scale: 90%;
background-image: url(ASSETSFRIENDS/textbox.png);
}

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

.cartridges1 {
position: absolute;
top:0%;
left: 30%;
width: 631px;
height: 208px;
background-image: url(ASSETSFRIENDS/cartridges1.png);
z-index: 1;
  animation-name: pulse;
          animation-name: floating;
          animation-iteration-count: infinite;
          animation-duration: 3s;
          animation-timing-function: ease-in-out;
}
           @keyframes floating {
          from {
            transform: translate(0,0px)
          }

          65% {
            transform: translate(0,15px)
          }

          to {
            transform: translate(0,0px)
          }
}

.cartridges2 {
position: absolute;
top: 40%;
left: 2%;
width: 1822px;
height: 462px;
z-index: 1;
background-image: url(ASSETSFRIENDS/cartridges2.png);
  animation-name: pulse;
          animation-name: floating;
          animation-iteration-count: infinite;
          animation-duration: 3s;
          animation-timing-function: ease-in-out;
          animation-direction: reverse;
}
           @keyframes floating {
          from {
            transform: translate(0,0px)
          }

          65% {
            transform: translate(0,15px)
          }

          to {
            transform: translate(0,0px)
          }
}

.cartridges3 {
position: absolute;
top: 92%;
left: 1%;
width: 1849px;
height: 876px;
z-index: 2;
background-image: url(ASSETSFRIENDS/cartridges3.png);
  animation-name: pulse;
          animation-name: floating;
          animation-iteration-count: infinite;
          animation-duration: 3s;
          animation-timing-function: ease-in-out;
}
           @keyframes floating {
          from {
            transform: translate(0,0px)
          }

          65% {
            transform: translate(0,15px)
          }

          to {
            transform: translate(0,0px)
          }
}

.wires {
position: absolute;
top: 180%;
left: 0%;
width: 1898px;
height: 202px;
background-image: url(ASSETSFRIENDS/bottomwires.png);
z-index: 1;
}