#body{
background:#333333;
width:100%;
height:100vh;
margin:0;
padding:0;
box-sizing:border-box;}

#menu{
padding:20px 0px 0px 0px;}

#menu h1{
color:#FFFFFF;
font-size:30px;
}

#menu a{
color: #999999;
font-size:19px;
text-decoration:none;
margin:0px 20px 0px 0px;
text-align:center;
transition:0.2s;
}

.active{
border-bottom:4px solid #FFFFFF;
color:#FFFFFF !important;}

#menu a:hover{
border-bottom:4px solid #999999;}

#middle h1{
font-size:40px;
color:#FFFFFF;
text-align:center;
margin:220px 0px 15px 0px;}

#middle p{
font-size:19px;
color:#FFFFFF;
text-align:center;
font-weight:300;}

.button-style {
  width: 200px;
  height: 50px;
  background-color: #ffffff;
  color: #000000; /* Text color */
  border: 1px solid #000000; /* Black border */
  border-radius: 10px; /* Rounded corners */
  text-align: center; /* Center text horizontally */
  line-height: 50px; /* Center text vertically */
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

/* Hover effect */
.button-style:hover {
  background-color: #e0e0e0; /* Light gray background on hover */
}



.footer{
font-size:16px !important;
color: #999999 !important;
text-align:center !important;
position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;}

.footer a{
color: #FFFFFF !important;
text-decoration:none !important;}

.footer a:hover{
text-decoration: underline !important;}


@media only screen and (max-width:1050px) {

#middle h1{
margin:400px 0px 20px 0px;}

.btnn{
margin:10px auto 450px auto;}

}

@media only screen and (max-width:850px) {

#middle h1{
margin:250px 0px 20px 0px;}

.btnn{
margin:10px auto 250px auto;}

#menu a{
font-size:15px;
margin:0px 10px 0px 0px;
}


}

@media only screen and (max-width: 600px) {

#menu h1{
text-align:center;
margin:0px 0px 15px 0px;
}

#menu a{
font-size:19px;
margin:0px 20px 0px 0px;
}

#middle h1{
margin:130px 0px 20px 0px;}

.btnn{
margin:10px auto 200px auto;}


}