@import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Eater&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&family=Eater&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&family=Eater&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&display=swap');
  ::-webkit-scrollbar{
    width: 5px;
    
   
  }
  ::-webkit-scrollbar-track{
    box-shadow:inset 0 0 10px rgba(5, 7, 5, 0.616);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb{
    background: rgb(212, 14, 14);
    border-radius: 3px;
  }

  body{
    display: flex;
    flex-direction: column;
    align-items: center;
    

   background-image: url("assets/Electronic\ Circuit\ Wallpaper\ Hq.jpg");
  
    background-image: cover;
   margin: 0;
    padding: 0;
    position: relative;
    cursor: url(assets/cursor-2.png), auto;
    font-family: "Advent Pro", sans-serif;
  font-optical-sizing: auto;
  
  font-style: normal;
  min-height: 100vh;

    


    
   
}
.button{
            
  position: absolute;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  font-weight: 550;
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  margin-top: 87px;
  margin-left: 70vw;
  border-radius: 30px 0 0 30px;
  background-color: rgb(163, 173, 145);
  box-shadow: inset 3px 3px 30px black;
  border-top: 4px solid black;
  border-right: 5px solid black;
  color: rgb(109, 243, 0);
  transition: 0.5s;
  font-family: "Eater", serif;
  font-weight: 400;
  font-style: normal;

   
}
.button:hover{
  background-color: rgb(226, 39, 186);
  rotate: 30deg;
  transition: 0.3s;
  cursor: url(assets/pointer-cursor2.png), auto;
}
  header{
    width: 100%;
    background: linear-gradient(to left, rgb(0, 255, 34), green, rgb(23, 48, 54));
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    border-bottom: 3px solid black;
    z-index: 3;
    box-shadow: 50px 50px 200px; ;

  }

  header h1{
  font-family: "Eater", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
    width: 70vw;
    height: 70%;
    background: linear-gradient( #2514bb, #504a4a);
    border-bottom: rgba(224, 224, 224, 0.384) solid 3px;
    border-right: rgb(231, 231, 231) solid 3px;
    border-top: rgb(133, 108, 108) solid 3px;
    border-left:rgb(211, 176, 176) solid 3px;
    border-radius: 50px 0 50px 25px;;
    padding: 10px;
    color: rgb(3, 247, 44);
    box-shadow: inset 5px 5px 30px black;
    
  }
.container{
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(85, 133, 139, 0.664);
  padding: 30px;
  box-shadow: inset 10px 10px 10px black;
  border-bottom:rgb(137, 165, 141) 3px solid;
  border-right: black solid 5px;
  border-radius: 70px 70px 10px 10px;
  border-top: rgb(152, 152, 187) 5px solid;
 cursor: url(assets/cursor-2.png), default;
  width: min(40vh, 300px);
  overflow: auto;

  
}
.enter{
  margin-top: 10px;
  font-family: "Eater", serif;
  font-weight: 400;
  color:rgb(197, 223, 175);
  width: 100%;
  text-align: center;
  background-color: rgb(36, 100, 102);
  border-radius: 25px;
  border-top: black 3px solid;
  box-shadow: 10px 10px 50px;
  
  transition: 0.5s;
}
.content{
  background-color: rgb(33, 82, 85);
  color:rgb(197, 223, 175);
  padding: 20px;
  border-radius: 50px 50px 30px 30px;
  box-shadow: inset 20px 20px 20px black;
  box-shadow: 10px 10px 50px;

}
.lillian{
  position: absolute;
  top: 180px;
  width: 150px;
  
  border-radius: 0 0 70px 70px;
  border-bottom:rgb(3, 247, 44) solid 3px;
  transition: 0.4s;

  
}

.enter:hover{
  background-color: aquamarine;
  rotate: 5deg;
  color: black;
  transition: 0.5s ease-in-out;
  width: 50%;
  
}
/*home container*/

/*responsiveness*/
@media screen and (max-width: 700px) {
  header h1{
    font-size: 1rem;
  }
  .container{
    width: 200px;
    font-size: 0.9rem;
  }
  .button{
    top: -20px;
    font-size: 1rem;
  }
  
}
@media screen and (max-width:500px) {
  .button{
    font-size: 14px;
    top: 0;
  }
  
}