body{
  background-color: black;
}
header
{        position: fixed;

   width: 100%;
height: 100px;
display: flex;

align-content: center;
text-align: center;
justify-content: space-between;
}


.but1 {
    margin: 20px;
    height: 45px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
    flex-wrap: nowrap;
    flex-direction: column;
    border-style: none;
    background-color: rgba(255, 255, 255, 0.151);
    transition-duration: 0.5s;
    font-size: 15px;
    font-family: arial;
    list-style-type: none;
    text-decoration: none;
    border-radius: 0px;
    border-style: none;
    border-radius: 0 !important;
        outline: 0px solid transparent;
  }
  
  
  .a1 { list-style-type: none;
    text-decoration: none;
    color: black;}
  
    .a1:hover { list-style-type: none;
        text-decoration: none;
        color: black;}
        
  
  
  
        .but1:hover {        text-decoration: none;
            list-style-type: none;
            background-color: rgb(97, 95, 95);
            color: rgba(255, 255, 255, 0.4);
        
        }














#main{  
    width: 100%;
    height: 100vh;
    display:flex;
    flex-direction: column;
    align-self: center;
    align-content: center;
    align-items: center;
   
  
  
  }
  .container{
    
      
    display:flex;
    flex-direction: row;
    width: 90%;
    height: 100%;
   
    align-self: center;
    align-content:  center;
    align-items: center;
    justify-content: center;
  }
  
  .firstimg{  
    width: 50%;
     background-size: cover;
    display: flex;
    align-items: center;
     
    height: 100%;
  
  }
  
  
   .whover:hover{
     width:51% ;
   }
   
  
  img{  
    width: 100%;
   }
  
   
   
 .small{
   width: 40%;
 }
  
   
  
   
  
  @media only screen and (max-width: 1000px) {
  
  .container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  #main{
    width: 100%;
  display: flex;
  flex-direction: row;
   }
  
  .firstimg{
     height: 100%; 
  }
  .secondimg{
    height: 100%; 
  }
  }