*{ touch-action: none; }

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #c72626;
	color: white;
}

button {
	border: none;
	background-color: black;
	color: #ff2626;
	border-radius: 15px;
	padding: 1rem;
	margin: .5rem;
	box-shadow: 0 4px #444;
	opacity: .9;
	transition: 0.3;
	cursor: pointer;
}

button:active {
	box-shadow: 0 2px #333;
	transform: translateY(2px);
}

button:hover {
	opacity: 1;
}

#mainDisplay {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 85vw;
}

.container {
	display: flex;
	flex-direction: column;
	border-width: 5px;
	border-radius: 20px;
	background-color: black;
	width: 100%;
	height: 100%;
	max-width: 80vw;
	padding: .5rem;
	aspect-ratio: 1/1;
}

.creatureStamps {
	display: flex;
	flex-direction: row;
	min-height: 20vh;
	max-width: 80vw;
	flex-wrap: wrap;
	align-items: center;
}

.creatureStamp {
	display: flex;
	flex-direction: column;
	width: 3rem;
	height: 3rem;
	border-width: .5rem;
	border-radius: 1rem;
	background-color: black;
	margin: 1rem;
	padding: .8rem;
	box-shadow: 0 5px #333;
	transition: .3;
	aspect-ratio: 1/1;
}

.creatureStamp:active {
	box-shadow: 0 2px #333;
	transform: translateY(3px);
}

.cell {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
}

.live {
}

.dead {
	background-color: black;
}

.row {
	display: flex;
	width: 100%;
	height: 100%;
	max-width: 80vw;
	max-height: 80vh;
}

#controls {
	display: flex;
	flex-direction: row;
	margin: 2rem;
}

#palette {
	display: flex;
	flex-direction: row;
}

.paintBrushButton {
	border: solid;
	border-color: black;
	border-width: 3px;
	box-shadow: 0 4px black;
	max-width: 1rem;
	opacity: 0.7;
}

.paintBrushButton:hover {
	opacity: 1;
}

.paintBrushButton:active {
	box-shadow: 0 1px black;
	transform: translateY(2px);
}

#redButton {
	background-color: #c72626;
}

#whiteButton {
	background-color: white;
}

#blueButton {
	background-color: #442CCC;
}

#greenButton {
	background-color: #2CCC64;
}

#yellowButton {
	background-color: #E7C829;
}

.redSpecies {
	background-color: #c72626;
}

.whiteSpecies {
	background-color: white;
}

.blueSpecies {
	background-color: #442CCC;
}

.greenSpecies {
	background-color: #2CCC64;
}

.yellowSpecies {
	background-color: #E7C829;
}

.unselectedStamp {
	opacity: .25;
}

@keyframes colorShift {
	0% {
		box-shadow: inset 0 0 0 1000vmax rgba(0,255,255,0.8);
	}
	25% {
		box-shadow: inset 0 0 0 1000vmax rgba(0,255,150,0.8);	
	}
	50% {
		box-shadow: inset 0 0 0 1000vmax rgba(255,0,255,0.8);
	}
	75% {
		box-shadow: inset 0 0 0 1000vmax rgba(150,0,255,0.8);
	}
	90% {	
		box-shadow: inset 0 0 0 1000vmax rgba(255,255,0,0.8);
	}
	100% {
		box-shadow: inset 0 0 0 1000vmax rgba(0,255,255,8.8);
	}
}

.lasso {
	animation: colorShift 5s infinite;
}