div#content {
	display: flex;
}

div#gamepanel {
	width: 60%;
}

div#controlpanel {
	width: 40%;
}

div.gamestage {
	height: 400px;
	margin: 50px auto 0;
	font-size: 15px;
	min-width: 400px;
}

div.question, div.answer, div.extraanswer {
	background-color: #2794cc;
	border-radius: 8px;
	font-family: "Nunito";
	font-size: 36px;
	color: #D7D7D7;
	margin-bottom: 40px;
	height: 120px;
	line-height: 120px;
	width: 400px;
	text-align: center;
}

div.question, div.answer, div.extraanswer {
	margin: 20px 0;
}

div.question span.out, div.answer span.out, div.extraanswer span.out {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}

div.answer span.out span, div.extraanswer span.out span {
	font-style: italic;
	font-size: 18px;
	display: block;
}

div#score span.out:first-child {
	color: #00cc99;
	font-family: "Lobster", Ariel, sans-serif;
	font-size: 35px;
	display: block;
	text-align: center
}

div#score span.out:first-child span.winnings {
	color: #339900;
	font-family: "Nova Flat", Ariel, sans-serif;
	font-size: 30px;
}

div#score span.out:nth-child(2) {
	color: #af0000;
	font-family: "Nova Flat", Ariel, sans-serif;
	font-size: 40px;
	display: block;
	text-align: center
}

div#congrats1 {
	color: #019ad2;
	font-family: "Patua One", Ariel, sans-serif;
	font-size: 35px;
	text-align: center;
	width: 600px;
}

div#congrats1 div {
	padding: 3px;
}

div#congrats2 {
	color: #d2d24d;
	font-family: "Jolly Lodger", Ariel, sans-serif;
	font-size: 35px;
	text-align: center;
	width: 100px;
}

div#langButtons {
	margin: auto;
	text-align: center;
}

div.typeSelector, div.bookSelector, div#quiztypeSelector {
	margin: 20px 0;
	text-align: center;
}

div#quiztypeSelector div {
	display: inline-block;
	margin: 0 2px;
}

div#quiztypeSelector div.active span {
	color: red;
}

div.lang {
	color: #3866a3;
	font-family: Lobster, sans-serif;
	font-size: 42px;
	margin: 30px 0;
	text-align: center;
	text-transform: capitalize;
}

div.lang.german {
	color: #528009;
}

div.lang.italian {
	color: #ffaa22;
}

div.lang.polish {
	color: #a511c0;
}

div.lang.spanish {
	color: #e4685d;
}

button {
	box-shadow:inset 0px 1px 0px 0px #bee2f9;
	background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
	background-color:#63b8ee;
	border-radius:6px;
	border:1px solid #3866a3;
	display:inline-block;
	cursor:pointer;
	color:#14396a;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	margin-right: 6px;
	text-decoration:none;
	text-shadow:0px 1px 0px #7cacde;
}
button:hover {
	background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
	background-color:#468ccf;
}
button:active:enabled {
	position:relative;
	top:1px;
}
button:disabled {
	background:linear-gradient(to bottom, #83c8aa 5%, #66a49f 100%);
}

button.startbutton {
	display: block;
	margin: 20px auto;
	padding:6px 40px;
}

button.langChoice {
	margin-right: 8px;
	margin-bottom: 8px;
}

button.langChoice:nth-child(2) {
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
	background-color:#33bdef;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
}

button.langChoice:nth-child(2):hover {
	background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
	background-color:#019ad2;
}

button.langChoice:nth-child(3) {
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	background-color:#89c403;
	border-radius:6px;
	border:1px solid #74b807;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
}

button.langChoice:nth-child(3):hover {
	background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	background-color:#77a809;
}

button.langChoice:nth-child(4) {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}

button.langChoice:nth-child(4):hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}

button.langChoice:nth-child(5) {
	box-shadow:inset 0px 1px 0px 0px #e184f3;
	background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
	background-color:#c123de;
	border-radius:6px;
	border:1px solid #a511c0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b14b3;
}

button.langChoice:nth-child(5):hover {
	background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
	background-color:#a20dbd;
}

button.langChoice:nth-child(6) {
	box-shadow:inset 0px 1px 0px 0px #f7c5c0;
	background:linear-gradient(to bottom, #fc8d83 5%, #e4685d 100%);
	background-color:#fc8d83;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
}

button.langChoice:nth-child(6):hover {
	background:linear-gradient(to bottom, #e4685d 5%, #fc8d83 100%);
	background-color:#e4685d;
}

button.replay {
	display: inline-block;
	margin: 20px 80px;
	width: 140px;
}

button.startbutton::first-letter, button.replay::first-letter {
	text-decoration: underline;
}

div#wrongletters div.letter {
	box-shadow: 4px 5px 0px 0px #CF6870;
	background:linear-gradient(to bottom, #A6373F 5%, #7C151D 100%);
	background-color:#A6373F;
	border-radius:15px;
	display:inline-block;
	color:#ffffff;
	font-family:"Comfortaa";
	font-size:25px;
	font-weight: bolder;
	padding: 7px 0px;
	margin-right: 8px;
	text-align: center;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
	height: 48px;
	width: 52px;
}

div#wrongletters div.letter.highlight {
	box-shadow: 4px 5px 0px 0px #E89849;
	background:linear-gradient(to bottom, #D87A1D 5%, #AC5C0D 100%);
	background-color:#D87A1D;
}
	
.prettyRadio {
  position: relative;
  display: block;
}
.prettyRadio label {
  display: block;
  background: #fee8c3;
  color: #444;
  border-radius: 5px;
  padding: 10px 20px;
  border: 2px solid #fdd591;
  margin-bottom: 5px;
  cursor: pointer;
}
.prettyRadio label:after, .prettyRadio label:before {
  content: "";
  position: absolute;
  right: 11px;
  top: 11px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: #fdcb77;
}
.prettyRadio label:before {
  background: transparent;
  transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
  z-index: 2;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 13px;
  background-position: center;
  width: 0;
  height: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
}
.prettyRadio input[type="radio"] {
  display: none;
  position: absolute;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.prettyRadio input[type="radio"]:checked + label {
  background: #fdcb77;
	animation-name: prettyRadioBlink;
	animation-duration: 1s;
  border-color: #fcae2c;
}
.prettyRadio input[type="radio"]:checked + label:after {
  background: #fcae2c;
}
.prettyRadio input[type="radio"]:checked + label:before {
  width: 20px;
  height: 20px;
}

@keyframes prettyRadioBlink {
  0% {
    background-color: #fdcb77;
  }
  10% {
    background-color: #fdcb77;
  }
  11% {
    background-color: #fdd591;
  }
  29% {
    background-color: #fdd591;
  }
  30% {
    background-color: #fdcb77;
  }
  50% {
    background-color: #fdd591;
  }
  45% {
    background-color: #fdcb77;
  }
  50% {
    background-color: #fdd591;
  }
  100% {
    background-color: #fdcb77;
  }
}

#controlpanel
{
	background: #e6e5dd;
	border-radius: 20px;
	font-family: Roboto, sans-serif;
	padding:15px;
}

#controlpanel h1
{
	font-family: Montserrat, sans serif;
	font-size: 20px;
	font-weight: normal;
	color:#333012;
	margin-top: 0;
	text-align: center;
}

#controlpanel div#panelmenu div
{
	width: 80px;
	float: left;
	padding: 5px;
	text-align: center;
	cursor: pointer;
}

#controlpanel div#panelmenu div:hover
{
	background-color: #ffffcc;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	cursor: pointer;
}

#controlpanel div#panelmenu div.selected
{
	background:#F2EDC2;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	cursor: default;
}

.helppanel
{
	background:#F2EDC2;
	clear: both;
	color:#333012;
	padding: 7px;
	min-height: 800px;
	text-align: left;
}
#controlpanel .helppanel h1
{
	font-family: Montserrat, sans serif;
	font-size: 16px;
	font-weight: bold;
	color: #333012;
	margin: 8px 0;
	text-align: center;
}
.helppanel h3
{
	cursor: pointer;
	font-family: Montserrat, sans serif;
	font-size: 15px;
	font-weight: bold;
	color: #333012;
	margin: 8px 0 4px 0;
}
.helppanel h3:first-child
{
	margin-top: 0;
}
.helppanel h3.closed
{
	color: #9c9a88;
}
.helppanel ol
{
	margin-top: 20px;
}
.helppanel ol li
{
	margin: 12px 20px 12px 5px;
}
.helppanel table
{
	font-family: Roboto;
	font-size: 12px;
	width: 100%;
}
.helppanel th
{
	text-align: center;
}
.helppanel table tr:nth-child(odd)
{
	background: #f6fadc;
}
.helppanel table tr:nth-child(even)
{
	background: #f8e0b6;
}
.helppanel table tr td
{
	padding: 2px;
}
.helppanel table em
{
	color: green;
	font-weight: bold;
}

@media (max-width: 1366px) 
{
	div#gamepanel 
	{
		width: 65%;
	}
	#controlpanel div#panelmenu div 
	{
		font-size: 12px;
		width: 70px;
	}
}