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

        @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'; 
      }

       
.header {
  position: absolute;
  left: 0%;
  top: 0%;
  background-image: url("ASSETSNEWSBLOG/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;
  z-index: 10;
}

.header .cd {

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

}

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

.header .homelink:hover ~ .cd {
  background-image: url("ASSETSNEWSBLOG/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;
  top: 0%;
  left: 74%;
  width: 487px;
  height: 433px;
  scale: 80%;
  background-image: url(ASSETSNEWSBLOG/textboxnews.png);
   z-index: 8;
}

.textbox .mailinglisttext {
  position: absolute;
  top: 15%;
  left: 13%;
  width: 380px;
  font-family: "Glasgow";
  font-size: 2em;
  line-height: 75%;
  text-align: center;
  color: #000000;
  z-index: 8;

}


.main {
  position: absolute;
  left: 23%;
  top: 0%;
  z-index: 9;
}

.main .personalbutton {
 position: absolute;
  border: none;
  padding: 5%;
  height: 88px;
  width: 44px;
  top: 2%;
  left: 8%;
  border-top-left-radius: 45%;
  border-top-right-radius: 5%;
  border-bottom-right-radius: 5%;
  border-bottom-left-radius: 5%;
  display: block;
  text-decoration: none;
}

.main .cookiefishbutton {
 position: absolute;
  border: none;
  padding: 5%;
  height: 88px;
  width: 44px;
  top: 2%;
  left: 22%;
  border-radius: 5%;
  display: block;
  text-decoration: none;
}

.main .slimefishbutton {
 position: absolute;
  border: none;
  padding: 5%;
  height: 88px;
  width: 44px;
  top: 2%;
  left: 36%;
  border-radius: 5%;
  display: block;
  text-decoration: none;
}

.main .apparelbutton {
 position: absolute;
  border: none;
  padding: 5%;
  height: 88px;
  width: 44px;
  top: 2%;
  left: 50%;
  border-radius: 5%;
  display: block;
  text-decoration: none;
}

.main .captchabagsbutton {
 position: absolute;
  border: none;
  padding: 5%;
  height: 88px;
  width: 44px;
  top: 2%;
  left: 64%;
  border-radius: 5%;
  display: block;
  text-decoration: none;
}

.main .otherbutton {
 position: absolute;
  border: none;
  padding: 5%;
  height: 88px;
  width: 40px;
  top: 2%;
  left: 78%;
  border-top-left-radius: 5%;
  border-top-right-radius: 35%;
  border-bottom-right-radius: 5%;
  border-bottom-left-radius: 5%;
  display: block;
  text-decoration: none;
}


.main .tabContent {
   position: absolute;
  top: 30%;
  height: 55%;
  left: 8%;
  width: 84%;

  font-family: "Glasgow";
  font-size: 2rem;
  color: rgb(0, 0, 0);
  text-align: center;
  outline: solid lime;

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


      

        div.icons {
         position: absolute;
         top: -10%;
         left: 0px;
         animation-name: pulse;
         animation-name: floating;
         animation-iteration-count: infinite;
         animation-duration: 3s;
         animation-timing-function: ease-in-out;
          z-index: 1;
        }
        @keyframes floating {
          from {
            transform: translate(0,0px)
          }

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

          to {
            transform: translate(0,0px)
          }
        }
        div.miis {
         position: absolute;
         top: -10%;
         left: 0px;
         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)
          }
        }

.mario {
  position: relative;
  bottom: 0%;
  z-index: 0;
}