html, body{
	height:100%;
	width:100%;
}

body{
	display:flex;

}






.icon{


	
	margin:auto;
	
	text-align:center;
	color:white;
	font-size:2em;
	font-weight:bold;
	font-family:Arial;
	


	width:200px;
	height:200px;
	background:red;
	transition: background 1s ease, 
				font-size 1s ease,
				border-radius 1s ease,
				transform 0.5s ease,
				border 2s linear 1s,
				width 1s ease,
				height 1s ease;


}



.icon:hover{

	background:blue;
	font-size: 10em;
	border-radius:100%;
	transform:rotate(360deg);
	border: 20px solid black;
	width:300px;
	height:300px;


}









.menu{

	background:black;
	color:white;
	font-family:Arial;
	font-size:3em;
	list-style:none;
	padding:10px;
	
}


.parent{
	max-height:1.2em;
	overflow:hidden;
	
	transition: max-height 0.5s ease,
				color 0.5s ease;
	
}
	



.parent:hover{
	color:gray;
	max-height:800px;

}


.child{
	
	list-style:none;
	background:black;
	color:white;
	font-size:1em;
}

.child:hover{
	color:olive;

}