@keyframes head-contnt{
    from { position:relative;right:300px;top:100px;}
    
    to {
        position: relative;
        right:-0px;
        top:100px;
      
    }
  }
  
@keyframes body-c{
  from {position:relative;right:300px;}
  
  to{position:relative;right:-0px;}
}
  
  #bt1{
    background-color: #A0AECD;
  }
  
  #body-content p{
    color:black;
  }
  
  #body-content{
    animation-name: body-c;
    animation-duration: 1s;
    padding:5px 10px;
    margin-left:5px;
    background-color: white;
    border-radius: 10px;
    width:330px;
    position: relative;
    top:180px;
   
    color:red;
 
  }
  
  #head-content p{
    font-weight:bold;
    font-family:Arial;
  }
  #head-content{
    animation-name: head-contnt;
    animation-duration: 1s;
    position:relative;
    top:100px;
    margin-left:5px;
    font-size: 50px;
  
  }
  
  #header a{
    text-decoration: none;
  }
  
  #header li:hover{
    background-color: #A0AECD;
  }
  
  #header li{
    border:1px solid #A0AECD;
   
    padding:3px;
    margin-left:5px;
   
  }
  
  
  #header ul{
    list-style-type: none;
    position: relative;
    font-size: 20;
    display: flex;
    left:2%;
    margin-top:5px;
    
  }
 
  body{
    background-image: url('https://mobimg.b-cdn.net/v3/fetch/e0/e04a36a1b9ddef842f0e77bdb158a678.jpeg');
    background-size: 500px;
    
    background-repeat: no-repeat;
  }
  
  *{
    font-family:Courier New;
    color:white;
    margin:0;
    padding:0;
    
  }