body {
	font-family: 'Permanent Marker', cursive;
	margin: 0;
	background: peru;
	
}

#page {
	max-width:1200px;
	margin-left:auto;
	margin-right: auto;
}

#burger {
	display:none;
}

nav {
	font-size: 2rem;
	background: #123;
	color: #fa0;
	padding: 0 1rem;
}
nav a {
	margin-right: 2rem;
}

.logo {
	background-image: url(bullsandcowslogo.png);
	background-size: contain;
	width: 64px;
	display: inline-block;
	background-repeat: no-repeat;
}

#scoredata {
	display:inline;
	font-family: 'Quicksand', 'Arial', san-serif;
	font-size: 1rem;
	float: right;
}

p {
	font-family: 'Quicksand', 'Arial', san-serif;
}
.clickable {
	 cursor:pointer;
 }
 
.menupopup {
	position: relative;
	 max-width: 100%;
	 display:none;
	 background:#a60;
	 top:0;
	 color: #ff0;
	 font-weight: bold;
	 padding: 1rem;
 }
.popup_close {
	position: absolute;
	top: 1rem;
	left: 90%;
	font-size: 2rem;
}

#message {
	max-height: 4rem;
	overflow: hidden;
}

.guessletter {
	width: 4rem;
	height: 4rem;
	border: 1px solid black;
	display: inline-block;
	margin: 8px;
	font-size: 3rem;
	text-align: center;
	text-shadow: 1px 1px 5px #fff;
}
.guessresult {
	display: inline-block;
	margin-left: 8px;
}
.guessresult div {
	width: 4rem;
	height: 4rem;
	display: inline-block;
	border: 1px solid black;
	display: inline-block;
	margin: 8px;
	font-size: 3rem;
	text-align: center;
	text-shadow: 1px 1px 5px #fff;
}

.notin {
	background-color: #987;
}

.bull {
	background-color: darkgreen;
	background-image: url(bull.png);
	background-size: contain;
}

.cow {
	background-color: yellow;
	background-image: url(cow.png);
	background-size: contain;
}

#endgame_popup {
	box-sizing:  border-box;
	margin:0;
	width: 100vw;
	height: 100vh;
	background-image:url(bull.png);
	background-size:contain;
	background-repeat: no-repeat;
	background-position: 50%;
}
#endgame_popup h2 {
	text-shadow: 2px 2px 10px #123;
	text-align: center;
	font-size: 4rem;
}
#gameresults {
	text-shadow: 2px 2px 10px #123;
	text-align: center;
	font-size: 3rem;
	margin-top: 40vh;
}
#gamedata {
	text-align:center;
	font-size: 2rem;
	text-shadow: 1px 1px 5px #123;
}

#debug-window {
	border-top: 1px solid #123;
	margin-top: 1rem;
}
#debuginfo {
	display: none;
}
#debuginfo, #debuginfo p, #debug-window, #debug-window p {
	font-family: courier;
}

.twist {
	animation-name: twist;
	animation-duration: 1s;
}

@keyframes twist {
	0% {
		transform: rotateZ(0);
	}
	100% {
		transform: rotateZ(360deg);
	}

}

.winner {
	display: block;
	animation-name: winner;
	animation-duration: 3s;
	animation-timing-function: ease-out;
}

@keyframes winner {
	0% {
		transform: rotateZ(0);
	}
	100% {
		transform: rotateZ(720deg);
	}

}


@media (max-width:720px) {
	#page {
		width: 100%;
	}
	nav .logo, nav a {
		display:none;
	}
	#burger {
		display:block;
	}
	#message {
		max-height: 4rem;
		overflow: hidden;
	}

	.guessletter {
		width: 2rem;
		height: 2rem;

		margin: 2px;
		font-size: 1rem;
		text-align: center;
		text-shadow: 1px 1px 5px #fff;
	}
	.guessresult {
		margin-left: 8px;
	}
	.guessresult div {
		width: 1rem;
		height: 1rem;

		margin: 2px;
		font-size:1rem;

	}
	#scoredata  {
		position: absolute;
		top: 0;
		right:0;
	}
	#scoredata div {
		display:inline;
	}
}
@media (max-width:420px) {

}