/*Navigation anfang*/
body {
  margin: 0px;
  padding: 0px;
}
.navbar {
    background-color: #ADD8E6;
    height: 50px;
}
  
.navbar img {
    width: 150px;
    padding: 15px;
}
  
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
  
nav {
    float: right;
    margin: 0;
}
  
li {
    display: inline;
    padding: 15px;
}
  
nav a {
    text-decoration: none;
    color: #353535;
    display: inline-block;
    padding-top: 15px;
}
  
nav a:hover {
    color: #00b2b2;
}
  
nav a:active {
    font-weight: bold;
}
  

  
  /*Navigation ende*/
  
/*Style für allgemeine Dinge Anfang*/
.header {
  background-color: #ADD8E6;
  color: #000000;
  padding: 50px;
  font-family: "Playfair Display", serif;
}

h1 {
  text-align: center;
  font-family: "Joan" sans-serif;
  font-size: auto;
}
.body {
margin: 0px;
padding: 0px;
}

.footer {
  background-color: #ADD8E6;
  color: #000000;
  text-align: center;
}
/*Style für allgemeine Dinge Ende*/

/*style für about me anfang*/
.about_me_article {
  background-image: url("images/img_gallery/Winter@home.jpg"); /*Bild von mir zu Hause*/
  background-size: cover;
  background-position: center;
  height: 500px;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  padding-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  font-family: "Playfair Display", serif;
}
/*style für about me ende*/

/*style für index anfang*/
.index_article {
  background-image: url("images/img_gallery/Italien.jpg");  /*Bild von Italien*/
  background-size: cover;
  background-position: center;
  height: 500px;
  text-align: center;
  color: #000000;
  font-size: 20px;
  padding-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  font-family: "Playfair Display", serif;
}
/*style für index ende*/

/*Style für Hobbies anfang*/
.hobbies_article {
  background-image: url("images/img_gallery/Luke.JPG"); /*Bild von Luke Skywalker*/
  background-size: cover;
  background-position: center;
  height: 500px;
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  padding-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  font-family: "Playfair Display", serif;
}
/*style für Hobbies ende*/

/*style für works Anfang*/
div.gallery {
 display: block;
  margin: auto;
  border: 1px solid #ccc;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
  padding: 5px;
}

div.gallery img {
  width: 100%;
  height: auto;

}

div.desc {
  padding: 15px;
  text-align: center;
}

.desc {
  font-family: "Playfair Display", serif;
}
/*Style für works Ende*/

/*Style für Gallery Anfang*/
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/*Style für Gallery Ende*/

/*Style für Impressum Anfang*/
.impressum_article {
  text-align: center;
  color: #000000;
  font-size: 14px;
  font-family: "Playfair Display", serif;
}
/*Style für Impressum Ende*/

/*responsive layout für alles Anfang*/

  /*Navigation Anfang*/
  @media screen and (max-width: 600px) {
    nav {
      width: 100%;
      margin-top: -5px;
    }
     nav li {
      display: block;
      background-color: #e5e5e5;
      text-align: center;
    }
   }
  /*Navigation Ende*/

/*index Anfang*/
@media screen and (max-width: 600px) {
.index_article {
  background-image: url("images/img_media/Italien.jpg");  /*Bild von Italien*/
  background-size: cover;
  background-position: center;
  height: 500px;
  color: #faebd7;
  font-size: 15px;

}
}
/*Index Ende*/

/*About Me Anfang*/
@media screen and (max-width: 600px) {
.about_me_article{
   background-image: url("images/img_gallery/Winter@home_background.jpg"); /*Bild von mir zu Hause zusammenschneiden un
   extra verlinken*/
  background-size: cover;
  background-position: center;
  height: 500px;
  color: #000000;
  font-size: 15px;
}
}
/*About Me Ende*/

/*Hobbies Anfang*/
@media screen and (max-width: 600px) {
  .hobbies_article {
    background-image: url("images/img_gallery/Luke.JPG"); /*Bild von Luke Skywalker*/
    background-size: cover;
    background-position: center;
    height: 500px;
    color: #000000;
    font-size: 15px;
  }
}
/*Hobbies Ende*/

/*Impressum Anfang*/
@media screen and (max-width: 600px) {
  .impressm_article {
    color: #000000;
    font-size: 5px;
   }
  }

/*Impressum Ende*/