*{
    margin: 0;
    padding: 0;
    box-sizing:content-box;
    
}

body{
    background-repeat: no-repeat;
    background-color:silver;
}
    
.header{
    
    border: 2px solid rgb(0, 76, 255);
    background-color: rgb(0, 76, 255);
    height: 10vh;
    width: 100%;
    
}

.Radar1{
    width: 10vh;
    height: 10vh;
    float: left;
  }
  
.Radar2{
    width: 10vh;
    height: 10vh;
    float: right;
    
  }
  

.header h1{
    color:aliceblue;
    text-align: center;
    font-size: 25px;
    margin-top:2vh;     
      
}


.back{
    float:left;
    margin-right:200vh;
    margin-bottom: 4vh;
    
}


.para{
    margin-left:2vh;
    margin-right: 2vh;
    color:black;
}


































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

    .wrapper-main{
        width: 100%;
    }
    
    .header{
    
        border: 2px solid rgb(0, 76, 255);
        background-color: rgb(0, 76, 255);
        height: 10vh;
        width: 100%;
    }   

    .Radar1{
        width: 10vh;
        height: 10vh;
        float: left;
    }
  
   .Radar2{
        width: 10vh;
        height: 10vh;
        float: right;
    
    }
  
    .header h1{
        color:aliceblue;
        text-align: center;
        font-size: 25px;
       
    
        
    }
       
    

    .back{
        float:left;
        margin-right:200vh;
        margin-bottom:3vh;
       
    }
    
    
    .para{
        margin-right: 2vh;
        margin-left: 2vh;
        font-size:small;
       
    }


   
    }

























    
   @media only screen and (max-width: 600px) and (orientation: landscape){
       
    .wrapper-main{
        width: 100%;
    }
    
    .header{
        background-color: rgb(0, 76, 255);
        height: 10vh;
        width: 100%;

    }

    .Radar1{
       width: 10vh;
       height: 10vh;
       float: left;
    }
  
    .Radar2{
       width: 10vh;
       height: 10vh;
       float: right;
    
  }
  

    .header h1{
        color:aliceblue;
        text-align: center;
        font-size: 10px;
       
    
        
    }
    
    .back{
        float:left;
        margin-right:200vh;
        margin-bottom:2vh;
        
        
    }
    
    .para{
        margin-right: 2vh;
        margin-left: 2vh;
        font-size:small;
       
    }
    
}
    
   


























    
@media only screen and (min-width: 992px){

    .wrapper-main{
      width: 100%;
    }

        
               
    .header{
            
        border: 2px solid rgb(0, 76, 255);
        background-color: rgb(0, 76, 255);
        height: 10vh;
        width: 100%;
            
        }

    .Radar1{
       width: 10vh;
       height: 10vh;
       float: left;
       }
  
   .Radar2{
       width: 10vh;
       height: 10vh;
       float: right;
    
       }
  

    .header h1{
        color:aliceblue;
        text-align: center;
        font-size: 25px;
        margin-top: 2vh;     
              
        }
        
        
    .back{
        float:left;
        margin-right:200vh; 
        margin-bottom: 4vh;
        }
        
        
    .para{
        margin-left:2vh;
        margin-right: 2vh;
        font-size: larger;
        color:black;
           
        }
    }