@font-face {
  font-family: 'HKGrotesk-Black';
  src: url('fonts/HKGrotesk-Black.otf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

body{
  width: 100%;
  height: 1055px;
  background-color: #321A3E;
  display: flex;
  justify-content: space-evenly;
  
  background-image: url("imagenes/tapizmorado.png");
  background-repeat: repeat;


}


.socials{
  width:150px ;
  height:150px ;
  position : absolute ;
  background-color:transparent ;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;
 }

 


 #youtube{
  background-image: url("imagenes/yt.png")  ;
  top: 10px;
  right: 100px;
 }

 #tiktok{
  background-image: url("imagenes/tiktok.png")  ;
  top: 70px;
  right: 260px;
 }

 #twitter{
  background-image: url("imagenes/twit.png")  ;
  top: 10px;
  right: 520px;
 }

 #instagram{
  background-image: url("imagenes/ig.png")  ;
  top: 200px;
  right: 100px;
 }

 #twitch{
  background-image: url("imagenes/twitch.png")  ;
  top: 430px;
  right: 340px;
 }

 #ko-fi{
  background-image: url("imagenes/kofi.png")  ;
  top: 230px;
  right:410px;
 }

 #newgrounds{
  background-image: url("imagenes/ng.png")  ;
  top: 500px;
  right: 100px;
 }



 #toyhouse{
  background-image: url("imagenes/thouse.png")  ;
  top: 600px;
  right: 420px;
 }



.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}


.book { 
  width: 100px;
  height: 300px;
  background-color: #bf8b0e;
  /* start counting from the respective margin for the next*/ 
  /*add the width and height of all the previous ones */
  
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 999;  
 } 

 /**/
 .book:hover{
  background-color: #ffba15;
 }



 #book1 {
  background-image: url("imagenes/gameart.png")  ;
  position : absolute ;
  top: 40px;
  left: 55px;
 }



 #book2 {
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 40px;
  left: 155px;
 }


 #book3 { 
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 40px;
  left: 255px;
 
 } 

 #book4 { 
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 40px;
  left: 355px;
  
 }

 #book5 { 
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 40px;
  left: 455px;
  
 }

 #book6 { 
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 40px;
  left: 555px;
  
 }

#book7 {
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 490px;
  left: 55px;
 }



 #book8 {
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 490px;
  left: 155px;
 }


 #book9 { 
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 490px;
  left: 255px;
 
 } 

 #book10 { 
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 490px;
  left: 355px;
  
 }

 #book11 { 
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 490px;
  left: 455px;
  
 }

 #book12 { 
  background-image: url("imagenes/unopenedbook.png")  ;
  position : absolute ;
  top: 490px;
  left: 555px;
  
 }


/*leave this at the bottom*/

.stand{
 margin: auto;
 background-color: rosybrown;
 background-image: url("imagenes/shelf2.png")  ;
 background-repeat: no-repeat;
 background-size: contain;
  position: absolute;
 width: 700px;
 height: 900px;
 z-index: -999;
 }


 #shelf{
 left: 5px;
 top: 5px;
 }

 



#floor{
 background-color: black;
 background-image: url("imagenes/floorfooter.png")  ;
 background-repeat: no-repeat;
 background-size: contain;
 position: fixed;
 width: 1520px;
 height: 215px;
 z-index: 999;
 right: 0px;
 bottom: 0px;

}

.trap{
  background-color: #35210c;
  
  background-repeat: no-repeat;
  background-size: contain;
  width: 400px;
  height: 100px;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
  z-index: 999;
  position: fixed;
  bottom: -20px;
 }

 .trap:hover{
  background-color: #ffba15;
 }

 #door{
 left: 200px;
 background-image: url("imagenes/homedoor.png")  ;

  }

 #door2{
  right: 200px;
 background-image: url("imagenes/infodoor.png")  ;
  }


@media screen and (max-width: 800px) {}