/* Hintergrund home*/
.div-container {
  background-image: url(images/hintergrund.webp);
background-repeat: no-repeat;
background-size: cover;
margin:0px;
padding:0px;
height: 100vh;
}

.container {
  height: 100vh;
}

* {
  padding: 0;
  margin:0;
}

/*logo*/
.logo{
  margin-top: 30px;
 float:left;
  height: 60px;
  width: 60px;
}

/*Navigation*/ 
nav {
   float:right; 
   margin-top: 60px;
}

nav li{
    display: inline;
    font-size: 20px;
  margin-right: 30px;
 

}

nav a {
    color: rgb(255, 255, 255);
}

nav a:active {
    font-family: "Roboto Mono";
}


nav a {
  display: inline-block;
  text-decoration: none;
}


/*Home*/

.home {
  font-size:20px;
}

#home {
  padding-top: 20px;
   text-align: left;
   font-family: "Roboto Mono";
   color: rgb(255, 255, 255);
   font-size:40px;
}

.Name {
  font-size:55px;
  margin-top: 300px;
  color: rgb(255, 255, 255);
  font-family: "Roboto Mono";
  text-align:center;
  transition: transform .2s;
  transition-timing-function: ease-in;
}
.Name:hover {
  color:rgb(211, 166, 115);
 
}
.Einleitung {
  font-size:20px;
  margin-bottom:200px;
color: white;
text-align:center;
font-family: "Kanit", sans-serif;

  }


/*about me*/

.container{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  background-color: rgb(211, 166, 115);
  border-bottom: 20px;
  border-style:ridge;
  border-width: 20px;
  border-color: rgb(206, 191, 168);
}

#übermich {
  font-family: "Roboto Mono";
  color:rgb(255, 255, 255);
 font-size:100px;
 grid-column: 50%;
 text-align: center;
 margin-top:30px;
 
}

.aboutmetext {
  margin-right: 50px;
  margin-bottom: 20px;
   grid-column: 50%;
   grid-row:auto;
  background-color: rgb(211, 166, 115);
  color:white;
  font-family: "Kanit", sans-serif;
  font-size: 20px;
}



.aboutmefoto1{
  margin-top: 120px;
  margin-left: 100px;
  height:300px;
  width:430px;
  
 
}

.aboutmefoto2{
margin-left: 50px;
height:300px;
width:430px;

}


/*Hobbys*/

.backgroundhobby {
  background-color:rgb(185, 135, 107);
}


#hobbys {
   text-align:right;
   margin-right:90px;
    font-family: "Roboto Mono";
    color: rgb(255, 255, 255);
    font-size:100px;
}

.hobby1 {
font-size: 20px;
font-family: "Kanit", sans-serif;
color:white;
margin-left:20px;
margin-top:30px;
}

.hobby2 {
  font-size: 20px;
  font-family: "Kanit", sans-serif;
  text-align: right;
  color:white;
  margin-right: 50px;
}

h3{
  font-size: 50px;
  color:rgb(255, 255, 255);
  font-family: "Kanit", sans-serif;
  margin-left:200px;
  margin-top:20px;
 
}

h4{
  font-size: 50px;
  color: rgb(255, 255, 255);
  font-family: "Kanit", sans-serif;
  margin-right:50px;
  text-align:right;
}

.fotolink {
  font-size:30px;
  text-decoration: none;
   color: rgb(185, 135, 107);
  margin-left: 200px;
  background-color:white;
}
 

.konzert {
  margin-top:20px;
  height: 300px;
  width: 200px;
  margin-bottom: 50px;
  margin-left: 600px;
}

.konzert2 {
  margin-top:20px;
  height: 300px;
  width: 200px;
  margin-bottom: 50px;
  margin-left: 60px;
}
.konzert3 {
  margin-top:20px;
  height: 300px;
  width: 200px;
  margin-bottom: 50px;
  margin-left: 60px;
}


/*travel hintergrund*/

.grid-container-reisen{
  background-color:rgb(211, 166, 115);
  border-bottom: 40px;
  border-style:ridge;
  border-width: 10px;
  border-color: rgb(206, 191, 168);
  
}


/*travelüberschriften*/

#reisen {
    text-align: center;
    font-family: "Kanit", sans-serif;
    color: rgb(255, 255, 255);
    font-size: 100px;

}

.Kroatien {
  font-size: 60px;
  font-family: "Kanit", sans-serif;
  margin-left: 20px;
  color:white;
}

.Caorle {
font-size: 60px;
font-family: "Kanit", sans-serif;
color:white;
text-align:center;
}
  

.Venedig {
  font-size: 60px;
  font-family: "Kanit", sans-serif;
  color:white;
  margin-left: 900px;
  
}

.Mallorca {
  font-size: 60px;
  margin-left:20px;
  color:white;
  font-family: "Kanit", sans-serif;
}


/*traveltexte*/

.ktext{
  font-size:20px;
  margin-left:20px;
  color:white;
  font-family: "Kanit", sans-serif;

}

.ctext {
  font-size:20px;
  text-align:center;
  color:white;
  font-family: "Kanit", sans-serif;

}

.vtext {
  font-size:20px;
  margin-left:900px;
  color:white;
  font-family: "Kanit", sans-serif; 
}

.mtext {
  font-size:20px;
  margin-left:20px;
  text-align:left;
  color:white;
  font-family: "Kanit", sans-serif;
}




/*travelfotos*/

.kroatien1 {
  margin-left: 20px;
  height:500px;
  width:400px;
}
.kroatien2 {
  margin-left: 20px;
  height:500px;
  width:400px;
}
.kroatien3 {
  margin-left: 20px;
  height:500px;
  width:400px;
}


.caorle1 {
  margin-left: 500px;
  height:500px;
  width:400px;
}

.caorle2 {
  margin-left: 200px;
  height:500px;
  width:400px;
}

.venedig1 {
  margin-left: 400px;
  height:500px;
  width:400px;
}

.venedig2 {
 margin-left:50px;
 height:500px;
 width:400px;
}

.murano {
  margin-left:50px;
  height:500px;
  width:400px;
}

.mallorca1 {
  margin-left:30px;
  margin-bottom: 100px;
  height:500px;
  width:400px;
}
 
.mallorca2 {
  margin-left:30px;
  margin-bottom: 100px;
  height:400px;
  width:500px;
}

.mallorca3 {
  margin-left:30px;
  margin-bottom: 100px;
  height:500px;
  width:400px;
}

.mallorca4 {
  margin-left:30px;
  margin-bottom: 100px;
  height:500px;
  width:400px;
}
  
/**images gallery **/

.backgroundgallery {
  background-color: rgb(185, 135, 107);
}

#eigenefotos {
  margin-left:200px;
  font-family: "Kanit", sans-serif;
  color: rgb(255, 255, 255);
  font-size: 100px;
}


.fototext {
  margin-top:40px;
  font-size: 30px;
  font-family: "Kanit", sans-serif;
  text-align: center;
  color: rgb(255, 255, 255);
}

#slider{
  overflow:hidden;
}

#slider figure {
  position:relative;
  width: 500%;
  margin: 0;
  left: 0;
  animation: 20s slider infinite;
}

#slider figure img {
  float: left;
  width: 7%;
}

@keyframes slider {
 0% {
  left:0;
}
7% {
  left: 0;
}
14%{
  left: -100%;
}
21% {
  left:-100%;
}
28%{
  left:-200%;
}
35% {
  left:-200%;
}
42% {
  left:-300%;
}
49%{
  left:-300%;
}
56%{
  left:-400%;
}
63% {
  left:-400%;
}
}


#slider2{
  overflow:hidden;
}

#slider2 figure {
  position:relative;
  width: 500%;
  margin: 0;
  left: 0;
  animation: 20s cfslider infinite;
}

#slider2 figure img {
  float: left;
  width: 7%;
}

@keyframes slider {
 0% {
  left:0;
}
7% {
  left: 0;
}
14%{
  left: -100%;
}
21% {
  left:-100%;
}
28%{
  left:-200%;
}
35% {
  left:-200%;
}
42% {
  left:-300%;
}
49%{
  left:-300%;
}
56%{
  left:-400%;
}
63% {
  left:-400%;
}
}



/*Projekte*/

.project-container {
  background-color:rgb(211, 166, 115);
}

#eigenewerke{
  margin-left: 10px;
  font-family: "Kanit", sans-serif;
  font-size:100px;
  color:rgb(255, 255, 255);
}

.projecttext {
  margin-left: 10px;
  font-family: "Kanit", sans-serif;
  font-size: 20px;
  color:white;
}

#slider3{
  overflow:hidden;
}

#slider3 figure {
  position:relative;
  width: 500%;
  margin: 0;
  left: 0;
  animation: 20s slider infinite;
}

#slider3 figure img {
  float: left;
  width: 7%;
}

@keyframes slider3 {
  0% {
      left:0;
  }
  7% {
      left: 0;
  }
  14%{
      left: -100%;
  }
  21% {
      left:-100%;
  }
  28%{
      left:-200%;
  }
  35% {
      left:-200%;
  }
  42% {
      left:-300%;
  }
  49%{
      left:-300%;
  }
  56%{
      left:-400%;
  }
  63% {
      left:-400%;
  }
}

/*Footer*/
.impressum{
  font-size:100px;
  text-decoration:none;
  margin-left: 200px;
  color:white;

}
.bilderrechte {
  font-size:100px;
  text-decoration:none;
  margin-left: 100px;
  color:white;
}
.home {
  font-size:100px;
  text-decoration:none;
  margin-left: 100px;
  color:white;
}

footer{
  height: 500px;
  background-color:rgb(185, 135, 107);
}

.footer {
  background-color:rgb(185, 135, 107);
}

/*media query*/

@media (max-width: 600px) {

  .Name, .Einleitung {
    font-size: 40px;
  }

  nav{ float: none;
    text-align: center;
}
    nav li {
      display: block;
      margin-top: 10px;
      margin-bottom: 10px;
    }    




    .Name {
      font-size:30px;
    }
    .Einleitung {
      font-size: 10px;
      margin-bottom:50px;
    }
    .home{
        display: inline;
    font-size: 20px;
  margin-right: 30px;

    }
    .div-container{
      height:600px;
      margin-top:none;
    }
    
    nav{ float: none;
      text-align: center;
      background-color:rgb(185, 135, 107);
    }
    nav li {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    }    
     
    .übermich {
      font-size: 10px;
  grid-column:none;
  grid-row:none;
  text-align:center;
    }
    .aboutmefoto1{
      margin-top:20px;
      margin-left:10px;
      height:100px;
      width:400px;
    }
    .aboutmetext {
      margin-right: 10px;
  margin-bottom: 10px;
   grid-column: 50%;
   grid-row:auto;
  background-color: rgb(211, 166, 115);
  color:white;
  font-family: "Kanit", sans-serif;
  font-size: 20px;
    }
    .aboutmefoto1{
      height: 200px;
      width:300px;
      margin-left:10px;
    }
    .aboutmefoto2{
      height: 100px;
      width:70px;
      margin-left:10px;
    }
    
    #hobbys {
      font-size: 60px;
      margin-left: 20px;
    }
    .hobby1{
      font-size:30px;
      margin-left:20px;
    }
    .hobby2 {
      font-size: 30px;
      margin-right: 20px;
    }
    h3{
      font-size:50px;
      margin-left:20px;
    }
    h4{
      font-size:50px;
      margin-right:20px;
    }
    .fotolink{
      font-size:40px;
      margin-left: 30px;
    }
    .konzert{
      margin-top:10px;
      height: 300px;
      width: 200px;
      margin-bottom: 10px;
      margin-left: 10px;
    }
    .konzert2{
      margin-top:10px;
      height: 300px;
      width: 200px;
      margin-bottom: 10px;
      margin-left: 10px;
    }
    .konzert3{
      margin-top:10px;
      height: 300px;
      width: 200px;
      margin-bottom: 10px;
      margin-left: 100px;
    }
    .grid-container-reisen {
  
      border-width: 50px;
    }
    #reisen {
      font-size: 60px;
    }
    .Kroatien{
      font-size:40px;
      margin-left:10px;
    }
    .Caorle{
      font-size:40px;
    }
    .Venedig {
      font-size:40px;
      margin-left: 55px;
    }
    .Mallorca{
      font-size:40px;
      margin-left:150px;
    }
    .ktext{
      font-size: 20px;
      margin:10px;
    }
    .ctext {
      font-size:20px;
    }
    .vtext{
    margin-top:none;
      font-size:20px;
      margin-left:55px;
    }
    .mtext{
      font-size:20px;
      margin-left: 30px;
    }
    .kroatien1 .kroatien2 .kroatien3{
      margin-left:100px;
    }
    .caorle1{
      margin-left: 25px;
    }
    .caorle2{
      margin-left:30px;
    }
    .venedig1{
      margin-left: 40px;
      margin-top:none;
    }
    .venedig2 .venedig3 .murano{
      margin-left:10px;}

    .mallora1 .mallorca2 .mallorca3 .mallorca4{
    margin-left:200px;}

    .grid-container-reisen{
      border-bottom: 20px;
      border-style:ridge;
      border-width: 20px;
      border-color: rgb(206, 191, 168);
      
    }

    #eigenefotos{
      font-size:60px;
      margin-right:40px;
    }
    .fototext{
    font-size:30px;
    margin-top:20px;}

    #eigenewerke{
      font-size:60px;}

    .projecttext{
      font-size: 30px;}

    .impressum{
      font-size: 40px;
      margin-left:20px;
      display: block;
      margin-top: 10px;
      margin-bottom: 10px;}

      .bilderrechte{
        font-size: 40px;
        margin-left:20px;
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;}

        .home {
          font-size: 40px;
          margin-left:20px;
          display: block;
          margin-top: 10px;
          margin-bottom: 10px;}

      footer{
        float: none;
    text-align: center;
      }


    }