@import url('https://fonts.googleapis.com/css?family=Poppins:400,700,900');
@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url(https://fonts.gstatic.com/s/poppins/v12/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');

*{
    font-family: "Poppins";
    font-weight: bold;
    margin: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  
    padding: 0;
}
html, body{
min-height: 100vh;
display: flex;
flex-direction: column;
margin:0;

}

.index {
  color: #ef7765; 
background-image: url(/code/images/background.png);
  background-repeat: no-repeat;
  background-position: top;
  font-size: 3.5vw;
  background-size: 190%;
  background-attachment: local;
  text-align: left;
  margin: 0px;
	/*padding:0px 60px 0 30px;*/
}

.about{
  color: #ef7765;
  background-color: #333333;
  /*background-image: url(/code/images/background.png);
  background-repeat: no-repeat;
  background-position: top;
  font-size: 3.5vw;
   background-attachment: local;*/
 background-size: 190%;
 
  padding:0 10px 0 10px;
  text-align: left;
  margin: 0px;
}

main ul li, footer ul li{
    list-style: none;

}

main>ul{
  display: flex;
  flex-direction: column;
justify-content: space-evenly;

}

main li{
  padding:5px;
	flex-grow: 2;
}

nav ul li{
padding: 0;
font-size: 5vw;
display:inline;
list-style: none;
vertical-align: bottom;
}

nav>ul{
  /* transform: translateY(0px); */
  vertical-align: bottom;
  position: static;
  bottom: 0;
}

footer ul{
    text-align: center;
    display:inline;
    display: flex;
	/* border:2px solid red; */

}

footer img{
height: 50px;
width: 50px;
/*padding:30px;*/
object-fit: cover;
}

a{
    text-decoration: none;
    color: #ef7765;
}

img{
  width: 250px;
  height: 250px;
    padding-bottom: 0px;
    margin:-12px;
    padding-right: 20px;

}

div{
  display: flex;

}

nav{
    padding:0px;
    margin: 0px;
    vertical-align: bottom;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    


}

.birds{
    color: #ef7765;
    padding: left right;
}

ul{
    padding-inline-start: 10px;
    display: inline;
   
}

h1
{
 color: white;
   margin: 0;
   font-size: 3vw;
   padding-top:10px; 
   padding-left:16px;
}

p
{
   color: white;
   margin: 0;
   font-size: 3vw;
   padding-top: 10px;
   padding-left: 16px;
}

dl {
  display: flex;
  flex-flow: row wrap;
  font-size: 2.5vw;
	padding-top:10px;
	padding-left:12.5px;
}
dt {
  flex-basis: 20%;
  padding: 0px 0px;
  text-align: left;
  color: #ef7765;
  
}
dd {
  flex-basis: 70%;
  flex-grow: 1;
  margin: 0;
}

.desc li{
  font-size: 2.5vw;
  font-weight: bold;
}

.desc a{
	  text-decoration: underline;
	  font-weight: bold;
}
.desc{
display:flex;
justify-content:unset;
padding: 0px;
padding-left:10px;
}

dl a{
  text-decoration: underline;
}

em{
  font-size: 2.5vw;
}

em a{
  text-decoration: underline;
}

.insta{
transform: scale(0.9);
}

footer{
  padding-top:15px
}
/*footer of index.html*/
.index{
  /*padding:50px 0 0 0;*/
}

/*Styling the dropdows*/

  /* Album style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
  
  /* The container <div> - needed to position the dropdown content */
  .album {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dcontent {
    display: none;
    position: relative;
    /* background-color: #233961; */
   width: 60px;
   /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;*/
  }
  
  /* Links inside the dropdown */
  .dcontent a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dcontent a:hover {color: black;
}
  
  /* Show the dropdown menu on hover */
  .album:hover .dcontent {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .album:hover .album td {color: white;}



   /* Je style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.je  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .jeLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
    width: 35px
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;*/
  }
  
  /* Links inside the dropdown */
  .jeLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .jeLinks a:hover {color: black;
    }
  
  /* Show the dropdown menu on hover */
  .je:hover .jeLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .je:hover .je td {color: white;}


    /* Slow style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.slow  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .slowLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
   width:35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .slowLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .slowLinks a:hover {color: black;}
  
  /* Show the dropdown menu on hover */
  .slow:hover .slowLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .slow:hover .slow td {color: white;}

     /* Sahara style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.sahara  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .saharaLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
  width: 35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .saharaLinks a {
    color:white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .saharaLinks a:hover {color: black;}
  
  /* Show the dropdown menu on hover */
  .sahara:hover .saharaLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .sahara:hover .sahara td {color: white;}

     /* Pause style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.pause  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .pauseLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
    width: 35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .pauseLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .pauseLinks a:hover {color: black;}
  
  /* Show the dropdown menu on hover */
  .pause:hover .pauseLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .slow:hover .pause td {color: white;}


     /* Nacht Machr style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.nacht  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .nachtLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
   width: 35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .nachtLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .nachtLinks a:hover {color: black;}
  
  /* Show the dropdown menu on hover */
  .nacht:hover .nachtLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .nacht:hover .nacht td {color: white;}


     /* Ne  style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.ne  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .neLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
    width: 35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .neLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .neLinks a:hover {color: black;}
  
  /* Show the dropdown menu on hover */
  .ne:hover .neLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .ne:hover .ne td {color: white;}

     /* Ahnin style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.ahnin  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .ahninLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
    width: 35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .ahninLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .ahninLinks a:hover {color: black;}
  
  /* Show the dropdown menu on hover */
  .ahnin:hover .ahninLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .ahnin:hover .ahnin td {color: white;}

     /* Spinnen style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.spinnen  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .spinnenLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
    width: 5vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .spinnenLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .spinnenLinks a:hover {color: black;}
  
  /* Show the dropdown menu on hover */
  .spinnen:hover .spinnenLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .spinnen:hover .spinnen td {color: white;}
  
  
  
  /* Sylvie style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.sylvie  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .sylvieLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
    width: 35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .sylvieLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .sylvieLinks a:hover {color:black;}
  
  /* Show the dropdown menu on hover */
  .sylvie:hover .sylvieLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .sylvie:hover .sylvie td {color: white;}


     /* Meanderer style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.meanderer  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .meandererLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
    width: 35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .meandererLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .meandererLinks a:hover {color: black;}
  
  /* Show the dropdown menu on hover */
  .meanderer:hover .meandererLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .meanderer:hover .meanderer td {color: white;}

     /* Meanderer style %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* The container <div> - needed to position the dropdown content */
.wind  {
    position: relative;
    /* display: inline-block; */
  }
  
  /* Dropdown Button */
  
  /* Dropdown Content (Hidden by Default) */
  .windLinks {
    display: none;
    position: relative;
    /* background-color: #233961; */
    width: 35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .windLinks a {
    color: white; 
    /* change color of links to white */
    padding: 0px 0px;
    /* remove big background */
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .windLinks a:hover {color: black;}
  
  /* Show the dropdown menu on hover */
  .wind:hover .windLinks {display: block; font-size: 2.5vw;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .wind:hover .meanderer td {color: white;}


@media screen and (max-width: 767px)
 {
   
	  .index{font-size:5vw;
		  padding:0 30px 250px 0px;
	}
	 .about
	 {
	 padding:0 10px 0 10px;
	 }
	  img{
		  width:150px;
		   height:150px;
		  margin-bottom:-8px;
	  }
	  
	  nav ul li{
     font-size: 6vw;
    }
    

dl{
font-size:3vw;
	 }
footer img{
height: 40px;
width: 40px;
}
}

//For 1024 Resolution  
@media only screen   
and (min-device-width : 768px)   
and (max-device-width : 1024px)  
{
	main, .index{
		padding-inline-start: 0px;
  font-size:3vw;
		background-size:cover;
		height:200%;
	}
  
}  


_::-webkit-full-page-media, _:future, :root .safari_only {
   height : auto;
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    @media {
        .safari6 { 
           height:auto;
        }
    }
}