*{
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}
body{
    background-color:silver;
}

.wrapper-main{
    width: 100%;
}


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

}

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



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



h1{
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    height: 10vh;
    width: 100%;
    text-align: center;
    font-size: 70px;
    font-stretch:wider;
     
}

.fighter li{    
    font-size: 15px;
    font-family:Arial, Helvetica, sans-serif; 
    display:inline-block;
   
    
    
}

nav li a{
    color: aliceblue;
    padding-left:35vh;
}


.grid-container {
    display: grid;
    grid-template-columns: 400px 50px auto;
    height: 75vh;
}

.marquee{
    height: 75vh;   
    overflow: hidden;
    position: relative;

}


marquee p{
    font-size: large;
    font-weight: 60;
    color: red;
    
}
   
   
.collage{
    height:75vh;
    width:100vh;
    float: right !important;
    background-image: url("ATC.jpg");
    background-position: center;
    background-repeat:no-repeat;
    background-size: cover;
    transition: 5s;

    animation-name: animate;
    animation-direction: normal;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: ease-in-out;

}

@keyframes animate {
    0%
    {
        background-image: url("ATC.jpg");
    }
    20%
    {
        background-image: url("aircraft photo.jpg");
    }
    40%
    {
        background-image: url("runway.jpg");
    }
    60%
    {
        background-image: url("hangar.jpg");
    }
}

.runway{
    height:6vh;
    width: 100%;
    color:white;
    background-color: rgb(0, 76, 255);
    border: 2px solid rgb(0, 76, 255);
    position:relative;

    
}
































































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

.wrapper-main{
    width: 100%;
}

.header{   

    background-color:rgb(0, 76, 255);

}


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



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


h1{ 
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    height: 5vh;
    width: 80%;
    text-align: center;
    font-size: 50px;
    font-stretch:wider;
    padding-left: 5vh;
    
}



.fighter li{       
    font-family:Arial, Helvetica, sans-serif; 
    display:inline;   
    width:65vh;   
    
}


.fighter li a{
    color: aliceblue;
    font-size: 15px;
    padding-left:6vh;
}


.grid-container {
    display: grid;
    grid-template-columns: 110px 30px 40px;
    height: 75vh;
}

.marquee{
    height: 75vh;

}


marquee p{
    font-size: large;
    font-weight: 60;
    color: red;
}


.collage{
    height:75vh;
    width:35vh;
    background-image: url("ATC.jpg");
    background-position: center;
    background-repeat:no-repeat;
    background-size: cover;
    transition: 5s;

    animation-name: animate;
    animation-direction: normal;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: ease-in-out;

}

@keyframes animate {
    0%
    {
        background-image: url("ATC.jpg");
    }
    20%
    {
        background-image: url("aircraft photo.jpg");
    }
    40%
    {
        background-image: url("runway.jpg");
    }
    60%
    {
        background-image: url("hangar.jpg");
    }
}

.runway{
    height:9vh;
    width: 100%;
    color:white;
    background-color: rgb(0, 76, 255);
    border: 2px solid rgb(0, 76, 255);
    position:relative;

   
    
}

.runway marquee{
    margin-top: 2vh;
}

}















































    




































    

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


.wrapper-main{
    width: 100%;
}



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


.Radar1{
    width:16vh;
    height: 23vh;
    float: left;
}


.Radar2{
    width: 16vh;
    height: 23vh;
    float: right;
   
}

h1{ 
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: smaller;
    font-stretch:wider;
    height: 30vh;

    
}



.fighter li{       
    font-family:Arial, Helvetica, sans-serif; 
    display:inline;   
    font-size: 7px; 
    
}



.fighter li a{
    color: aliceblue;
    margin-left: 30vh;
}



.grid-container {
    display: grid;
    grid-template-columns: 110px 30px 40px;
    height: 30vh;
   
}


.marquee{
    height: 30vh;
    width: 25vh;   
    overflow: hidden;
   }


.marquee p {

    font-size: large;
    font-weight: 50;
    color: red;
    margin-left: 5vh;
}


.collage{
    height:30vh;
    width:90vh;
    background-image: url("ATC.jpg");
    background-position: center;
    background-repeat:no-repeat;
    background-size: cover;
    transition: 5s;

    animation-name: animate;
    animation-direction: normal;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: ease-in-out;

}

@keyframes animate {
    0%
    {
        background-image: url("ATC.jpg");
    }
    20%
    {
        background-image: url("aircraft photo.jpg");
    }
    40%
    {
        background-image: url("runway.jpg");
    }
    60%
    {
        background-image: url("hangar.jpg");
    }
}




.runway{
    height:4vh;
    width: 100%;    
    color:white;
    background-color: rgb(0, 76, 255);
    border: 2px solid rgb(0, 76, 255);
    position:fixed;
    
}

}















































































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



.wrapper-main{
        width: 100%;
}




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

}

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



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



h1{
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    border: 2px solid rgb(0, 76, 255);
    background-color: rgb(0, 76, 255);
    height: 10vh;
    width: 100%;
    text-align: center;
    font-size: 80px;
    font-stretch:wider;
     
}

.fighter li{    
    font-size: 15px;
    font-family:Arial, Helvetica, sans-serif; 
    display:inline-block;
    
   
    
    
}

nav li a{
    color: aliceblue;
    padding-left: 38vh;
}


.grid-container {
    display: grid;
    grid-template-columns: 400px 50px auto;
    height: 75vh;
}

.marquee{
    height: 75vh;   
    overflow: hidden;
    position: relative;

}


marquee p{
    font-size: large;
    font-weight: 60;
    color: red;
    padding-left: 10vh;
    
}
   
   
.collage{
    height:75vh;
    width:100vh;
    background-image: url("ATC.jpg");
    background-position: center;
    background-repeat:no-repeat;
    background-size: cover;
    transition: 5s;

    animation-name: animate;
    animation-direction: normal;
    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: ease-in-out;

}

@keyframes animate {
    0%
    {
        background-image: url("ATC.jpg");
    }
    20%
    {
        background-image: url("aircraft photo.jpg");
    }
    40%
    {
        background-image: url("runway.jpg");
    }
    60%
    {
        background-image: url("hangar.jpg");
    }
}

.runway{
    height:6vh;
    width: 100%;
    color:white;
    background-color: rgb(0, 76, 255);
    border: 2px solid rgb(0, 76, 255);
    position:relative;

    
}




}