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

body{
  background-image: url('aircraft photo.jpg');
  background-repeat:no-repeat;
  background-size:cover;
}

 .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;
    width: 100%;
    text-align: center;
   
      
}

.back{
  font-size:2vh;

}

.error{
  color:red;
  margin-left: 10vh;
  margin-top: 60vh;
}


.container {
  padding: 120px;
  border-radius: 5px;
  margin-top: 2vh;

}


.input-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
button {
  width: 40%;
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #ccc;
}


input[type="checkbox"] {
  display: inline;
  margin-right: 5px;
}

button {
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: underline;
}










































@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: 40px !important;
       
    
        
    }


.back{
  font-size:2vh;

}

.error{
  color:red;
  margin-left: 1vh;
  margin-top: 80vh;
}


.container {
  padding: 120px;
  border-radius: 5px;
  margin-top: 50vh;
}


.input-group {
  margin-bottom: 15px;

}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-size: larger;
}

input[type="text"],
input[type="password"],
button {
  width: 60vh;
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #ccc;
}


input[type="checkbox"] {
  display: inline;
  margin-right: 5px;
}

button {
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: underline;
}

}
































@media only screen and (max-width: 600px) and (orientation: landscape){
   
.wrapper-main{
    width: 100%;
}



.header{
    background-color: rgb(0, 76, 255);
    height: 10vh;
    
}



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


.Radar2{
    width: 10vh;
    height: 10vh;
    float: right;
    
}
  
.header h1{
    color:white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    height: 5vh;
    width: 100%;
    text-align: center;
    font-size: 30px;

} 

.back{
  margin-left: 2vh;
  font-size: 4vh!important;
}


.error{
  color:red;
  margin-left: 10vh;
  margin-top: 40vh;
}
  
     
.container {
   padding: 120px;
   border-radius: 5px;
    }


.input-group {
   margin-bottom: 15px;
    }

 
label {
    display: block;
    margin-bottom: 5px;
    }

input[type="text"],
input[type="password"],
button {
    width: 40%;
    padding: 8px;
    border-radius: 3px;
    border: 1px solid #ccc;
    }


input[type="checkbox"] {
    display: inline;
    margin-right: 5px;
    }

button {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    }

button:hover {
    background-color: #0056b3;
    }

a {
    text-decoration: none;
    color: white;
    }

    
a:hover {
    text-decoration: underline;
    }
 }















@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;
        width: 100%;
        text-align: center;
        font-size: 25px;
        margin-top: 1vh;     
              
        }
     
     .back{
        font-size:2vh;

    }   

    .container {
        padding: 120px;
        border-radius: 5px;
    }


    .input-group {
       margin-bottom: 15px;
    }

    label {
       display: block;
       margin-bottom: 5px;
    }


    input[type="text"],
    input[type="password"],
    button {
      width: 40%;
      padding: 8px;
      border-radius: 3px;
      border: 1px solid #ccc;
    }


    input[type="checkbox"] {
      display: inline;
      margin-right: 5px;
    }

    button {
      background-color: #007bff;
      color: white;
      cursor: pointer;
    }

    button:hover {
       background-color: #0056b3;
    }

    a {
       text-decoration: none;
       color: white;
    }

    a:hover {
      text-decoration: underline;
    }

}