body {
	padding: 20px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1em;
	animation-fill-mode: forwards;
}

.wrapper {
	width: 100%;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
	grid-gap: 10px;
	text-align: center;
}

.box {
	background-color: royalblue;
	color: azure;
	padding: 20px 0;
	border-radius: 5px;
}

/* link style */
a {
	color: lightgreen;
}

@keyframes boxHoverTransit{
	from{background: royalblue;}
	to{background: darkblue;}
}

@keyframes linkHoverTransit{
	from{}
	to{color: darkgreen;}
}

.wrapper :hover {
	/* animation: name duration timing-function delay iteration-count direction; */
	/* animation: boxHoverTransit 1s ease-in-out 0 1 alternate; */
	animation: boxHoverTransit 1s;
	animation-fill-mode: forwards;
	/* background: darkblue; */
}

a :hover{
	animation: linkHoverTransit 1s;
	animation-fill-mode: forwards;
	/* color: darkgreen; */
}

a :visited {
	
}

.title{
	grid-column: 1/7;
	grid-row: 1;
	background-color: darkslateblue;
}

.menu{
	background-color: darkblue;
}

.cross{
	grid-column: 2/6;
}