html{
	font-family: helvetica;
}

body{
	text-align: center;
	margin: 0px;
}

svg{
	fill: currentColor;
}

#river{
	width: 50%;
	display: inline-block;

}

#foundArea{
	width: 18%;
	position: fixed;
	top: 0px;
	right: 0px;

}

#clock{
	width: 18%;
	position: fixed;
	top: 0px;
	left: 0px;

}

#messageArea{
	color: #1E90FF;
}

.set-card{
	border: solid 2px #333;
	border-radius: 5%;
	display: inline-block;
	width: 31.5%;
	margin-left: 1%;
	margin-bottom: 20px;
	text-align: center;
	height: 200px;
	cursor: pointer;
}

#foundArea .set-card{
	margin-bottom: 5px;
	height: 50px;
	width: 30.5%;
}

#foundArea .set-card .shape{
	font-size: 30px;
	font-weight: bold;
	display: inline-block;
	margin: 0px auto;
}

.set-card.selected{
	border: solid 3px #1E90FF;
}

.set-card p{
	margin-top: 5px;
}

.shape{
	font-size: 140px;
	font-weight: bold;
	display: inline-block;
	margin: 0px auto;
	cursor: pointer;
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

.set-card.red{
	border: solid 3px #F44336;
}

.set-card.green{
	border: solid 3px #4CAF50;
}

@media only screen and (max-width: 1815px) {
	.shape{
		font-size: 88px;
	}
}

@media only screen and (max-width: 1694px) {
	.shape{
		font-size: 86px;
	}
}

@media only screen and (max-width: 1650px) {
	.shape{
		font-size: 76px;
	}
}

@media only screen and (max-width: 1456px) {
	.shape{
		font-size: 73px;
	}
}

@media only screen and (max-width: 1340px) {
	#river{
		width: 75%;
	}
}

@media only screen and (max-width: 1000px) {
	#river{
		width: 100%;
	}

	#foundArea{
		position: fixed;
		bottom: 0px;
		top: auto;
		width: 40%;
	}

	#foundArea .set-card{
		width: 30%;
	}

	#foundArea .shape{
		font-size: 50%;
	}

	#clock{
		position: fixed;
		bottom: 0px;
		top: auto;
	}
}

@media only screen and (max-width: 685px){
	.shape{
		font-size: 90px;
	}
}