body{
    margin:0px;
    background-color: white;
    min-height: 100vh;
   
}

#Header {
    display: flex;
    align-items: center;
    background: rgb(39, 38, 38, 0.3);
    justify-content: space-evenly;
    padding:2px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: 3rem;
     max-width: 100%;
    
}

#list {
    color:ghostwhite;
    display: flex;
    margin-left: auto;

}


#list li{
   list-style: none;
    margin-right:20px;
   
}

#navlist  {
background-color: black;
text-align: center;
}

#container {
    display:flex;
    background-color: red;
    justify-content: space-between;
    
}

.box {
     text-align: center;
       margin-top:-10px;
        

}

.box h1 {
        color:orange;
background-color:black;
}


#background {
    background-color: red;
    height:100%;

background-color: black;

} 
#center {
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: white;
    height:85vh;
    background-image: url(back3.jpg);
   background-size: cover;
   color: ghostwhite;
}

#Heading {
    font-size: 70px;
    
}

nav {
    box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.1);
}

nav a{
    text-decoration: none;
    color: white;
    font-weight: 600;
}


.opts {
    display: none;
}

.sidebar {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 300px;
z-index: 999;
backdrop-filter: blur(10px);
background-color: white;
background-color: rgba(255, 255, 255, 1 );
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;


}

.sidebar li {
    padding: 20px;
    list-style: none;
    align-items: flex-start;
    margin-left: -40px;
    color:black;
    font-family:Verdana;
   

}

.sidebar a {
    color:black;
    font-family:;
}


.sidebar li:hover{
    background-color: white;
    justify-content: center;
}

.sidebar ul {

    width: 100%;

}
.sidebar ul li:hover{

    width: 100%;
    background-color: white;
    
 
}

#center {
   
   background-position: center;
}

@media(max-width: 859px){
    .hideOnMobile{
        display: none;
        
    }

    #Heading {
        font-size: 3.4rem;
    }
      

#image{
    width:150px;
}

.opts {
    display: block;
}

#center {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    height:75vh;
    background-image: url(back3.jpg);
   background-size: cover;
   color: ghostwhite;
   background-position: center;
}
}


.box {
    height: 250px;
    background: rgba(251, 252, 250, 0.9);
    margin: 10px;  
    margin-top: -20px;
}

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: rgba(3, 8, 0, 0.2);
  

}

.btn {
    width: 130px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.1);
    background-color: rgba(243, 108, 18, 0.7);
    border: whitesmoke;
    color: ghostwhite;
    font-weight: 900;
}

.btn:hover {
    cursor: pointer;
    background-color: rgba(243, 108, 18, 0.2);
}


.btn_cent {
    display: flex;
    justify-content: space-evenly;
    

}

@media only screen and  (max-width :1110px){
    .container {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

   
}

@media only screen and  (max-width :600px){
    .container {
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }

    .btn_cent {
        display: flex;
        justify-content: space-evenly;
   
    } 
}