@font-face {
	font-family: "Quantico";
	src: url("fonts/quantico-v15-latin-regular.woff2") format("woff2"),
		url("fonts/quantico-v15-latin-regular.woff") format("woff");
}

* {
	box-sizing: border-box;
	overflow: hidden;
	margin: 0;
}

p {
	padding-bottom: 0.3em;
}

h5 {
	padding-top: 0.5em;
}

.game {
	background-color: #1E1E1E;
	float: right;
}

/* Allows the sidebar to scroll without moving the game */
.sidebar {
	position: absolute;
	bottom: 0;
	top: 0;
	overflow: auto;
	width: 19em;
}

/* All non-debug text */
.content {
	font-family: "Quantico", sans-serif;
	font-weight: normal;
	text-align: center;
	padding: 5%;
}

/* For the clickable thumbnail images */
.thumb {
	box-shadow: 0 0 0 0;
	transition: box-shadow 100ms linear;
	margin: 5% 5% 3%;
	width: 40%;
}

/* A thumbnail image becomes selected when it is clicked */
.selected {
	box-shadow: 0 0 0 0.2em coral;
}

.hidden {
	display: none;
}

/* For debug text */
.info {
	padding-left: 3em;
	font-family: monospace;
	white-space: pre;
}

/* Allows for the heart icon to be both a thumbnail image and small */
.icon {
	float: left;
	width: 20%;
}

/* Used for the links on either side of the icon */
.footer {
	font-size: 0.7em;
	color: gray;
	position: relative;
	top: 0.5em;
	float: left;
	width: 40%;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.symbols {
	width: 100%;
}

.notice {
	display: none;
}

/* If the screen is not wide enough the game is not displayed and a message is
shown to the user */
@media only screen and (max-width: 36em) {

	.game {
		display: none;
	}

	.notice {
		display: block;
	}

}