*{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(60% + 0.8vmin);
}

body{
  background-color:lightgray;
  color: whitesmoke;
}
h5{font-family: Arial, Helvetica, sans-serif; width: 100%; height: 50px; color: white;font-size: 200%; font-weight: bolder;}
h3{background-color: rgba(5, 5, 5, 0.5); color:white; font-family: Arial, Helvetica, sans-serif; width: 100%; height: 50px; margin:0px; font-size: 200%; font-weight: bolder; padding: 10px; z-index: 1; position:absolute}
h4{background-color: whitesmoke; color:rgba(0, 0, 0, 0.8); font-weight: bold; font-family:Arial, Helvetica, sans-serif; width: 100%; height: 50px; padding: 20px 0px 0px 0px; font-size: 200%; z-index: 1; display: flex; align-items: flex-start; justify-content: start;}
h1{background-color: rgba(5, 5, 5, 0.6); color:white; font-family: Arial, Helvetica, sans-serif; width: 100%; height: 50px; margin: 0px; position: absolute; z-index: 1;font-size: 200%;}
h2{background-color: black; color:whitesmoke; font-family: Arial, Helvetica, sans-serif; width: 100%; height: 3vw; margin: 0px; position: relative; font-size: 2vw; z-index: 5; border-radius: 0px 0px 10px 10px;}  
footer{background-color: rgba(5, 5, 5, 0.9); color: white; font-family: Arial, Helvetica, sans-serif; width: 100%; height: 20px;  font-size: 80%; z-index:3; position:relative; bottom: 0%;}

.headtag1 p{ 
  padding-left: 30px;
  
}

.link{
  z-index: 1;
  position: relative;
  margin: auto;
  width: 50%;
}

.headerbox{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1;
  display: inline-block;
  position: absolute;
  }

.headtag1{
  background-color: whitesmoke;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  font-size: 120%;
  padding: 0px 0px 0px 50px;
  height: 120px;
  line-height: 300%;
}

.img-bg{
  
  top: 0px;
  bottom: 0px;
  background-color: rgba(250, 246, 250, 0.548);
  background-image: url(picture//bg8.JPG); 
  height:100%; 
  width: 100%; 
  position: sticky;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  
}


.Banner{ 
  background-image: url(picture/banner-2.jpg); 
  background-size: cover;
  position: relative;
  top: 0px;
  bottom: 0px;
  background-color: rgba(250, 246, 250, 0.548);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  
}



.banner-box{ 
  background-color: white;
  box-sizing: content-box;
  position: absolute;
  height: 25vw; 
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}



.bg-box {
  background-color: white;
  box-sizing: content-box;
  position: absolute;
  height: 100%;
  width: 100vw;
  z-index: 2;
  display:flex;
}

 .hobby-box{ 
          padding:1%;
          box-sizing: content-box;
          position: relative;
          top: 27vw;
          width: 100%;
          background-color: white;
          margin: auto;
          margin-bottom: 3%;

      }
.textbox{
  background-color: transparent;
  width: 100vw;
  height: 30%;
  justify-content: center;
  align-items: center;
}
      

.bottombox{
  align-items: flex-end;
  justify-content: center;
  height: 27%; 
  width: 100vw;
  display: flex;
}

.middlebox{
  width: 100vw;
  height: 43%;
  align-items: flex-end;
  justify-content: center;
  display: flex;
}

.icon-box1{
  width: 40px;
  border-radius: 10%;
  background-color: hsl(0, 60%, 99%,0.4);
  position: relative;
  transition: all 0.5s ease;
  margin: 10%;
  z-index: 5;
}



.icon-box1:hover{
  width: 40px;
  border-radius: 10%;
  background-color: hsl(0, 0%, 96%,1);
  position: relative;
  transition: all 0.5s ease;
  margin: 20%;
  z-index: 5;
}


.box-1{
  width: 60%;
  background-color: rgba(5, 5, 5, 0.1);
  margin:auto;
  margin-top: 3%;
  padding: 0.6%;
  position: relative;
  box-shadow: 5px 5px 10px 3px rgba(12, 12, 12, 0.712);
  transition: all 0.5s ease;
  border-radius: 15px;
}

.box-1:hover{
  width: 60%;
  background-color: rgba(5, 5, 5, 0);
  position: relative;
  box-shadow: 5px 5px 20px 5px rgba(12, 12, 12, 0.712);
  transition: all 0.5s ease;
}

.box-2{
  height: 30vw;
  width: 50%;
  background-color: white;
  margin: auto;
  margin-bottom: 2vw;
  margin-top: 2vw;
  padding: 0%;
  transition: all 0.5s;
  position:relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 5px 5px 10px 5px rgba(12, 12, 12, 0.5);
}

.box-2:hover{
  height: 40vw;
  width: 70%;
  background-color: white;
  margin: auto;
  margin-bottom: 2vw;
  padding: 0%;
  box-shadow: 10px 10px 20px 3px rgba(12, 12, 12, 0.712);
  transition: all 0.5s;
  position:relative;
}

.box-3{ 
  height: 250px;
  width: 30%;
  background-color: grey;
  box-shadow: rgba(0, 0, 0, 0.5) 3px 7px 10px 2px;
  margin: 2% 2% 2% 2%;
  
}

.box-3:hover{ 
  box-shadow: rgba(0, 0, 0, 0.6) 3px 7px 10px 2px;
}

.box-4{ 
  height: 250px;
  width: 40%;
  background-color: rgba(2, 2, 2, 0.3);
  margin: 2% 2% 2% 2%;
  color:white;
  padding: 2% 2% 2% 2%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2fr;
  box-shadow: rgba(0, 0, 0, 0.5) 3px 7px 10px 2px;
  border-radius: 10px;
  position: relative;
}

.box-5 {
  height: 50%;
  width: 600px;
  display: flexbox;
  align-items: center;
  justify-content: center;
  color: black;
  text-align: center;
  letter-spacing: 1px;
  margin-top: 1%;
  margin-bottom: 3%;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2%;
  border-radius: 20px;
  border: 8px solid rgba(199, 29, 221, 0.3);
}

.box-5 input[type=number]{
  width: 30%;
  height: 30px;
  border: 3px solid black;
  border-radius: 10px;
  margin: 5px;
  padding: 5px;
}
.box-6{
  width:100%;
  height: 40vw;
}


.img-1{
  width: 100%;
  height: 30vw;
  z-index: 0;
  margin: auto;
  position: relative;
  border-radius: 10px 10px 0px 0px;
}

.img-2{
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: auto;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.img-icon{
  width:40px;
  height: 40px;
  z-index: 3;
  margin: auto;
  position: relative;
}


.img-logo{
  width: 40px;
  height: 40px;
  transition: ease-in-out 0.1s;
}
.img-logo:hover{
  width: 50px;
  height: 50px;

}



.buttonhead1{
  background-color: transparent;
  color: whitesmoke;
  height: 90%;
  width: 10%;
  position:absolute;
  margin: 0.1%;
  font-size: 1vw;
  border: 0px;
  transition: 0.5s ease; 
}  

.buttonhead1:hover{
  background-color: rgba(255, 255, 255, 0.1);
  color: whitesmoke;
  font-weight: 600;
  transition: 0.5s ease;

}



.button1{
  background-color: rgba(0, 0, 0, 0.6);
  font-size: 2.5vw;
  font-weight: 450;
  color: white;
  width: 22%;
  height: 10%;
  padding: 0px;
  border: 4px solid rgb(219, 217, 217,0.5);
  border-radius: 10px;
  box-shadow: 10px 10px 20px 5px rgba(43, 42, 42, 0.6)  ;
  position: absolute;
  bottom: 11%;
  left: 10%;
  display: border block;
  box-sizing: block;
  transition: ease-in-out 0.3s;
}



.button2{
  background-color: rgba(0, 0, 0, 0.6);
  font-size: 2.5vw;
  font-weight: 450;
  color: white;
  width: 22%;
  height: 10%;
  margin-left: 0px;
  padding: 0px;
  border: 4px solid rgb(219, 217, 217,0.5);
  border-radius: 10px;
  box-shadow: 10px 10px 20px 5px rgba(43, 42, 42, 0.6) ;
  position: absolute;
  bottom: 11%;
  left: 39%; 
  display: border block;
  box-sizing: block;
  transition: ease-in-out 0.3s;
}


.button3{
  background-color: rgba(0, 0, 0, 0.6);
  font-size:  2.5vw;
  font-weight: 450;
  color: white;
  width: 22%;
  height: 10%;
  margin-left: 0px;
  padding: 0px;
  border: 4px solid rgb(219, 217, 217,0.5);
  border-radius: 10px;
  box-shadow: 10px 10px 20px 5px rgba(43, 42, 42, 0.6)  ;
  position: absolute;
  bottom: 11%;
  right:10%;
  display: border block;
  box-sizing: block;
  transition: ease-in-out 0.3s;

}


.button3:hover,.button2:hover,.button1:hover{
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 15px 15px 25px 5px rgba(43, 42, 42, 0.6)  ;
  font-size: 2.5vw;
  font-weight: 500;
  color:rgba(0, 0, 0, 0.6);
  border: 2px solid whitesmoke;
}

.button4{
  width: 25vw;
  height: 3vw;
  font-size: 100%;
  font-weight: bold;
  color:white;
  margin: 5px 0px 0px 0px;
  border-radius: 5px;
  border: transparent;
  transition: ease-in-out 0.1s;
  position: relative;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 5%;
 }
 .button4:hover {
  box-shadow: rgba(219, 218, 218, 0.3) 0px 0px 10px 5px;
 }

 .button5{
  height: 30px;
  width: 120px;
  font-size: 100%;
  color:white;
  background-color:rgba(199, 29, 221, 0.6) ;
  border-radius: 10px;
  margin: 5px;
  border: 2px solid rgb(199, 29, 221);
  transition: ease-in-out 0.2s;
}
.button5:hover,.button6:hover{
box-shadow: 0px 0px 10px 5px white;
}

.button6{
  height: 40px;
  width: 150px;
  font-size: 100%;
  color:white;
  background-color:rgba(221, 29, 103, 0.6) ;
  border-radius: 10px;
  margin: 5px;
  border: 2px solid red;
  transition: ease-in-out 0.2s;
}




.buttonneogent{
  background-color: rgba(146, 143, 146, 0);
  font-size: 4rem;
  font-weight:700;
  color: rgba(77, 62, 62, 0.3);
  width: 60%;
  height: 40%;
  padding: 0px;
  border: 0px;
  box-shadow: 0px 5px 10px 3px rgba(43, 42, 42, 0.0) ;
  align-self: center;
  justify-self: center;
  transition: ease-in-out 0.5s;
  border-radius: 20px;
  
}

.buttonneogent:hover{

  box-shadow: 0px 10px 100px 5px rgba(247, 239, 240, 0.3);
  width: 80%;
  height: 50%;
  color: white;
  font-size: 4.5rem;
   
}

.buttonlogo{
  background-color: transparent;
  border: 0px;
  width: 60px;
  height: 60px;
}

.output1{
  width: 50%;
  height: 40px;
  background-color: white;
  color: black;
  display: flex;
  padding: 3px;
  text-align: center;
  font-size: 150%;

}

.output2{
  width: 100%;
  height: 70px;
  background-color: white;
  display: flex;
  padding: 10px;
  text-align: center;
  font-size: 120%;
  border-radius: 10px;
}

.tag1{ 
  width: 100%;
  height: 2%;
  background-color: rgba(245, 2, 245, 0.6);
  display: flex;
  align-self: flex-end;
}


table,td,th{
  border: 3px solid black;
  width: 600px;
  text-align: center;
  color: black;
  margin-top: 0%;
  background-color: rgba(0, 0, 0, 0.05);
}