.square{
	width: var(--block-width);
	height: var(--block-height);
	border: 1px solid var(--tertiary-color);
	background-color: var(--primary-color);
	position: absolute;
	visibility: hidden;
	text-align: center;
	overflow: hidden;
	opacity: .9;
	box-shadow: 0 0 5px var(--secondary-color);
	
	-webkit-transition: left .5s, top .5s, width .3s, height .3s, opacity .3s, border .3s; /* Safari */
    transition: left .5s, top .5s, width .3s, height .3s, opacity .3s, border .3s;
	
	/* text */
	color: var(--secondary-color);
	font-size: 20px;
	user-select: none;
	font-family: cursive;
}

.square:hover{
	opacity: .95;
}

.square[difficulty="0"]{
	background: linear-gradient(var(--green), var(--green-dim));
}

.square[difficulty="1"]{
	background: linear-gradient(var(--yellow), var(--yellow-dim));
}

.square[difficulty="2"]{
	background: linear-gradient(var(--red), var(--red-dim));
}

/* These rules need to specify difficulty, so that they overrise the square difficulty rules. */
.squareFocus[difficulty="0"]{
	/* Transparent, colored texture. */
	background: linear-gradient(var(--primary-color-dim), var(--primary-color-dimmer));
}

.squareFocus[difficulty="1"]{
	/* Transparent, colored texture. */
	background: linear-gradient(var(--primary-color-dim), var(--primary-color-dimmer));
}

.squareFocus[difficulty="2"]{
	/* Transparent, colored texture. */
	background: linear-gradient(var(--primary-color-dim), var(--primary-color-dimmer));
}

.squareFocus{
	
	/* This should never be triggered; squares should always be of a difficulty. */
	border: 1px solid var(--tertiary-color);
	
	width: var(--block-width-focus);
	height: var(--block-height-focus);
	z-index: 1;
	opacity: .9;
}

.squareFocus[difficulty="0"]{
	border: 2px solid var(--green);
}

.squareFocus[difficulty="1"]{
	border: 2px solid var(--yellow);
}

.squareFocus[difficulty="2"]{
	border: 2px solid var(--red);
}

.square[response="0"]{
	background: linear-gradient(var(--deep-red), var(--deep-red-dim));
	border: 2px solid var(--deep-red);
}

.square[response="1"]{
	background: linear-gradient(var(--deep-green), var(--deep-green-dim));
	border: 2px solid var(--deep-green);
}

.selectableSquare{
	cursor: pointer;
}

.selectableSquare:hover{
	border: 2px solid var(--secondary-color);
}

.square[infected="true"]{
	box-shadow: 0 0 7px var(--red);
	background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .8));
	border: 2px solid #000;
}