@font-face {
	font-family: "Murecho";
	src: url("../fonts/Murecho.ttf");
}

body {
	background-color: #FFFFFF;
	color: #533962;
	font-family: "Murecho";
}

.container {
}

header {
	color: #533962;
	text-align: center;
}

.body{
	display: grid;
	grid-template-columns: repeat(auto-fill, 128px);
	grid-gap: 10px;
}

.box {
	display: flex;
	justify-content: center;
	border: solid #533962 1px;
	font-size: 32px;
}

.l1 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-color: #FFFFFF;
}

.l2 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-color: #FDD8D1;
}

.l3 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-color: #F6A2A8;
}

.l4 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-color: #EA8694;
}

.l5 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-color: #D06B80;
}

.l6 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	color: #FFFFFF;
	background-color: #9C5376;
}

.l7 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	color: #FFFFFF;
	background-color: #72446A;
}

.l8 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	color: #FFFFFF;
	background-color: #533962;
}