html{
    width: 100%;
    height: 100vh;
    margin: auto;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  body {
          background-image: url('ASSETSHOMESTUCK/enderslimesitebackground1920x1080.png');
          background-size: cover;
          aspect-ratio: 0.59/1;
          margin: auto;
        }
        @font-face {
        font-family: 'Saiba';
         src: url(../fonts/SAIBA-45.otf);
        }
        h1, h2, h3, h4 { 
       font-family: 'Saiba';
        }

        @font-face {
       font-family: 'Glasgow';
         src: url(../fonts/Not\ Jam\ Glasgow\ 16.ttf);
        }
        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("ASSETSHOMESTUCK/titlepanel.png");
  background-position: center;
  width: 500px;
  height: 250px;
  scale: 90%;
}

.header .cd {

  position: absolute;
  top: -30%;
  left: -20%;
  width: 100%;
  height: 100%;
  background-image: url("ASSETSHOMESTUCK/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("ASSETSHOMESTUCK/CDhover.png");
}

.header .titletext {
  position: absolute;
  top: 33%;
  left: 15%;
  height: 55%;
  width: 72%;

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


  .scene {
  position: relative;
  top: -4%;
  left: 25%;
  align-self: center;
  width: 978px;
  height: 1169px;
  scale: 77%;
  overflow: visible;
  z-index: 10;
}

/* INSIDE PAGE */
.inside {
  position: absolute;
  inset: 0;
  box-shadow:
    0 40px 80px rgba(0,0,0,.5);
    background-color: rgb(235, 231, 225);
    background-image: url("ASSETSHOMESTUCK/innerbg.png");
    background-size: cover;
  
  padding: 3rem;
  z-index: 1;
}

/* COVER */
.cover {
  position: absolute;
 inset: 0px;         /* overscan */
  background:
 linear-gradient(90deg,
  rgba(0,0,0,.6) 0%,
  rgba(0,0,0,.3) 2%,
  rgba(255,255,255,.08) 4%,
  rgba(0,0,0,0) 12%),
    url("ASSETSHOMESTUCK/hsprojectsmagazinecover.png")
      center / cover no-repeat; 
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(.2,.7,.1,1);
  z-index: 5;
  cursor: pointer;
  box-shadow:
    0 40px 80px rgba(0,0,0,.6),
    inset -1  px 0 0 rgba(255,255,255,.15);
}

/* COVER DEPTH */
.cover::before {
  content: "";
  position: absolute;
   top: 10px;
  left: 10;
  background:
    linear-gradient(
      -90deg,
      rgba(0,0,0,.6),
      transparent 15%);
  pointer-events: none;
}


#open:target ~ .scene .cover {
  transform: rotateY(-145deg);
  z-index: 5; /* raise it above everything else during flip */
}

.close {
  font-family: "Saiba";
  font-size: medium;
  position: absolute;
  top: 1.5rem;
  right: 2rem;
}

/* BUTTONS */
.inside button {
  display: block;
  margin: 1rem 0;
  padding: .75rem 1.5rem;
  font-size: 1rem;
}


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

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

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

.menu {
 position: absolute;
top: -39%;
left: 60%;
scale: 54%;

}

.menu .text {
  position: absolute;
  top: -10%;
  height: 115%;
  left: -18%;
  width: 135%;
  
  font-family: "Glasgow";
  font-size: 6rem;
  color: rgb(255, 255, 255);
  text-align: left;
  line-height: 88%;

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

}

.scene .articleheading {
  position: absolute;
  top: 0%;
  color: rgb(20, 19, 19);
  text-align: left;
   width: 100%;
   height: 7%;

   font-family: "Saiba";
   font-size: large;
}

.scene .articletext1 {
  position: absolute;
  top: 8%;
  width: 40%;
  height: 75%;
  font-family: "Glasgow";
  font-size: 1.5rem;
  color: rgb(20, 19, 19);
  text-align: left;
  line-height: 88%;

}

.scene .articletext2 {
 position: absolute;
  top: 88%;
  width: 90%;
  height: 6%;
  font-family: "Glasgow";
  font-size: 1.5rem;
  color: rgb(20, 19, 19);
  text-align: left;
  line-height: 88%;

}

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

}

.scene .articleimages {
  position: absolute; 
  top: 8%;
  left: 45%;


}
  .articleimages img {
  width: 100%;
  height: 100%;
 

}

.navigation {
  z-index: 44;
  background-color:rgb(188, 217, 191); 
  border: 2px solid rgb(194, 84, 194);
  display:inline-block;
  padding: 0.5%;
  position: fixed;
  top: 0;
  right: 0%;
}