th {
	cursor: pointer;
}
#eingabe{
	margin: auto;
	width: 200px;
	left: 400px;
	text-align: left;	
	padding: 10px;
}

.info{
	background: #272927;
	font-size: 25px;
	font-family: Arial Black;
	color: #db7e21;
}
.center{
	background: #272927;
	font-size: 30px;
	font-family: Arial Black;
	color: #db7e21;
	
}
.ergebnis{	
	font-size: 50px;
	font-family: Arial Black;
	color: #db7e21;
	
}

input{
	font-size: 25px;
	border-radius: 10px;
	width: 200px;
	height: 40px;
}
.error{
	font-size: 10px;
	color: red;
}
button{
background-color: #ffa500;
border-style: none;
border-radius: 5px;
width: 200px;
height: 40px;
font-size: 14px;
font-family: Arial Black;
margin-top: 15px;
margin-bottom: 15px;
cursor: pointer;
}
button:hover{
	background-color:#db7e21;
	color: white;	
}
body{
	background-color: #272927;
	text-align: center;
}
#neue_zahl{
	background-color: #db7e21;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #272927;
	padding: 10px;
	height: 40px;
	border-radius: 20px;
	font-size: 30px;
	animation: animate 0.3s linear forwards;
}
@keyframes animate {
    0% { 
        color: #db7e21;
    }
    100% {
        color: #272927;
    }
}
table{
	width: 90%;
	margin: auto;
	text-align: left;
	background-color: #272927;
	border: 4px #db7e21 dotted;
	color: #272927;
	font-size: 25px;
}
table tbody tr:nth-child(even) {
	background: #d3914f;
}
table tbody tr:nth-child(odd) {
	background: #db7e21;
}
table thead tr{
	background: #ffa500;
	color: black;
	font-size: 30px;
}
.feedback{
	margin: 10px;
	color: #272927;
	border-radius: 15px;
}
.good_feedback{
	background-color: rgb(93, 216, 109);
	animation: happy 0.3s;
}
.bad_feedback{
	background-color: rgb(216,93,93);
	animation: shake 0.3s;
}
  
@keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes happy {
	0% { transform: translate(0px, 0px) rotate(0deg); }	
	30% { transform: translate(0px, 8px) rotate(0deg); }
	100% { transform: translate(0px, 0px) rotate(0deg); }
}

.topic{
	font-size: 40px;
}
.valid{
	display: none;
}
.invalid{
	display: visible;
}
#highlight_in_higscore{	
	background: #242c24;
	color: #d3914f;
	animation: happy 1s;	
}