/*** set color variables ***/
:root {
	--white:#f6f2f2;
	--navyblue:#061642;
	--dandelion:#cb942e;
	--mutedblue:#385177;
	--lightpurple:#64529b;
	--grey:#3f5a82;
	--darkgrey:#8a8a8b;
	--light:#d9d9d9;
}

/*** global settings ***/
body {
	margin:0;
	font-family: "Inter", sans serif;
	
}
img {
	width:100%
}	

/*** header settings ***/
#logo-image{
		width:400px;
}

header{
	padding:50px;	
}
	
nav ul li a{
	list-style: none;
	margin-bottom:50px;
	
}

navul li a:link, nav ul li a:visited{
	color:#ffffff;
	font-size:20px;
	text-transform: uppercase;
	text-decoration:none;
	border-radius:10px;
}

nav ul li a:hover{
	background-color:#385177;
}

nav ul li a:active{
	background-color:#000;
	color:#061642;
}



/*** footer settings ***/

footer{
	background-color:#061642;
	padding:30px;
	font-family: "Inter", sans serif;
	font-size:12px;
}

@media (min-width: 360px) {
  .header {grid-area: 2 / span 6;}
  .menu {grid-area: 2 / span 4;}
  .content {grid-area: 1 / span 2;}
  .lessons {grid-area: 1 / span 2;}
  .contact {grid-area: 2 / span 1;}
  .footer {grid-area: 1 / span 6;}
}