* {
  box-sizing: border-box;
}

body {
  height: 100%;
  background-image: url(../images/background.jpg);
  color: black;
  font-size: 1em;
  font-family: 'Indie Flower', cursive;
}
/*I used 3 different fonts: for the menu MACONDO;
for the text of the site INDIE FLOWER and H1 always Luckiest Guy inkl. the colors of my bird.
This part contains the main CSS and the CSS of the Home-page.
*/
nav.menu {
  color: white;
  background-color: white;
  opacity:0.5;
  font-size: 29px;
  font-family: 'Macondo', cursive;
  margin-top:20px;
  margin-right:auto;
  margin-bottom:20px;
  margin-left:auto;
  padding-bottom: 10px;
  padding-top: 10px;
}

a.menu:hover {
  background-color: #f08386;
  padding-bottom: 10px;
  padding-top: 10px;
  border-radius: 10%;
  }
  
a.menu:active {
  color: black;
  border-radius: 10%;
  }

.menu {
  text-align: center;
  word-spacing: normal;
  text-decoration: none;
  padding-right: 20px;
  padding-left: 20px;
 
}

#current {
  text-decoration: none;
  background-color: #f08386;
  text-shadow: 0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15); 
  padding-bottom: 20px;
  padding-top: 20px;
  border-radius: 15%}
  

p, li, article {
  color: black;
  font-size: medium;
  font-family: 'Indie Flower', cursive;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: justify;
}

h1 {
  color:#f08386;
  font-size: 1.5em;
  font-family: 'Ultra', serif;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
h2 {
  color: black;
  font-size: 2em;
  font-family: 'Indie Flower', cursive;
  text-align: center;
}
h3 {
  color: black;
  font-size: 1.5em;
  font-family: 'Indie Flower', cursive;
  text-align: center;
}
.centered-text{
  text-align: center;
}
.footer {
  font-size: 11px;
  text-align: center;
  margin-top: 50px;
}
.images {
  text-align: center;
}
.zurueckzurhomepage{
  text-align: left;
}
.linknaechste-uebung{
  text-align: right;
}
.row{
 width: 900px;
 margin: 0px auto;
 position: relative;
 text-align: center;
 word-spacing: 50px;
}


.si{
 position: absolute;
 left: 0px;
 top: 0px;
 opacity: 0;
}
.si:hover{
 opacity: 1;
}

.image_container{
 display: inline-block;
 position: relative;
}
.boxofroundimage-home{
  width: 35%;
  float: left;
  padding: 0px 10px 0px 10px;
  margin:1.5%;
  text-align: justify;
  position: relative;
}

.roundimage-home {
  display: inline-block;
  margin: 40px auto;
  width: 250px;
  height:250px;
  border:1px ridge;
  border-radius: 50%;
  box-shadow: 4px 4px 2px gray;
  overflow: hidden;
}
.roundimage-home img {
  width: 101%;
}



/*Here the CSS of the 1st Page: Naehkurs1.html */

.roundimage {
  margin: 30px auto;
  width: 238px;
  height:238px;
  border:1px ridge;
  border-radius: 50%;
  box-shadow: 4px 4px 2px gray;
  overflow: hidden; 
}
.roundimage>img {
  width: 100%;
}

.boxofroundimage{
  width: 22%;
  float: left;
  padding: 0px 10px 0px 10px;
  margin:1.5%;
  text-align: justify;
  overflow: hidden;
}

.nextline{
  clear: both;
  height: 10px;
}
.map{
  text-align: center;
  padding-bottom: 50px;
}

#map{
  display: block;
}

#sperrbild_map {
    position: sticky;
    width: 70%;
    top: 5vh;
    left: 25vh;
    margin: auto;
    background-image: url(../images/background.jpg);
    opacity: 1;
    z-index: 1000;
    padding: 10px;
    display: none;
}
#richtigSpace{
  text-align: center;
  font-family: 'Macondo';
  color: #85aa1c;
  font-size: medium;
}

#unterdembild{
 text-align: center; 
}

.youtubevideo{
  display: inline;
  text-align: center;
}
.centerkolonnen{
  display: inline-block;
  text-align: center;
}
.kolonne1, .kolonne2, .kolonne3 {
   width: 33%;
   float: left;
   padding: 10px;
   text-align: justify;
}
   
   
#erste_uebung{
  padding-top: 30px;
  padding-bottom: 5px;
  text-align: center;
}

#sperrbild_map {
    display: none;
}

#fragebogenUebung2{
  text-align: justify;
  line-height: 2.5;
  margin: 10px 300px 10px 300px; 
  border: groove;
  border-bottom-width: thick;
  font-family: 'Macondo';
  font-size: medium;
  padding-left: 10px;
  }
  
  
.buttonundertext {
  font-size: 1em;
  font-family: 'Indie Flower', cursive;
  text-align: center;
  width: 120px;
  height: 25px;
  border: 1px solid #aaa;
  border-radius: 5px; 
  background: #eee;
  background-image: linear-gradient(#cdffbc, #6ec153);
  margin-left: 45%;
  margin-right: auto;
  
}

.buttoninwindow{
  width: 120px;
  height: 25px;
  border: 1px solid #aaa;
  border-radius: 5px; 
  background: #eee;
  background-image: linear-gradient(#cfe1f7, #0D61C6);
  margin-left: 45%;
  margin-right: auto;

}

#welcomeMessage{
  color:#f08386;
  text-align: center;
  font-size: 1.5em;
  font-family: 'Ultra', serif;
}
  
.quizz{
  display: none;
  text-align: center;
  border-style: solid;
  border-radius: 10%;
  border-color: #85aa1c;
  background: #ffffff;
  border: dotted;
  opacity: 0.8;
  margin: 50px 300px 50px 300px;
  padding: 15px 15px 15px 15px;
}


.panel{
  text-align: center;
}

#richtigSpace{
  display: none;
}

.nextbuttonquizz{
  text-align: center;
  font-family: 'Macondo';
  color: #85aa1c;
  font-size: medium;
  display: none;
}

#bravo{
   display: none;
}

#forquizztodisappear3 #forquizztodisappear1 #forquizztodisappear4 #ichbinbereit #unterdembild #aufgehts{
  display: block;
}

#erste_uebung_map img {
  width: 50%;
}

  
  
/*Here the CSS of the 2nd page: Naehkurs2.html*/

.schnittmuster {
 text-align: justify;
 margin: 10px 60px 40px 40px;
 background-color: white;
 opacity: 0.5;
 border: dotted;
}
.schnittmusterbild {
  text-align: center;
  margin-bottom: 10px;
}

/*Here is the CSS of the 3rd page: Naehkurs3.html*/

.creativlaborberlin{
  font-size: 11px;
}
.textaround{
  vertical-align: middle;
}
.imagefloatleft{
  float: left;
  padding-left: 5px;
  padding-right: 10px;
}
/*Here is the CSS of the 4th page: Naehkurs4.html*/

#mc-embedded-subscribe-form {
  font-family: 'Indie flower', cursive;
  color: #85aa1c;
  font-size: large;
  list-style: none;
  border-style: solid;
  border-radius: 10%;
  border-color: #85aa1c;
  background: #ffffff;
  opacity: 0.8;
  margin: 50px 300px 50px 300px;
  padding: 15px 15px 15px 15px;
  text-align: left;
  
}

.image_jstest {
    visibility: hidden;
}

.page{
    display: none;
}

#sperrbild {
    background-color: white;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh; 
    z-index: 100;
    opacity: 0.5;
    display: none;
    }
    
#sperrbild_inhalt {
    position: fixed;
    width: 70%;
    top: 5vh;
    left: 25vh;
    margin: auto;
    background-image: url(../images/background.jpg);
    opacity: 1;
    z-index: 1000;
    padding: 10px;
    display: none;
}