@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


header {
	
	display: grid;
	grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
	grid-template-rows: 33.33% 33.33% 33.33%;
	
	height: 120px;
	width: 100%;
	
	background-color: #bee5fb;
	
	margin-left: auto;
	margin-right: auto;
	max-width: 2150px;


		
}


h1 {
	
	grid-column: 1/3;
	grid-row: 1/4;
	
	font-size: 23px;
	font-family: 'Roboto', sans-serif;
	
	margin-top: 0.2%;
	margin-left: 1%;
	text-align: left;
	
}

#subtitle {
    grid-column: 5/7;
    grid-row: 1;
    
    font-size: 23px;
	font-family: 'Roboto', sans-serif;
	
	margin-top: 0.2%;

	text-align: center;
}


#main_navigation {
	
	grid-column: 1/11;
	grid-row: 3;
	
	background-color: #7FCCF7;
	
	text-align: center;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	
}


#main_navigation ul{
	
	height: 100%;
	width: 100%;

	
}


#main_navigation ul li{
	
	display: inline-block;
	
	margin-left: 4%;
	margin-right: 4%;
	margin-top: 0.6%;
	
	
}

#main_navigation ul li:hover a{
	color: white;
	
	
	
}


#main_navigation ul li a{
	
	color: #414141;
	text-decoration: none;
	
	
}


@media screen and (max-width: 1564px) {
	
	#main_navigation ul li{

		margin-left: 2%;
		margin-right: 2%;
	
	
	}
	
}

@media screen and (max-width: 1376px) {
    #main_navigation ul li {
        margin-top: 0.9%;
    }
    
    h1 {
        font-size: 20px;
    }
    #subtitle {
        font-size: 20px;
    }
}

@media screen and (max-width: 1069px) {
	
	#main_navigation{
		
		font-size: 14px;


	
	
	}
	
	#main_navigation ul li{

		margin-left: 1%;
		margin-right: 1%;
		margin-top: 0.7%;
	
	
	}
	
}


@media screen and (max-width: 809px) {
	
	header {
		height: 110px;
		
	}
	
	h1 {
		grid-column: 1/11;
		grid-row: 2/4;
		text-align: center;
		font-size: 20px;
		
	}
	
	#subtitle {
        grid-column: 1/11;
        grid-row: 1;
        
        font-size: 23px;
    	font-family: 'Roboto', sans-serif;
    	
    	margin-top: 0%;
    
    	text-align: center;
    }
	
	#main_navigation{
		
		display: none;


	
	
	}
	
	
}