html {
    overflow: scroll;
    scroll-behavior: smooth;
    }


BODY {
  text-align: center;
  font-family: 'Verdana';
  font-size: 90%;
  
  
}
  
p{
   font-family: 'Verdana';
    width: 80%;
    margin: auto;
   	line-height : 1.6em;
    color:rgb(77,77,77);
}

a {
    font-family: 'Verdana';
    font-size: 1.2em;
   	color: rgb(107,142,35);
	text-decoration : none
	}
a:hover {
    font-weight: bold;
}

a:active {
    font-weight: bold;
}

h1 {
    font-family: 'Nothing You Could Do', cursive;
    font-size : 3.5em;
    color: rgb(107,142,35);
	padding-top: 1em;  
}

h2 {
    font-family:'Nothing You Could Do', cursive;
    font-size:2em;
    font-weight: 600;
    color:rgb(77,77,77);
   }

h3 {
    font-family: 'Verdana';
	font-size: 1.2em;
	color: rgb(77,77,77);
    margin-top: 1.2em;
    margin-bottom: 1em;
}

blockquote {
    font-family:'Nothing You Could Do', cursive;
    font-weight: bold;
    color: rgb(107,142,35);
    margin-top: 5vh;
    margin-bottom: 5vh;
   
}

.content {
    width: 90vw;
    margin: auto;
    min-height: 82vh;
   }

#startbild {
    display: inline-block;
    max-width: 90%;
}
#sb-li {
   height: 85vw;
    }
#sb-re {
    height: 85vw;
    margin-left: -5.7px;
      }
#sb-re {
     animation: einblenden 4s;
    -moz-animation: einblenden 4s; 
    -webkit-animation: einblenden 4s; 
    -o-animation: einblenden 4s;
}

footer {
    background-color: rgb(107,142,35);
    height: 50px;
    margin-top: 1em;
}
img {
    margin-top: 2em;
    margin-left: 4px;
}



/* spalten Unterseite ------*/


.container  > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 450px;
  margin-top: 2em;
  
}

.links{
    float:left;
    width:95%;
    text-align: left;
    padding: 10px;
 }

.rechts {
    width: 95%;
    text-align: right;
    padding: 10px;
   }
/+------------------------*/


#weiter {
 margin-top: 1em;
}


}
#weiter a{
  font-family:'Nothing You Could Do', cursive;
  font-size:1.8em;
  color:rgb(107,142,35);
  
}


#weiter a:hover {
    color: rgb(107,142,35);
}
#nachoben {
    text-align: center;
    max-width: 18px;
    margin: auto;
   }
#nachoben p {
    font-size: 4em;
    max-width: 0.1em;
    margin: auto;
    color:rgb(107,142,35);
} 
#nachoben a {
    color: rgb(107,142,35);
}
#nachoben a:hover {
    color:lime;
}


/*media Anweisungen -----------------------------------------------*/
@media screen and (min-width: 600px) {
 header {
     height:  8vh;  
}
    
 p {
font-size: 1.2em;
    }
h1 {
font-size: 4em;
    }    
}

#startbild {
    display: inline-block;
    max-width: 90%;
}
#sb-li {
   max-height: 500px;
    }
#sb-re {
    max-height: 500px;
    margin-left: -5.7px;
      }
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: stretch;
    }

 .links{
     text-align: center;
     max-width:35vw;
     }    
 .rechts {
     text-align: center;
     max-width: 65%;
     } 
 blockquote {
    font-size: 2.5em;
    letter-spacing: 0.1em;
    color: rgb(107,142,35);
   }

    
 /*keyframes ----------------*/   
  
@keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
    @-moz-keyframes einblenden { 
    from { opacity:0; }
    to { opacity:1; }
}

@-webkit-keyframes einblenden { 
    from { opacity:0; }
    to { opacity:1; }
}

@-o-keyframes einblenden { 
    from { opacity:0; }
    to { opacity:1; }
}
 
    
    
    }