*  {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      word-wrap: break-word;
 }
 .marquee 
{
color: blue;
border: 3px double #E10024;

background-repeat: repeat-x;
line-height: 26px
}
 img  {
      max-width: 100 %;
      height: auto;
 }
  
 body  {
      background-color:gray;
     font-family:Arial,Helvetica,sans-serif;
 }
  
 header, footer  {
      width:100%;
      background-color:lime;
      border-radius:25px;
      margin-top:20px;
      margin-bottom:20px;
      padding:10px;
      overflow:auto;
 }
 
 header img  {
      float:left;
      margin:10px;
      border-radius:10%;
 }
  
 header   h1  {
      font-size:2.2em;
      margin:15px 15px 15px 120px;
 }
  
 header   h2  {
      font-size: 1.3em ;
      margin-left: 50 %;
 }
  
 nav  {
      padding: 10px;
 }
 
 article  {
      padding: 10px;
      font-family: "Snell Roundhand", "Comic Sans MS", cursive;
      color : Black;
 }
 
  aside  {
      padding: 10px;
      border-radius: 25px;
      background-color: silver;
 }
 
	#galerie {
	background:snow;
	-moz-border-radius:10px;
	border-radius:10px;
	padding:20px;
	width:700px;
	margin:20px auto;
}

	#galerie img {
	background:#ffffff;
	width:150px;
	margin:15px 10px;
	padding:10px 10px 50px 10px;
	opacity:0.8;
	-moz-box-shadow: 0 0 5px 2px #ccc;
	-webkit-box-shadow: 0 0 5px 2px #ccc;
	box-shadow: 0 0 5px 2px #ccc;
	-webkit-transform: rotate(0deg);  /* Saf3.1+, Chrome */
	-moz-transform: rotate(0deg);  /* FF3.5+ */
	-o-transform: rotate(0deg);  /* Opera */
	transform: rotate(0 deg);
	-webkit-transition: all 0.4s ease-out;	/* Saf3.1+, Chrome */
	-moz-transition: all 0.4s ease-out;	/* FF3.5+ */
	-o-transition: all 0.4s ease-out;	/* Opera */
	transition: all 0.4s ease-out;
}

	#galerie img:nth-child(2n) {
	-webkit-transform: rotate(2deg);  /* Saf3.1+, Chrome */
	-moz-transform: rotate(2deg);  /* FF3.5+ */
	-o-transform: rotate(2deg);  /* Opera */
	transform: rotate(0deg);
}

	#galerie img:hover {
	opacity:1;
	padding:0;
	position:relative;
	z-index:1;
	-moz-box-shadow: 2px 2px 5px #888;
	-webkit-box-shadow: 2px 2px 5px #888;
	box-shadow: 2px 2px 5px #888;
	-webkit-transform: rotate(0deg) scale(5);  /* Saf3.1+, Chrome */
	-moz-transform: rotate(0deg) scale(5);  /* FF3.5+ */
	-o-transform: rotate(0deg) scale(5);  /* Opera */
	transform: rotate(0deg) scale(5);
}
 
 #hauptbereich  {
      width: 100 %;
      background-image: linear-gradient(#006060, darkcyan);
      margin-top: 20px;
      margin-bottom:20px;
      padding:15px;
      border-radius:25px;
 }
  
 nav   li  {
      background-color:silver;
      border-radius:15px;
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 1.1em;
      list-style: none;
 }
  
 nav   a  {
      color: red;
      text-decoration: none;
 }
  
  nav   a: hover  {
      color: red;
 }
  
 h1  {
      margin-top: 30px;
      padding-bottom: 20px;
 }
  
 p  {
      margin-top: 10px;
      margin-bottom: 10px;
 }
  
figure  {
     margin: 10px;
 }

footer	{
	min-height: 80px;
	text-align: center;
	padding-top: 20px;
	color: honeydew;

 @media only screen and(min-width: 600px)  {
      nav li  {
          display: inline-block;
          border-radius: 10px;
          margin-right: 2%;
          padding: 5px;
          font-size: 1.1em;
     }
     
      article {
          width: 60%;
          float: left;
     }
  
      aside  {
          width : 40%;
          float : left;
     }
     
      #hauptbereich  {
          overflow: auto;
     }    
 }

 @media   only   screen   and  ( min-width : 768px){
  
        #gesamt  {
          width: 70% ;
          margin: auto;
     }
  
  
      nav  {
          float: left;
          width: 25%;
     }
     
      article  {
          width: 50% ;
          margin-top: 20px;
     }
  
      aside  {
          width: 25%;
          margin-top: 20px;
     }
  
      nav   li  {
          display: block;
          padding: 10px;
          font-size: 1.3em;
     }
 }