body{
background-color: #DDC1BD; /* pastell rosa */
}

section {
    display: block; float: left; width: 100%;
    margin-right: 10;
}


img {
  display: inline-block;
  margin-left: 0.5em;
}

img a:hover .hover_icon{
  display: inline;
}

nav li {
  display: flex;
  flex-direction: column;
  margin-left: 0;
  padding: 10px 5px;
  width: calc(100%/5);
  text-align: center;

  background-color: #53B7C1
  font-size: 1rem;
}
nav li a {
  color: #F1F1F1;
  text-decoration: none;
}

nav ul{
  margin: 0;
  padding: 0;
}

nav li a:hover{
  color: #D9798C;
}

.hover_icon img{
  display: none;
}

.hover_icon a:hover{
  display: inline-block;
}



.logo img{
  display: inline-block;
  margin-left: 0;
  margin-bottom: 2;
}

.icons img{
  display: inline-block;
  flex-direction: column;
  margin-right: 0;
}
.icons {
  margin: 0 - 5px;
}

.icons a:hover{
  background-color: #D9798C;
}

@media (min-width: 370px) {
  .icons img {
    margin: 0px;
  }
  .icons {
    margin: 0- 5px;
}

/*BIlder anpassen */
img{
    max-width: 100%;
}
/*Anpassen des Bildes auf der Homepage */
.home img{
  text-align: center;
  max-width: 100%;
  width: calc(100%/1);
  margin: 10em;
}

@media (min-width: 370px) {
  .home img {
    margin: 5px;
  }
  .home {
    margin: 0- 5px;
}

.me img{
  margin: 4px;
  width: 500px;
  height:auto;
}
.me {
  margin: 0- 5px;
}

.me :hover{
  background-color: #D9798C;
}

@media (min-width: 370px) {
  .me img {
    margin: 1em;
    float: left;
  }
  .me{
    margin: 0- 5px;
}

.meleft img{
  margin: 4px;
  width: 47%;
  height:auto;
}
.meleft {
  margin: 0- 5px;
}

.meleft :hover{
  background-color: #D9798C;
}

@media (min-width: 370px) {
  .meleft img {
    margin: 1em;
    float: left;
  }
  .meleft {
    margin: 0- 5px;
}

.meright img{
  margin: 10em;
  margin-right: 10;
  width: 50%;
  height:auto;
}
.meright {
  margin: 0- 5px;
}

.meright :hover{
  background-color: #D9798C;
}

@media (min-width: 370px) {
  .meright img {
    margin: 1em;
    float: right;
  }
  .meright {
    margin: 0- 5px;
}

.h2blog h2{
  font-family: 'Quicksand', sans-serif;
  color: #D9798C; /* pastell red */
  border-width: 4px;
  border-color: #AF4620;
  border-radius: 5px;
  font-size: 35px;
  font-style: normal;
  font-weight: 400;
  width: 60em;
  margin: 0;
  margin-bottom: 1em;
}

.bildtext p{
  display: flex;
  flex-direction: row;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  color: #F1F1F1; /* light grey */
  font-size: 15pt;
  font-style: normal;
  text-decoration: inherit;
  text-align: left;

  padding: 1px 5px;
  max-width: 10em;
  margin: 1em;
  margin-left: 15px;
  margin-right:30px;
}

.overview img{
  display: block; float: left; width: calc(100%/2 - 1em);
  margin: 10em;
  margin-right: 10;
  opacity: 1;
}
.overview {
  margin: 0- 5px;
}

.overview :hover{
  /*background-color: #D9798C;
  text-align: center;
  color:#D9798C;
  opacity: 80%;
}*/ }

.overview a:hover{
    background-color: #D9798C;
    opacity: 50%;

}
@media (min-width: 370px) {
  .overview img {
    margin: 5px;
    margin-right: 10px;
  }
  .overview {
    margin: 0- 5px;
}

/*.overlay {
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.overview:hover .overlay{
  opacity: 0.5;
}*/

@media (max-width: 600px) {
  .overview img{
    width: 100%;
  }
  }

.works img{
  display: flex; float: left; width: 50%;
  margin-right: 10;
  text-align: center;
  vertical-align: middle;
}
.works {
  margin: 0- 5px;
}
.works :hover{
  color: #D9798C;
}
.works a:hover{
  color: #D9798C;
}
@media (min-width: 370px) {
  .works img {
    margin: 5px;
    margin-right: 10px;
  }
  .works {
    margin: 0- 5px;
}

.bildbeschreibung p{
  display: row;
  flex-direction: row;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  color: #F1F1F1; /* light grey */
  font-size: 15pt;
  font-style: normal;
  text-decoration: inherit;
  text-align: justify;

  padding: 1px 5px;
  max-width: 26em;
  margin: 1em;
  margin-left: 15px;
}

/*Nav verbergen, wenn das Bild sich ändert */
@media (min-width: 520px) {
  nav.toggle {
    display: none;
  }
  nav ul li {
    display: inline-block;
  }
}

/* Inhalt Zentrieren*/
@media min-width: 720px) {
  main, nav {
    width: 700px;
    margin: 0 auto;
  }
}

@media (max-width: 500px){
  h1 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    color: #D1C3B7; /* beige */
    font-size: 40px;
    font-style: normal;
    text-decoration: inherit;
    padding: 1em;
  }
}


h1 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  color: #000000; /* pastell red */
  font-size: 60px;
  font-style: normal;
  text-decoration: inherit;
  text-align: center;
  width: 80%;
}

@font-face {
  font-family: “Quicksand”;
  src: url("/fonts/Quicksand-webfont.woff") format("woff")
}


h2{
  font-family: 'Quicksand', sans-serif;
  color: #D9798C; /* pastell red */
  border-width: 4px;
  border-color: #AF4620;
  border-radius: 5px;
  font-size: 35px;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  width: 80%;
  margin-bottom: 2em;

}
@media (max-width: 500px){
  h2 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    color: ##D1C3B7; /* beige */
    font-size: 40px;
    font-style: normal;
    text-decoration: inherit;
    padding: 1em;
  }
}

h3{
  font-family: 'Quicksand', sans-serif;
  color: #D9798C; /* pastell red */
  border-width: 4px;
  border-color: #AF4620;
  border-radius: 6px;
  font-size: 30px;
  font-style: normal;
  font-weight: 300;
  text-align: left;
  width: 80%;
  margin-bottom: 0.5em;
  margin: 0;
  margin-top: 0

}
@media (max-width: 500px){
  h3 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    color: ##D1C3B7; /* beige */
    font-size: 35px;
    font-style: normal;
    text-decoration: inherit;
    padding: 1em;
  }
}

main {
  background-color: #f0f8ff;
  width: 40%;
  margin: 0 auto;  /*horizontal zentrieren */
}
  /* Hervorhebung im Fließtext */
em{
  font-style: italic;
  font-weight: bold;
}
 /* gernerelle Links */
a {
  color: #D9798C; /* pastel rosa */
  text-decoration: none;
}
a:hover {
  color: #F1F1F1;
  text-decoration: none;
  /*color: #D9798C;*/
}

p{
  display: flex;
  flex-direction: column;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  color: #F1F1F1; /* light grey */
  font-size: 15pt;
  font-style: normal;
  text-decoration: inherit;
  text-align: justify;

  padding: 3px 10px;
  max-width: 30em;
  margin: 0em;
  margin-left: 5em;

}
ul.navigation {
  width: 80px;
  height: 30px;
}