/*
https://en.wikipedia.org/wiki/Web_colors
https://fonts.google.com/
*/

* { padding: 0; margin: 0; }
#html{
		color: black;
	}

body {
		font-family:Verdana;
		background-color:#225588;
        width:auto;
		text-align:center;
		padding: 1%;
		}

#wrapper1, #wrapper2, #wrapper3, #wrapper4{

}

#wrapper1{
		background-image: url("../pics/castle1.jpg");
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: center;
		height: 900px;
		}
#wrapper2{
		background-image: url("../pics/armor.jpg");
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: center;
		height: 900px;
	}
#wrapper3{
		background-image: url("../pics/armor.jpg");
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: center;
		height: 900px;
	}
#wrapper4{
		background-image: url("../pics/alchemy.jpg");
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: center;
		height: 900px;
	}

#navi{
		height:auto;
		background-color:#00FF00;
        text-align:center;
	}

.aktiv{
		color: orange;
	}

div {

	}

header{
		background-color:rgba(192, 192, 192, 0.5);
        width:auto;
		text-align:right;
		float:middle;
		margin:10px 10% 10px 10%;
		border-radius: 5px;
}

nav{
		background-color:rgba(192, 192, 192, 0.5);
		line-height:35px;
		height:73px;
		margin:10px 10px 10px 2%;
		width:105px;
		height:250px;
		float:left;
		border-radius: 5px;
}

main{
		background-color:rgba(192, 192, 192, 0.5);
        width:auto;
		margin:10px 10% 10px 10%;
		float:middle;
		border-radius: 5px;
		height: 750px;
		overflow:hidden scroll;
	}

footer{
		background-color:rgba(192, 192, 192, 0.5);
        width:auto;
		text-align:right;
		margin:10px 10% 10px 10%;
		border-radius: 5px;		
	}
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
}
h1{
		padding: 3px 3px 3px 3px;
		margin: 3px 3px 3px 3px;
		color:black;
		text-shadow: 2px 2px 2px white, 5px 5px 10px black;
	}
h3{
		padding: 3px 3px 3px 3px;
		margin: 3px 3px 3px 3px;
		color:ghostwhite;
		text-shadow: 2px 2px 2px darkslategrey, 5px 5px 10px steelblue;
	}

p{
		font-weight: bold;
			
	}
a{
		color: firebrick;
	}

a:link    {
		color: firebrick;
	}
a:visited {
		color: firebrick;
	}
a:focus, a:hover {
		color: black;
	}
a:active  {
		color: orange;
	}
		
nav p {
		color:black;
		margin:5px 5px 5px 5px;
	}

table{
		border-radius: 5px;
		padding-left:15%;
		border-collapse: collapse;
		width: 75%;
		margin: 0 auto;
	}
th {
  background-color: #4CAF50;
  color: white;
}
th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
ul{
		border-radius: 5px;
		list-style-type: none;
		margin: 50px;
		padding: 50px;
	}

ul li {
		background: #cce5ff;
		color: darkblue;
		margin: 5px;
		border-radius: 8px;
		width:300Px;
	}
td p{ 
		color:gold;
		border:1px solid white;
		border-radius: 5px;
		background-color:rgba(66, 66, 66, 0.75);
		padding: 3px 3px 3px 3px;
}

td img{
		margin:20px 20px 20px 20px;
	}

a.versteckt:hover {
		display: block;
	}
a.versteckt span {
		color: #708090;
		display: block;
	}
a.versteckt:hover span {
		color: black;
		display: block;
		font-weight: bold;
	}

#anim{
		height:750px;
	}

#anim h1{
		color: red;
		padding: 200px;
		rotate: 22.5deg;
		text-align:center;
		
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}