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

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

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

}

  h1{

  color:white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
  font-size: 70px;

}

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


.Radar2{
  width: 12vh;
  height: 12vh;
  float: right;
 
}



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

}


.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{
  background-color: rgb(0, 76, 255);
  height: 8vh !important;

}

h1{

  color:white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
  font-size:25px;
 

}

.Radar1{
  width: 8vh;
  height:8vh !important;
  float: left;
}


.Radar2{
  width: 8vh;
  height: 8vh !important;
  float: right;
 
}

.back{
  font-size:5vh !important;
}

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


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

}

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

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: 900px) and (orientation: landscape){
   
.wrapper-main{
    width: 100%;
}



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


h1{

  color:white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
  font-size: 25px !important;

}

.Radar1{
  width: 9vh;
  height: 11vh !important;
  float: left;
}


.Radar2{
  width: 9vh;
  height: 11vh !important;
  float: right;
 
}



.container {
    margin-top:25vh !important;
  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{
  background-color: rgb(0, 76, 255);  
  height:12vh;
}

h1{
  
  background-color: rgb(0, 76, 255); 
  color:white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
  font-size: 70px;
  font-stretch: wider;

}

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


.Radar2{
  width: 12vh;
  height: 12vh;
  float: right;
 
}



.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;
}

}