html {
	background-color: #f5c9c6;
	font-size: 2vw;
}


body {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: minmax(100px,auto);
	grid-gap: 10px;
}

.title {
	background-color: seagreen;
	animation: RotateShadow 1s linear infinite;
	text-align: center;
	font-size: 310%;
	grid-column: 1 / 6;
	grid-row: 1/3;
}

.main {
	background-color: #faeceb;/*少し薄い赤*/
	font-size: 100%;
	grid-column: 2 / 5;
	grid-row: 3/40;
}



.leftside {
	background-color: #e74676; /*割と濃い赤*/
	font-size: 100%;
	grid-column: 1;
	grid-row: 3/40;
}

.rightside {
	background-color: #ef8fa7; /*少し濃い赤*/
	font-size: 100%;
	grid-column: 5;
	grid-row: 3/40;
}

.under {
	color: #f5c9c6;
	background-color: #514050; /*地の底の赤*/
	font-size: 100%;
	grid-column: 1/6;
	grid-row: 40/50;
}



@keyframes RotateShadow {
	0% {
		text-shadow: 2px 2px 2px black;
	}

	25% {
		text-shadow: 2px 2px 5px black;
	}
	50% {
		text-shadow: 4px 4px 5px black;
	}
	75% {
		text-shadow: -5px -5px 1px black;
	}
	100% {
		text-shadow: 2px 2px 2px black;
	}
}








.wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 100px 100px;
	grid-gap: 10px;
}

.box1 {
	background-color: yellowgreen;
	grid-column: 2 / 4;
	grid-row: 1;
	font-size: 100%;
}

.box2 {
	background-color: palevioletred;
	grid-column: 1;
	grid-row: 1 / 10;
}

.box3 {
	background-color: firebrick;
	grid-column: 3;
	grid-row: 2/50;
}



.gamesWrapper {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: minmax(100px,auto);
	grid-gap: 10px;
}


.gameTitleBox {
	background-color: aquamarine;
}

img.gameTitleBox {
	height: 100%;
	width: 100%;
	object-fit: scale-down;
}

.gameExplainBox {
	background-color: aquamarine;
	font-size: 70%;

}





.changeImageContainer {
	display: grid;
	grid-template-columns: repeat(5, 2fr);
	grid-template-rows: auto;
	grid-gap: 20px;
}

.CICLeftbox {
	text-align: center;
	background-color: aqua;
	grid-row: 3;
	grid-column: 1;
}

.CICRightbox {
	text-align: center;
	background-color: peru;
	grid-row: 3;
	grid-column: 5;
}

.CICCenterTextbox {
	text-align: center;
	background-color: white;
	grid-row: 1;
	grid-column: 2/5;
}

.CICCenterImagebox {
	text-align: center;
	background-color: white;
	grid-row: 2/6;
	grid-column: 2/5;
}


img.CICCenterImagebox {
	width: 100%;
	height: 100%;
	animation: HueRotate 1s linear infinite;
	object-fit: scale-down;
}

h1{
	color:aqua
}



img.box1 {
	height: 50%;
	width: 50%;
	object-fit: scale-down;
}

img.box2 {
	height: 100%;
	width: 100%;
	object-fit: scale-down;
}

img.box3 {
	height: 100%;
	width: 100%;
	object-fit: scale-down;
}



@keyframes HueRotate {
	from {
		filter: hue-rotate();
	}

	to {
		filter: hue-rotate(360deg);
	}
}


.artWorksContainer {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(20, 1fr);
	grid-gap: 5px;
}

.artWorkBlock {
	background-color: whitesmoke;
	transition-duration: 1s;
}

img.artWorkBlock {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
}

.artWorkBlock img:hover {
	/*transform: scale(2,2) rotate(1turn);*/
	animation: artAnimation 1s ease 0s forwards;
}

@keyframes artAnimation {
	0% {
		transform: scale(1,1);
		
	}

	25% {
		transform: scale(1.25) rotate(360deg);
		background: #ff6a00;
	}

	100% {
		transform: scale(2,2) rotate(360deg);
	}
}



.miniquizWrapper {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(50px,auto);
	padding: 5px;
	grid-gap: 5px;
	background-color: #e3cdcc;
}

.buttonBox {
	font-size: 71%;
	background-color: #fad0fa;

}

.oneminiquizBOX {
	background-color: #f1cac9;
}