* {
	box-sizing: border-box;
}

.container {
  margin: auto;
 
}

#otherfont {
	font-size: 50px;
    font-family: Orbitron, sans-serif;
	color: #47102e; 
}

.minifont {
	font-size: 16px;
	font-family: Orbitron, sans-serif;
	color: #47102e;
}

.minifontwhite {
	font-size: 16px;
	font-family: Orbitron, sans-serif;
	color: #f0ffff;
}

.mini2font {
	font-size: 14px;
	font-family: Orbitron, sans-serif;
	color: #47102e;
}

.bigwhitefont {
	font-size: 18px;
	font-family: Orbitron, sans-serif;
	color: #f0ffff;
}

#header {
  float: left;
  position: absolute;
  background-color: #a8a8a8;
  width: 70%;
  height: 15%;
  border-radius: 15px 15px 15px 15px;
  padding: 2.1%;
  padding-left: 8%;
  margin-top: 5%;
  margin-left: 18%;
  box-sizing: border-box;
  text-align: center;
 
}

section {
  display: -webkit-flex;
  display: flex;
} 

html {
  
  height: 200px;
  width: 1245px;
  background-image: linear-gradient(#08ffa4, #2eeaff);
  background-repeat: no-repeat;
  background-attachment: fixed;
  
}

#nav {
  float: left;
  clear: both;
  position: absolute;
  background-color: #f7f55c;
  width: 12%;
  height: 70.5%;
  border-radius: 15px 0px 0px 15px;
  padding-left: 2%;
  padding-top: 1%;
  margin-top: 5%;
  margin-left: 5%;
  box-sizing: border-box;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

nav a {
    text-decoration: none; 
	list-style: none;
    font-weight: bold;
    color: black; 
    background-color: #f7f55c;
  }
  nav a:focus,
  nav a:hover,
  nav a:active {    
    text-decoration:underline;
  }
  
nav ul {	 
    height: 15%;
    margin: 3%;
    padding: 1%;
    list-style: upper-roman;
    width: 5%;
    background-color: #f7f55c ;

  }


#article {
    clear: both;
  position: absolute;
  border-radius: 30px;
  padding: 2%;
  width: 70%;
  height: 41.5%;
  margin-left: 18%;
  margin-top: 12.8%;
  background-color: #215b5c;
  box-sizing: border-box;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  
}

#footer {
 clear: both;
 position: absolute;
 border-radius: 15px;
 padding: 2.5%;
 margin-top: 33.6%;
 margin-left: 18%;
 width: 70%;
 height: 11.7%;
 background-color: #a8a8a8;
 box-sizing: border-box;
 text-align: center;
}

#imgleft {
	position: absolute;
    bottom: 5%;
    right: 2%;
	border-radius: 15px;
	width: 275.4px;
    height:	183.6px;
}

#imgmiddle {
	position: absolute;
	top: 5%;
	right: 115%;

	border-radius: 15px;
	 width: 222px;
	 height: 132.75px;
}

#eat {
	position: fixed;
	top: 31%;
	right: 12.5%;
}

div #a2 {
	 text-decoration: none; 
	list-style: none;
    font-weight: bold;
    color: black; 
    background-color: #a8a8a8;
  }
  div #a2:focus,
  div #a2:hover,
  div #a2:active {    
    text-decoration:underline;
  }

.linkfont {
	font-size: 16px;
	font-family: Orbitron, sans-serif;
	color: #f0ffff;
}

#brand {
	position: absolute;
	top: 37%;
	right: 60%;
	border-radius: 15px;
	 width: 229.5px;
	 height: 117.75px;
}

#soziales {
	position: absolute;
	top: 15%;
	right: 5%;
	border-radius: 15px;
	width: 199.35px;
	height: 251.1px; 
}

#nextPage {
	position: fixed;
	bottom: 33%;
	right: 13%;
}

div #a3 {
	 text-decoration: none; 
	list-style: none;
    font-weight: bold;
    color: #f0ffff; 
    background-color: #215b5c;
  }
  div #a3:focus,
  div #a3:hover,
  div #a3:active {    
    text-decoration:underline;
  }
  
#previousPage {
	position: fixed;
	bottom: 33%;
	left: 20%;
}

#video {
	position: absolute;
	top: 5%;
	right: 1%;
	width: 540px;
	height: 345px;
	border-radius: 15px;
}

#second {
	height: 15%;
    margin: 3%;
    padding: 1%;
    list-style: decimal;
    width: 5%;
    background-color: #f7f55c ;
}

#lefffft {
	position: fixed;
	top: 31.3%;
	right: 48%
}

#lefffft2 {
   position: fixed;
   top: 33.5%;
   right: 48%;
}   

#junges {
	position: absolute;
	bottom: 5%; 
	width: 229.5px;
	height: 153px;
	right: 28%;
	border-radius: 15px;
}

#minikoala {
	position: absolute;
	bottom: 5%;
	width: 229.5px;
	height: 153px;
	right: 51%;
	border-radius: 15px;
}

.tabelle {
	height: 4%;
    margin: 0.5%;
    padding: 0.5%;
    list-style: none;
 
}

#article2 {
    clear: both;
  position: absolute;
  border-radius: 30px;
  padding: 1.5%;
  width: 70%;
  height: 41.5%;
  margin-left: 18%;
  margin-top: 12.8%;
  background-color: #215b5c;
  box-sizing: border-box;
  
}

#header2 {
  float: left;
  position: absolute;
  background-color: #a8a8a8;
  width: 70%;
  height: 15%;
  border-radius: 15px 15px 15px 15px;
  padding: 2.1%;
  padding-left: 25%;
  margin-top: 5%;
  margin-left: 18%;
  box-sizing: border-box;
 
}

.automargin {
	margin: auto;
}

@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}