*{
}

body{
	
	background: #efefef; 
	
	font-family: helvetica;

	padding: 0;

	margin: 0;


} 

li{
	list-style: none;
}

ul{

	padding: 0;
}

.container{

	max-width: 1200px;

	margin: auto;
}

header{
	background: black;

	color: white;

	padding: 30px;
}

header h1{
	
	text-align: center;
	
	font-size: 1.2em;

	letter-spacing: 1.4px;


}

header  h2{
	
	text-align: center;
	
	font-size: 0.9em;

	color: #efefef;

	margin-bottom: 20px;
}

header .avatar{
	
	max-width: 250px;

	margin: auto;
}

header .avatar img{
	
	width: 100%;

	border-radius: 15px;

	height: 100%;

	box-shadow: 0px 0px 4px 0px black;
}

header nav{

	margin-bottom: 10px;
}

header nav ul{

	margin: 0;

	display: flex;

	justify-content: space-between;

	align-items: center;

	padding-bottom: 20px;


}

header nav ul li a{

	
	color: white;
    
    font-weight: 600;
    
    text-decoration: none;
    
    text-transform: uppercase;
}

header nav ul li a:hover{
	color: yellow;
}

main{
	border-top: 10px solid #22d4a0;
	
	display: flex;
	
	justify-content: space-around;
	
	align-items: space-around;
	
	background: white;
	
	margin-top: -100px;

	box-shadow: 0px -1px 4px 0px black;

	border-radius: 5px;

	padding: 10rem 50px;

}
main .materias-list {
	width: 40%;

}
main .materias-list h3{

	text-align: center;
	
	padding: 20px 0;


	color: #fff;
	
	border-bottom: 1px solid #efefef;
	margin: 0;

}

.green{
	background: #22d4a0 ;
}

.blue{

 background: #4011d1 ; 
}

main .materias-list ul{
	
	display: flex;
	
	flex-wrap: wrap;

	align-items: center;
	
	border: 2px solid #efefef;

	justify-content: center;
	
	height: 200px;

	margin: 0;
}

main .materias-list ul li{

	margin: 0;

	padding: 10px;

	color: grey;

}


.head-title h1, .head-title h2{
	color:#22d4a0 ;
}
.ok-icon{
	padding-right: 10px;

	color: #22d4a0
}

.on-icon{
	padding-right: 10px;

	color: #4011d1
}
footer{
	font-size: 0.9em;

	text-align: center;

	color: grey;

	padding: 20px;


}