*{
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}
body{
    font-size: 20px;
  

}
#grid {
    
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "header header header"
        "leftside content content "
        "leftside footer footer ";
        min-height: 100vh;
}
#masthead {grid-area: header;
           background-color: rgb(197, 233, 253);
           display: block;
         
         

        }
#main {grid-area: content;
    color: #545c60;       
    padding-left:10% ;
    padding-top: 40px;
    text-justify: auto;
    
}
#navbar {grid-area : leftside;
        background-color: white;
        }
#footer {grid-area : footer;
        text-align: center;
        padding: 1%;
        background-color: rgb(209, 237, 255);       
        color: #545c60;      

    }
#logo{
    margin :10px;
    margin-right: 10%;   
}

body{
    background-color: rgb(241, 250, 255);
}
.item_nav{
 
   
    color: rgb(0, 26, 50);
    vertical-align:150%;
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-right: 5%;
    padding: 20px;
   

   /* background-color:white;*/
    
    
}
.item_nav:hover{
    background-color:white;
    padding: 20px;
    color: #60b2e3;
}

ul li{
    list-style: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #60b2e3;
    padding-left: 40px;
    padding-top: 10px;
    padding-right: 20px;
}   

ul li ul li a{
    display: block;
    color:#304f63;
    text-decoration: none;
}
ul li ul li a:hover, ul li:hover{
    background-color: #60b2e3 ;
    color: white;
}

ul li ul.dropdown_menu{
    
    display: none;
}

ul li:hover ul.dropdown_menu{
    display: block;
}



@media only screen and (max-width: 1024px) {
    
    #video{
        width: 640px;
        height: 360px;
     
    }

    #masthead{
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 768px) {
    
    #video{
        width: 426px;
        height: 240px
     
    }
   
}


@media only screen and (max-width: 600px) {
    #navbar {
        display: none;

    }
    #video{
        width: 270px;
        height: 200px;
        
    }
    
}