body{
	background-color: #F5F6CE;
	font-family: "Courier New", Courier, monospace;
	font-size: 20px;
}

#dropZone,
#animals {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  min-height: 200px;
  margin-bottom: 20px;
}

#dropBox1,
#dropBox2,
#dropBox3,
#dropBox4 {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  height: 250px;
  width: 250px;
  border: 1px solid #aaaaaa;
  padding: 1rem;
}

img {
  height: 200px;
  object-fit: cover;
  width: 200px;
}

a:link {
  color: blue; 
  background-color: transparent; 
  text-decoration: none;
}

a:visited {
  color: purple;
  background-color: transparent;
  text-decoration: none;
}

.a{
	text-align: center;
	font-size: 60px;
}

input.q{
  font-size: 26px;
  font-family: "Courier New", Courier, monospace;
}

.b{
	color: #F5F6CE;
	background-color: black;
	border : none;
	font-family: "Courier New", Courier, monospace;
	font-size: 30px;
}

em{
  font-family: sans-serif;
}

p.d{
	font-size: 40px;
}

.f{
	font-size: 30px;
	text-align: center;
}

p.g{
	font-size: 50px;
}

.red{
	color: red;
}

.h{
	text-align: center;
	font-size: 60px;
}

.e{
    font-size: 25px;	
}

.c{
	font-size: 20px;
}

td.tdpadding{
  padding: 20px;
}
table{
	border-collapse: collapse;
  margin: auto;
}

table, th, td {
	border: 1px solid black;
	text-align: right;
}

.tcenter{
	text-align: center;
}

th, td{
	text-align: left;
}

.space{
    word-spacing: 2cm;
}

.linie{
	border-top: 2px double black;
}

.platzhalter{
	border-top: 200px solid #F5F6CE;
}

.topnav{
    background-color: black;
    overflow: hidden;
}

.topnav a{
    float: left;
    color: white;
    text-align: center;
    padding: 20px 25px;
    text-decoration: none;
    font-size: 15px;
}

.topnav a.active{
    background-color: #F5F6CE;
    color: black;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 15px; 
  border: none;
  outline: none;
  color: white;
  padding: 20px 25px;
  text-align: center;
  background-color: black;
  font-family: "Courier New", Courier, monospace;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #F5F6CE;
  color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
}

.dropdown-content a {
  float: none;
  color: white;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 15px;
}

.dropdown-content a:hover {
  background-color: #F5F6CE;
}

.dropdown:hover .dropdown-content {
  display: block;
  transition: 0.5s ease;
}

.animate1{
	position:relative;
	animation:animate1 2.5s;}
@keyframes animate1{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}

.animate2{
	position:relative;
	animation:animate2 2.5s}
@keyframes animate2{from{left:-200px;opacity:0} to{left:0;opacity:1}}

.animate3{
	position:relative;
	animation:animate3 2.5s}
@keyframes animate3{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.animate4{
	position:relative;
	animation:animate4 2.5s}
@keyframes animate4{from{right:-300px;opacity:0} to{right:0;opacity:1}}

.animate5{
	position:relative;
	animation:animate5 2.5s}
@keyframes animate5{from{left:-400px;opacity:0} to{left:0;opacity:1}}

.animate6{
	position:relative;
	animation:animate6 2.5s}
@keyframes animate6{from{bottom:-400px;opacity:0} to{bottom:0;opacity:1}}

.animate7{
	position:relative;
	animation:animate7 2.5s}
@keyframes animate7{from{top:-400px;opacity:0} to{top:0;opacity:1}}

.drehen{
  width: 300px;
  height: 300px;
}

.drehen:hover{
  animation:drehen 0.5s infinite linear}
@keyframes drehen{0%{transform: rotate(0deg)}100%{transform: rotate(359deg)}}

#overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  cursor: pointer;
}

#text{
  position: absolute;
  top: 20%;
  left: 50%;
  font-size: 20px;
  color: grey;
  transform: translate(-50%,-50%);
}

#text2{
  position: absolute;
  top: 80%;
  left: 50%;
  font-size: 15px;
  color: grey;
  transform: translate(-50%,-50%);
}

#falsch{
  color: red;
  font-size: 30px;
  display: none;
}

#eingeben{
 color: red;
  font-size: 30px;
  display: none;
}

.right {
	float: left;
	width: 30%;
	margin: 0 10px;
	padding: 1% 1%;
	
}

.right ul {
	padding: 20px 0 15px 20px;
	margin:0;
}

.right li {
	margin-bottom:5px;
	list-style-type: square;
	color: #3B6EBF;
}

.middle h2 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
.right h2 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}