@media (prefers-color-scheme: light) {

	body {
		background-color: #FFFFFF;
		color: #000000;
	}

	div.activemode {
		width: 100px;
		text-align: center;
		font-size: 16px;
		font-family: Arial, sans-serif;
		padding: 10px;
		border: 1px solid #000000;
		border-radius: 4px;
		float:left;
		background-color: #AAAAEE;
		margin: auto;
	}

	div.inactivemode {
		width: 100px;
		text-align: center;
		font-size: 16px;
		font-family: Arial, sans-serif;
		padding: 10px;
		border: 1px solid #000000;
		border-radius: 4px;
		float:left;
		background-color: #F0F0F0;
		margin: auto;
	}

	div.help {
		height: 60px;
		width: 60px;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 970;
		background-image: url('graphics/help.png');
		background-size: 60px;
		cursor: pointer;
	}

	div.settings {
		height: 60px;
		width: 60px;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 970;
		background-image: url('graphics/settings.png');
		background-size: 60px;
		cursor: pointer;
	}

	div.stats {
		height: 60px;
		width: 60px;
		position: fixed;
		right: 60px;
		top: 0;
		z-index: 970;
		background-image: url('graphics/stats.png');
		background-size: 60px;
		cursor: pointer;
	}

	div.statsection {
		height: 52px;
		width: 90%;
		margin: auto;
	}

	div.copystatbox {
		float:left;
		z-index: 1000;
		height: 50px;
		width: 15%;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		font-family: Arial, sans-serif;
	    border: 1px solid black;
	    margin-left: 1%;
		border-radius: 4px;
		cursor: pointer;
	}

	div.statbox {
		float:left;
		z-index: 1000;
		height: 50px;
		width: 15%;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		font-family: Arial, sans-serif;
	    border: 1px solid black;
	    margin-left: 1%;
		border-radius: 4px;
	}

	div.top_menu {
    	height: 60px;
	    position: fixed;
    	top: 0;
	    left: 0;
    	z-index: 960;
	    width: 100%;
    	background-color: #FFFFFF;
	    border-bottom: 1px solid black;
    }
    
    div.closescreen {
		position: absolute;
		background-color: #F0F0F0;
		z-index: 1000;
		height: 50px;
		width: 50px;
		top: 0;
		right: 0;
		margin: 3.75px;
		font-size: 50px;
		font-family: Arial, sans-serif;
		border: 1px solid #000000;
		text-align: center;
		cursor: pointer;
    }
	div.infotext {
		top: 100px;
		position: relative;
		background-color: #F0F0F0;
		padding-top: 40px;
		width: 100%;
		touch-action: manipulation;
	}
    
	div.endscreen {
		position: fixed;
		background-color: #F0F0F0;
		z-index: 999;
		width: 60%;
		height: 80%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		touch-action: manipulation;
	}

	div.letter {
		height: 60px;
		width: 60px;
		background-color: #EEEEEE;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
    	-webkit-touch-callout: none;
	    -webkit-user-select: none;
    	-khtml-user-select: none;
	    -moz-user-select: none;
    	-ms-user-select: none;
	    -o-user-select: none;
    	user-select: none;
    	touch-action: manipulation;
	}

	div.letter-unused {
		animation: 0.2s ease-out 0s 1 revealLetters;
		height: 60px;
		width: 60px;
		background-color: #888888;
		color: #EEEEEE;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
    	-webkit-touch-callout: none;
	    -webkit-user-select: none;
    	-khtml-user-select: none;
	    -moz-user-select: none;
    	-ms-user-select: none;
	    -o-user-select: none;
    	user-select: none;
    	touch-action: manipulation;
	}

	div.letter-error {
/*		animation: 0.1s ease-out 0s 3 shakeLetters; */
		height: 60px;
		width: 60px;
		background-color: #EEEEEE;
		color: #EE2222;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
	    touch-action: manipulation;
	}

	div.letter-correct {
		animation: 0.2s ease-out 0s 1 revealLetters;
		height: 60px;
		width: 60px;
		background-color: #22AA22;
		color: #EEEEEE;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
	    touch-action: manipulation;
	}

	div.letter-position {
		animation: 0.2s ease-out 0s 1 revealLetters;
		height: 60px;
		width: 60px;
		background-color: #FFC000;
		color: #EEEEEE;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
	    touch-action: manipulation;
	}

	div.keyStandard {
		height: 70px;
		width: 70px;
		background-color: #EEEEEE;
		margin: 4.375px;
		font-size: 63px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
    	-webkit-touch-callout: none;
	    -webkit-user-select: none;
    	-khtml-user-select: none;
	    -moz-user-select: none;
    	-ms-user-select: none;
	    -o-user-select: none;
    	user-select: none;
	    touch-action: manipulation;
	    cursor: pointer;
	}

	div.keyLarge {
		height: 70px;
		width: 105px;
		background-color: #EEEEEE;
		margin: 4.375px;
		font-size: 31.5px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
		line-height: 70px;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
    	touch-action: manipulation;
    	cursor: pointer;
	}

	div.keyStartR2 {
		height: 70px;
		width: 70px;
		background-color: #EEEEEE;
		margin: 4.375px;
		margin-left: 39.375px; 
		font-size: 63px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
    	touch-action: manipulation;
    	cursor: pointer;
	}

	div.keyEndR2 {
		height: 70px;
		width: 70px;
		background-color: #EEEEEE;
		margin: 4.375px;
		margin-right: 39.375px; 
		font-size: 63px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
    	touch-action: manipulation;
    	cursor: pointer;
	}


	div.statsdetail {
		line-height:46px;
		height:46px;
		width:40px;
		color:#000000;
		margin-left: 30px;
		border-right: 5px solid black;
		font-size: 32px;
		font-family: Arial, sans-serif;
		text-align: center;
		float:left;
	}

	div.statsline {
		line-height:40px;
		height:40px;
		background-color:#22AA22;
		color:#F0F0F0;
		margin-top:3px;
		margin-bottom:3px;
		text-indent: 40px;
		font-size: 32px;
		font-family: Arial, sans-serif;
		float:left;
	}

	div.statsline-grey {
		line-height:40px;
		height:40px;
		background-color:#888888;
		color:#F0F0F0;
		margin-top:3px;
		margin-bottom:3px;
		text-indent: 40px;
		font-size: 32px;
		font-family: Arial, sans-serif;
		float:left;
	}

	@keyframes revealLetters {
  	0% {
  		background-color: #F0F0F0;
		transform: scale(1,1);
    	-webkit-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
    	-o-transform: scale(1, 1);  }
	  50% {
  		background-color: #F0F0F0; 
		color: #F0F0F0;
		transform: scale(0,1);
	    -webkit-transform: scale(0, 1);
    	-moz-transform: scale(0, 1);
	    -o-transform: scale(0, 1);  }
	  100% {
  		transform: scale(1,1);
	    -webkit-transform: scale(1, 1);
    	-moz-transform: scale(1, 1);
    	-o-transform: scale(1, 1);  }
	}
}



@media (prefers-color-scheme: dark) {

	body {
		background-color: #000000;
		color: #FFFFFF;
	}

	div.activemode {
		width: 100px;
		text-align: center;
		font-size: 16px;
		font-family: Arial, sans-serif;
		padding: 10px;
		border: 1px solid #FFFFFF;
		border-radius: 4px;
		float:left;
		background-color: #EEEEAA;
		margin: auto;
	}

	div.inactivemode {
		width: 100px;
		text-align: center;
		font-size: 16px;
		font-family: Arial, sans-serif;
		padding: 10px;
		border: 1px solid #FFFFFF;
		border-radius: 4px;
		float:left;
		background-color: #0A0A0A;
		margin: auto;
	}

	div.help {
		height: 60px;
		width: 60px;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 970;
		background-image: url('graphics/help.png');
		background-size: 60px;
		filter: invert(1);
		cursor: pointer;
	}

	div.settings {
		height: 60px;
		width: 60px;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 970;
		background-image: url('graphics/settings.png');
		background-size: 60px;
		filter: invert(1);
		cursor: pointer;
	}

	div.stats {
		height: 60px;
		width: 60px;
		position: fixed;
		right: 60px;
		top: 0;
		z-index: 970;
		background-image: url('graphics/stats.png');
		background-size: 60px;
		filter: invert(1);
		cursor: pointer;
	}

	div.statsection {
		height: 52px;
		width: 90%;
		margin: auto;
	}

	div.copystatbox {
		float:left;
		z-index: 1000;
		height: 50px;
		width: 15%;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		font-family: Arial, sans-serif;
	    border: 1px solid white;
	    margin-left: 1%;
		border-radius: 4px;
		cursor: pointer;
	}

	div.statbox {
		float:left;
		z-index: 1000;
		height: 50px;
		width: 15%;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		font-family: Arial, sans-serif;
	    border: 1px solid white;
	    margin-left: 1%;
		border-radius: 4px;
	}

	div.top_menu {
    	height: 60px;
	    position: fixed;
    	top: 0;
	    left: 0;
    	z-index: 960;
	    width: 100%;
    	background-color: #000000;
	    border-bottom: 1px solid #FFFFFF;
    }
    
    div.closescreen {
		position: absolute;
		background-color: #0A0A0A;
		z-index: 1000;
		height: 50px;
		width: 50px;
		top: 0;
		right: 0;
		margin: 3.75px;
		font-size: 50px;
		font-family: Arial, sans-serif;
		border: 1px solid #FFFFFF;
		text-align: center;
		cursor: pointer;
    }
	
	div.infotext {
		top: 100px;
		position: relative;
		background-color: #0A0A0A;
		width: 100%;
		padding-top: 40px;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		touch-action: manipulation;
	}
	div.endscreen {
		position: fixed;
		background-color: #0A0A0A;
		z-index: 999;
		width: 60%;
		height: 80%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		touch-action: manipulation;
	}

	div.letter {
		height: 60px;
		width: 60px;
		background-color: #111111;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
    	-webkit-touch-callout: none;
	    -webkit-user-select: none;
    	-khtml-user-select: none;
	    -moz-user-select: none;
    	-ms-user-select: none;
	    -o-user-select: none;
    	user-select: none;
    	touch-action: manipulation;
	}

	div.letter-unused {
		animation: 0.2s ease-out 0s 1 revealLetters;
		height: 60px;
		width: 60px;
		background-color: #777777;
		color: #EEEEEE;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
    	-webkit-touch-callout: none;
	    -webkit-user-select: none;
    	-khtml-user-select: none;
	    -moz-user-select: none;
    	-ms-user-select: none;
	    -o-user-select: none;
    	user-select: none;
    	touch-action: manipulation;
	}

	div.letter-error {
/*		animation: 0.1s ease-out 0s 3 shakeLetters; */
		height: 60px;
		width: 60px;
		background-color: #111111;
		color: #EE2222;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
	    touch-action: manipulation;
	}

	div.letter-correct {
		animation: 0.2s ease-out 0s 1 revealLetters;
		height: 60px;
		width: 60px;
		background-color: #22AA22;
		color: #EEEEEE;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
	    touch-action: manipulation;
	}

	div.letter-position {
		animation: 0.2s ease-out 0s 1 revealLetters;
		height: 60px;
		width: 60px;
		background-color: #FFC000;
		color: #EEEEEE;
		margin: 3.75px;
		font-size: 54px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
	    touch-action: manipulation;
	}

	div.keyStandard {
		height: 70px;
		width: 70px;
		background-color: #111111;
		margin: 4.375px;
		font-size: 63px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
    	-webkit-touch-callout: none;
	    -webkit-user-select: none;
    	-khtml-user-select: none;
	    -moz-user-select: none;
    	-ms-user-select: none;
	    -o-user-select: none;
    	user-select: none;
	    touch-action: manipulation;
	    cursor: pointer;
	}

	div.keyLarge {
		height: 70px;
		width: 105px;
		background-color: #111111;
		margin: 4.375px;
		font-size: 31.5px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
		line-height: 70px;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
    	touch-action: manipulation;
    	cursor: pointer;
	}

	div.keyStartR2 {
		height: 70px;
		width: 70px;
		background-color: #111111;
		margin: 4.375px;
		margin-left: 39.375px; 
		font-size: 63px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
    	touch-action: manipulation;
    	cursor: pointer;
	}

	div.keyEndR2 {
		height: 70px;
		width: 70px;
		background-color: #111111;
		margin: 4.375px;
		margin-right: 39.375px; 
		font-size: 63px;
		font-family: Arial, sans-serif;
		float: left;
		text-align: center;
	    -webkit-touch-callout: none;
    	-webkit-user-select: none;
	    -khtml-user-select: none;
    	-moz-user-select: none;
	    -ms-user-select: none;
    	-o-user-select: none;
	    user-select: none;
    	touch-action: manipulation;
    	cursor: pointer;
	}


	div.statsdetail {
		line-height:46px;
		height:46px;
		width:40px;
		color:#FFFFFF;
		margin-left: 30px;
		border-right:5px solid black;
		font-size: 32px;
		font-family: Arial, sans-serif;
		text-align: center;
		float:left;
	}

	div.statsline {
		line-height:40px;
		height:40px;
		background-color:#22AA22;
		color:#0A0A0A;
		margin-top:3px;
		margin-bottom:3px;
		text-indent: 40px;
		font-size: 32px;
		font-family: Arial, sans-serif;
		float:left;
	}

	div.statsline-grey {
		line-height:40px;
		height:40px;
		background-color:#777777;
		color:#0A0A0A;
		margin-top:3px;
		margin-bottom:3px;
		text-indent: 40px;
		font-size: 32px;
		font-family: Arial, sans-serif;
		float:left;
	}

	@keyframes revealLetters {
  	0% {
  		background-color: #0A0A0A;
		transform: scale(1,1);
    	-webkit-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
    	-o-transform: scale(1, 1);  }
	  50% {
  		background-color: #0A0A0A; 
		color: #0A0A0A;
		transform: scale(0,1);
	    -webkit-transform: scale(0, 1);
    	-moz-transform: scale(0, 1);
	    -o-transform: scale(0, 1);  }
	  100% {
  		transform: scale(1,1);
	    -webkit-transform: scale(1, 1);
    	-moz-transform: scale(1, 1);
    	-o-transform: scale(1, 1);  }
	}

}


h1 {
	text-align: center;
	font-size: 36px;
	font-family: Arial, sans-serif;
}

h2 {
	text-align: center;
	font-size: 24px;
	font-family: Arial, sans-serif;
}

p {
	text-align: left;
	font-size: 16px;
	font-family: Arial, sans-serif;
	padding: 10px;	
}

div.reload {
    height: 96px;
    position: relative;
    text-align: center;
    top: 0;
    left: 0;
    z-index: 900;
    width: 50%;
    margin: auto;
}

div.wordlist {
	z-index: 950;
	top: 100px;
	position: relative;
	width: 100%;
	text-align: center;
	display: grid;
	place-items: center;
	margin-left: auto;
	margin-right: auto;
	touch-action: manipulation;
}

div.keyboardlayout {
	z-index: 951;
	width: 100%;
	text-align: center;
	top: 100px;
	position: relative;
	display: grid;
	place-items: center;
	margin-left: auto;
	margin-right: auto;
	touch-action: manipulation;
}

div.word {
	
}

div.statslist {
   position: relative;
   width: 100%;
   display: grid;
   touch-action: manipulation;
}



div.buttoncontainer {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

div.animatekeypress {
	animation: 0.2s ease 0s 1 pressKey;
}
div.animateshakeletters {
	animation: 0.1s ease 0s 3 shakeLetters;
}

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

a.fa {
	font-size: 40px;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
	border-radius: 3px;
}

a.fa-twitter {
	background: #55ACEE;
	color: white;
}

.cookie-consent {
    position: fixed;
    bottom: 8px;
    left: 20px;
    width: 260px;
    padding-top: 7px;
    height: 83px;
    color: #fff;
    line-height: 20px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    background: #292929;
    z-index: 120;
    cursor: pointer;
    border-radius: 3px
}

.allow-button {
    height: 20px;
    width: 104px;
    color: #fff;
    font-size: 12px;
    line-height: 10px;
    border-radius: 3px;
    border: 1px solid green;
    background-color: green;
}


@keyframes shakeLetters {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-10%);
	}
	75% {
		transform: translateX(10%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes pressKey {
  	0% {
		transform: scale(1, 1);
    	-webkit-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
    	-o-transform: scale(1, 1);
    }
  	50% {
		transform: scale(0.8, 0.8);
    	-webkit-transform: scale(0.8, 0.8);
	    -moz-transform: scale(0.8, 0.8);
    	-o-transform: scale(0.8, 0.8);
    }
  	100% {
		transform: scale(1, 1);
    	-webkit-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
    	-o-transform: scale(1, 1);
    }
}