@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Kreon:700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
	margin     : 0px;
	font-family: 'Lato', 'Arial', sans-serif;
}


#wrapper {
	width           : 50%;
	text-align      : center;
	font-family     : 'Lato', sans-serif;
	padding-top     : 40px;
	margin          : 0px;
	background-color: #003045;
	color           : white;
	line-height     : 1;
}

#osternWrapper {
	width           : 50%;
	background-color: black;
}


#content {
	padding-left : 10px;
	padding-right: 10px;
}

#logo {
	font-size    : 50px;
	font-weight  : 900;
	font-family  : 'Kreon', 'Lato', 'Arial', sans;
	color        : #C9E57B;
	display      : block;
	margin-bottom: 15px;
}

input[type=text] {
	background-color: #ffffff;
	border          : none;
	color           : #333333 !important;
	font-family     : 'Lato', 'Arial', sans;
	font-weight     : 400;
	font-size       : 25px;
	padding-left    : 0px !important;
	margin-right    : 10px;
	height          : 45px;
	margin-left     : 10px;
	text-align      : center;

}

#weiterBttn {
	width              : 168px;
	height             : 52px;
	background-image   : url("weiter.png");
	background-size    : cover;
	background-position: center;
	background-color   : transparent;
	border             : none;
	cursor             : pointer;
	margin-top         : 0px;

}

.loginPopupLink {
	border          : none;
	outline         : none;
	background-color: transparent;
	padding         : 0px;
	margin          : 0px;
	display         : inline;
	color           : white;
	text-transform  : none;
	font-weight     : 400;
	font-size       : 15px;
	opacity: 0.7;
	text-decoration: underline;
}

.loginPopupLink:hover {
	opacity:1;
	background-color: transparent;
}

.lletters {
	color      : #fff;
	font-family: 'Kreon', 'Lato', 'Arial', sans;
	font-weight: 700;
	font-size  : 35px;

}

#success_headline {
	color         : #C9E57B;
	font-family   : 'Kreon', 'Lato', 'Arial', sans;
	font-weight   : 400;
	font-size     : 20px;
	letter-spacing: 1px;

}


.infoblock {
	font-family: 'Lato', sans-serif;
	width      : 90%;
	max-width  : 500px;
	font-size  : 15px;
	line-height: 20px;
	font-weight: 400 !important;
}

#gefundene_buchstaben {
	letter-spacing: 5px;
	display       : block;
	margin-top    : 10px;
	font-size     : 20px;
	font-weight   : 800;

}

.error {
	font-family: 'Lato', sans-serif;
	font-style : italic;
	font-size  : 15px;
	color      : #D74240;
	text-align : center;
}

.fineprint {
	font-size : 10px;
	text-align: center;

}

#loader {
	margin-left: 10px;
	display    : none;

}

#hinweis-bttn {
	background-color: transparent;
	color           : #C9E57B;
	border          : none;
	font-weight     : 700;
	cursor          : pointer;
	font-size       : 17px;
	text-transform  : none;
	opacity         : 0.7;

}

#hinweis-bttn:hover {
	opacity: 1;

}

#loesung-hint {
	color      : #C9E57B;
	font-style : italic;
	font-size  : 14px;
	display    : none;
	line-height: 1.5;
}

#hofHeadline {
	font-family   : 'Kreon', 'Lato', 'Arial', sans;
	letter-spacing: 4px;
	font-weight   : 900;
}


#hallOfFame {
	background-color: #C9E57B;
	width           : 100%;
	padding-top     : 20px;
	min-height      : 200px;
	margin-top      : 40px;
}

#hallOfFame .infoblock {
	color: #003045;
}

#hof_entries {
	margin-top: 20px;
	max-height: 100px;
	overflow-y: auto;
}

/*Custom Scrollbar*/
/* width */
::-webkit-scrollbar {
	width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	border-radius: 2.5px;
	background   : rgba(0, 48, 69, 0.2);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background   : rgba(0, 48, 69, 0.5);
	border-radius: 2.5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 48, 69, 1);
}




#nameInputInfo {
	color: #C9E57B;
}

@media (max-width:1650px) {

	#wrapper {
		width : 60%;
	}
}

@media (max-width:1000px) {
	#img_henne {
		width: 80px;
	}
}


@media (max-width:800px) {

	#wrapper {
		width : 100%;
		margin: 0px;
	}

	.infoblock {
		font-size: 14px;
	}


}

@media (max-width:500px) {
	#logo {
		font-size: 30px;
	}
}