* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html {
  background: rgb(186, 255, 255);
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;

  background-color: rgb(186, 255, 255);
  background: rgb(186, 255, 255);
  
}
header {
  width: 100%;
  position: fixed;
  z-index: 10;
}

.header-img-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: center; */
  background-color: rgb(87, 146, 148);
  z-index: 10;
}

.header-img-div img {
  height: 100px;
  width: 150px;
  z-index: 10;
}

.ptxt {
  padding: 0;
  margin: 0;
  display: inline;

  font-weight: 600;
  font-size: 30px;
  font-family: "Times New Roman", Times, serif;
}

.navbar {
  display: flex;

  position: relative;
  /*flex-direction: row;*/
  /* justify-content: space-between;
        align-items: center;  */

  height: 40px;

  background-color: rgb(58, 117, 117);
  color: white;
  z-index: 10;
}

/* .brand-title {
        font-size: 1.5rem;
        margin: .5rem;
      } */

.navbar-links {
  height: 100%;
}

.navbar-links ul {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /*Intha idathil thal ul lil ulla text yai left or right align pannugirom*/
  /* justify-content: flex-start; */

  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  display: block;
  text-decoration: none;
  color: #fff;
  /* font-size: 25px; */
  font-weight: normal;
  text-align: center;

  /* padding: 1rem; */

  padding: 10px;
}

.navbar-links li:hover {
  background-color: rgb(87, 146, 148);
  border-radius: 5px;
  padding: 0px;
}

.toggle-button {
  position: absolute;
  /* top: .75rem; */
  left: 2rem; /* intha idathil than toggle button left right aga marum*/
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

@media only screen and (min-width: 360px) and (max-width: 767px) {
  .navbar {
    flex-direction: column;
  }

  .toggle-button {
    top: 10px;
    display: flex;
  }

  .navbar-links {
    /* background-color: black; */
    margin-top: 37px;
    display: none;

    width: 100%;
  }

  .navbar-links ul {
    background-color: rgb(58, 117, 117);
    opacity: 0.8;

    /* width: 100%; */
    width: 40%;
    flex-direction: column;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

    /* align-items: flex-start; */
  }

  .navbar-links ul li {
    text-align: left;
  }

  .navbar-links li a {
    font-size: 25px;
  }

  .navbar-links ul li a {
    padding: 0.5rem 1rem;
  }

  .navbar-links.active {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /*Intha idathil than ul li yai left right aga matta mudiyum*/
  }
}

.sticky {
  position: fixed;
  top: 10px;
  width: 100%;
}
h1 {
  top: 150px;
}

/* --------------------------------------------------------------------- */
/* --------Begin Home -------------- */
/* ---------------------------------------------------------------------- */
.home-div {
 
  margin: 0 auto;
  background-color:#89b0ae;
  width: 80%;
  height: 130vh;


}

.hcontainer{
 width: 75%;
 top:100px;
 margin: 0 auto;
 background-color: #89b0ae;

}

.hcontainer .para1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.hcontainer .para1 img {
  margin-top: 200px;
  width: 55%;
  height: 412px;
  border-radius: 20px;
  box-shadow: 15px 15px 10px #253c3b;
  margin-bottom: 40px;
  }

.hcontainer .para1 p{
  display: block;
  font-size: 25px;
  font-style: oblique;
  font-weight: 700;
  z-index: 999;
  width: 90%;
}

#para1h1{
  color: rgb(80, 38, 9);
  text-align: left;
  font-size: 40px;
   font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.hcontainer ul{
  font-size: 25px;
  font-style: oblique;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 30px;
}

@media only screen and (min-width: 360px) and (max-width: 767px) {
  .home-div {
    width: 100%;
    
  }
  .hcontainer {
    width: 90%;
  }
  
  .home-div h1{
    margin-left: 10px;
  }
  
}
  
  
  
  
  


/* --------------------------------------------------------------------- */
/* --------End Home -------------- */
/* ---------------------------------------------------------------------- */
  





/* --------------------------------------------------------------------- */
/* --------Carousel -------------- */
/* ---------------------------------------------------------------------- */

.carousel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.image-container {
  margin-top: 350px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}

.image-container img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  /* padding: 2px;  */
  position: absolute;
}

.buttons-container {
  margin-top: 150px;
  display: flex;

  justify-content: space-between;
}
.btn {
  background-color: rebeccapurple;
  color: #fff;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  width: 49.5%;
}

.btn:hover {
  opacity: 0.9;
}

.btn:focus {
  outline: none;
}

/* body {
        font-family: 'Roboto', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
      } */

/* .carousel {
         top:200px;
        /*margin-left: 600px; 
        margin: 0 auto;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        height: 430px;
        width: 400px;
        overflow: hidden;
      }
      
       .image-container {
       
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        transform: translateX(0);
        transition: transform 0.5s ease-in-out;
      }

      .image-container img {
         width: 400px;
        height: 400px;
        object-fit: cover; 
        display: block;
        width: 100%;
        height: 400px;
        object-fit: cover;
        object-position: center;
      }
       
      .buttons-container {
        display: flex;
        justify-content: space-between;
      }
      
      .btn {
        background-color: rebeccapurple;
        color: #fff;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        width: 49.5%;
      }
      
      .btn:hover {
        opacity: 0.9;
      }
      
      .btn:focus {
        outline: none;
      } */

/* --------------------------------------------------------------------- */
/* --------End Carousel -------------- */
/* ---------------------------------------------------------------------- */




/* --------------------------------------------------------------------- */
/* --------Begin Chemie -------------- */
/* ---------------------------------------------------------------------- */

.chemie-div {
 
  margin: 0 auto;
  background-color:#89b0ae;
  width: 80%;
  height: 100%;


}
.chemie-div h1{
  margin-top: 150px;
  margin-left: 60px;
  margin-bottom: 20px;
  color: rgb(80, 38, 9);
  text-align: left;
  font-size: 40px;

  /* margin-left: 7%;
  margin-top: 2%; */
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
}
.container{
 width: 75%;
 top:100px;
 /* margin-top: 400px; */
 margin: 0 auto;
 background-color: #89b0ae;

}

.chemie-div p{
  font-size: 20px;
  font-style:normal;
  margin-bottom: 30px;
}
.chemie-div img {
  width: 300px;
  height: 300px;

}

.container .para1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* padding: 10px;
  float: left; */

}

.container .para1 img {
  width: 500px;
  height: 400px;
  /* border: #253c3b; */
  border-radius: 20px;
  box-shadow: 15px 15px 10px #253c3b;
  margin-bottom: 40px;
  
}

.container .para2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.container .para2 img{
 width: 350px;
  border-radius: 10px;
  margin-bottom: 40px;
}

.container .para4 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.container .para4 img{
 width: 350px;
  border-radius: 10px;
  margin-bottom: 40px;
}

.container .para5 p {
 display: block;
 text-align: center;
 color: #694f5d;
 font-size: 35px;
 font-weight: bolder;
 font-style:oblique;

}

.container .para6 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.container .para6 img{
 width: 350px;
  border-radius: 10px;
  margin-bottom: 40px;
}

@media only screen and (min-width: 360px) and (max-width: 767px) {
  .chemie-div {
    width: 100%;
  }
  .container {
    width: 90%;
  }
  .container p {
    font-size: 20px;
  }
  .chemie-div h1{
    margin-left: 10px;
  }
  .container .para1 img{
    width: 328px;
    height: 328px;
  }
  .chemie-div p{
    /* font-size: 20px;
    font-style:normal; */
    margin-bottom: 10px;
  }
  .chemie-div img {
    width: 200px;
    height: 200px;
  
  }
  
  
  .container .para1 img {
    width: 300px;
    height: 200px;
    /* border: #253c3b; */
    border-radius: 20px;
    box-shadow: 15px 15px 10px #253c3b;
    margin-bottom: 40px;
    
  }
  
  .container .para2 {
    /* display: flex; */
    flex-direction: column;
    /* justify-content: space-around; */
    align-items: center;
  }
  
  .container .para2 img{
   width: 250px;
    border-radius: 10px;
    margin-bottom: 40px;
  }
  
  .container .para4 {
    /* display: flex; */
    flex-direction: column;
    /* justify-content: space-around; */
    align-items: center;
  }
  
  .container .para4 img{
   width: 250px;
    border-radius: 10px;
    margin-bottom: 40px;
  }
  
  /* .container .para5 p {
   display: block;
   text-align: center;
   color: #694f5d;
   font-size: 35px;
   font-weight: bolder;
   font-style:oblique;
  
  } */
  
  .container .para6 {
    /* display: flex; */
    flex-direction: column;
    /* justify-content: space-around; */
    align-items: center;
  }
  
  .container .para6 img{
   width: 250px;
    border-radius: 10px;
    margin-bottom: 40px;
  }
}




/* --------------------------------------------------------------------- */
/* --------End Chemie -------------- */
/* ---------------------------------------------------------------------- */
  



/* --------------------------------------------------------------------- */
/* --------Begin Wasser-------------- */
/* ---------------------------------------------------------------------- */


.wasser-section{
  width: 80%;
  height: 410vh;
   margin-top: 150px; 
  background-color:#3cb4bf   ;
  margin: 0 auto;
}
.wasser-para1 h1{
  margin-top: 150px;
  margin-left: 10%;
  text-align: left;
  color:#030e13 ;
  font-size: 35px;
  font-weight: 700;
  text-decoration-style: wavy;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  margin-bottom: 10px;
  
}
.preWasser{
  margin-left: 10%;
  font-family:sans-serif;
  font-size:x-large;
  color:black;
}
.wasser-para2and3-wrap{
  width: 70%;
  
  margin-left: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  /* border: 2px solid black; */
}

.wasser-para2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}

.wasser-para2 img {
  position: absolute;
  left:10px;
  top: 40px; 
  width:228px; 
  height:228px;
  transform: translate(-200px,-50px);
}
.bubble {
  position: absolute;
  left:9px;
    margin-top: 90px; 
 /* margin-left: 15%; */
  background: #67a0cf;
  color: #1c4e6b;
  font-family: Arial;
  font-size: 21px;
  line-height: 120px;
  box-shadow: 9px 5px 2px 1px #A3A3A3;
  text-align: center;
  width: 250px;
  height: 120px;
  border-radius: 10px;
  padding: 0px;
  transform: translate(10px,-100px);
  
}
.bubble:after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  /* z-index: 1; */
  border-style: solid;
  border-width: 57px 35px 0 0;
  border-color: #67a0cf transparent transparent transparent;
  bottom: -57px;
  left: 10%;
  margin-left: -17.5px;
} 

.wasser-para3 {
   margin-top: 300px; 
  /* margin-left: 10%; */
  text-align: left;
}
.wasser-para3 h4{
  font-size: 22px;
  font-style: oblique;
  margin-bottom: 5px;
}
.wasser-para3 ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 40px;
}


.wasser-para3 ul li{
  font-size: 20px;
}

.toptxt{
  font-size: 20px;
  text-align:center;
  margin-top: 10px;
  
}

.icon-arrow{
  width: 150px;
  height: 4px;
  border-radius: 2px;
  background-color: black;
  position: relative;
  top:50px;
  


}

.icon-arrow::after{
content: "";
display: inline-block;
border-radius: 2px;
width: 20px;
height: 4px;
background-color: black;
transform: rotate(45deg);
position:absolute;
right: -3px;
bottom: 7px;


}
.icon-arrow::before{
content: "";
display: inline-block;
border-radius: 2px;
width: 20px;
height: 4px;
background-color: black;
transform: rotate(-45deg);
position:absolute;
right: -3px;
bottom: -7px;


}

.icon-arrow-left{

width: 150px;
  height: 4px;
  border-radius: 2px;
  background-color: black;
  position: relative;
  top:90px;
}

.icon-arrow-left::after{
content: "";


display: inline-block;
border-radius: 2px;
width: 20px;
height: 4px;
background-color: black;
transform: rotate(135deg);
position:absolute;
left: -3px;
bottom: 7px;


}
.icon-arrow-left::before{
content: "";
display: inline-block;
border-radius: 2px;
width: 20px;
height: 4px;
background-color: black;
transform: rotate(-135deg);
position:absolute;
left: -3px;
bottom: -7px;


}

.wasser-para4{
  margin-top: 110px;
  margin-left: 4%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
}
.wasser-para4 ul {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.wasser-para4 ul li{
  font-size: 25px;
  font-weight: 450;
}

.wasser-para5{
  display: block;
  text-align: left;
  margin-top: 40px;
  margin-left: 10%;
  font-family:sans-serif;
  font-size:x-large;
  color:black;
}
.wasser-para5 div{
  width: 75%;
}

.wasser-para6 img{
  height: 128px;
  width: 128px;
}
.wasser-para6{
  margin-top: 40px;
  margin-left: 4%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.wasser-para7{
  /* display: block; */
  text-align: left;
  margin-top: 40px;
  margin-left: 10%;
  font-family:sans-serif;
  font-size:x-large;
  color:black;
}
.wasser-para7 div{
  width: 75%;
}
.wasser-para8 {
  width: 80%;
  margin-top: 80px;
  margin-left: 25%;
 
 
}
.wasser-para8 img{
  
  width: 70%;
  height:auto;
  
}

.spanWas{
  font-size: 30px;
}
@media only screen and (min-width: 360px) and (max-width: 767px) {
.wasser-section{
  width: 100%;
  height: 100%;
   margin-top: 150px; 
  background-color:#3cb4bf   ;
  margin: 0 auto;
}
 
.wasser-para2and3-wrap{
  width: 100%;
  margin-top: 120px;
  margin-left: 0%;
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  
}

.wasser-para2 {
  /* display: flex; */
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  /* position: relative; */
}

.wasser-para2 img {
  /* position: absolute; */
  left:1px;
  
} 
.bubble {
  
  left:0px;
    margin-top: 90px; 
    
    line-height: 25px;
  width: 150px;
  height: 60px;
  
  
}
.bubble:after {
  
  bottom: -46px;
  left: 10%;
  margin-left: -14.5px;
}  

.wasser-para3 {
   
   margin-left: 10%;
  
  
}

.wasser-para4{
 
  flex-direction: column;
   align-items: center;
 
}
 .wasser-para4 ul {
  
  flex-direction: column;
 
}

.wasser-para4 .img2{
  margin-top: 130px;
}
.wasser-para4 .img3{
  margin-top: 130px;
}



.wasser-para6{
  
  flex-direction: column;
  align-items: center;
 
}


.wasser-para7 div{
  width: 95%;
}
.wasser-para8 {
  margin-top: 60px;
  margin-left: 3%;
}


.wasser-para8 img{
 
  width: 328px;
  height: 228px;
}

}
/* --------------------------------------------------------------------- */
/* --------End Wasser-------------- */
/* ---------------------------------------------------------------------- */



/* --------------------------------------------------------------------- */
/* --------Begin Physik-------------- */
/* ---------------------------------------------------------------------- */


.physik-section{
  width: 80%;
  height: 200vh;
   margin-top: 150px; 
  background-color:#3cb4bf   ;
  margin: 0 auto;
}
.physik-section h1{
  margin-top: 150px;
  margin-left: 10%;
  text-align: left;
  color:#030e13 ;
  font-size: 35px;
  font-weight: 700;
  text-decoration-style: wavy;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  margin-bottom: 10px;
  
}

.physik-para1{
  width: 80%;
  display: flex;
  flex-direction: row;
  align-items: center;
  
 
}

.physik-para1 p{
  display: block;
  width: 600px;
  font-size: 20px;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-left: 250px;
  text-align: left;
  align-content: center;
  /* margin-right: 30px; */
}

.physik-para1 img{
  width: 328px;
  height: 248px;
  margin-left: 40px;
  border-radius: 20px;
  box-shadow: 15px 15px 10px #030e13;
}
.physik-para2{
  width: 80%;
  margin-top: 120px;
  margin-left: 16%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

}

.physik-para2 .img1{
  /* margin-left:80px; */
  width: 228px;
  height: 228px;
  border-radius: 20px;
  box-shadow: 10px 10px 5px #030e13;
  transition: transform .5s ease-in ;
}
.physik-para2 img:hover{
  transform: scale(1.1);
}


.physik-para2 div{
  margin-left:80px;
  margin-top: 40px;
  width: 200px;
  height: 200px;
  align-content: center;
  font-size: 20px;
}

.physik-para2 .img2{
  width: 228px;
  height: 228px;
  margin-left:80px;
  border-radius: 20px;
  box-shadow: 10px 10px 5px #030e13;
  transition: transform .5s ease-in ;
}

@media only screen and (min-width: 360px) and (max-width: 767px) {
  .physik-section{
    width: 100%;
    height: 300vh;
     margin-top: 150px; 
    background-color:#3cb4bf   ;
    margin: 0 auto;
  }
   
  .physik-para1{
   width: 100%;
    flex-direction: column;
    align-items: center;
    
   
  }
  
  .physik-para1 p{
   
    width: 300px;
    margin-left: 2px;
    text-align: left;
    margin-bottom: 20px;
    
  }
  
  .physik-para1 img{
  
    width: 300px;
    height: 300px;
    margin-left: 4px;
   
  }
  .physik-para2{
    width: 100%;
    margin-top: 40px;
    margin-left: 2px;
    
    flex-direction: column;
    align-items: center;
   
  
  }
  
  .physik-para2 .img1{
    width: 300px;
    height: 300px;
    
  }
  
  
  
  .physik-para2 div{
    margin-left:10px;
    margin-top: 40px;
   
    font-size: 25px;
  }
  
  .physik-para2 .img2{
    width: 300px;
    height: 300px;
    margin-left:8px;
   
  }
  
 

}
/* --------------------------------------------------------------------- */
/* --------End Physik-------------- */
/* ---------------------------------------------------------------------- */




/* --------------------------------------------------------------------- */
/* --------Begin Elektrizitaet-------------- */
/* ---------------------------------------------------------------------- */


.electrik-section{
  width: 80%;
  height: 600vh;
   margin-top: 150px; 
  background-color:#80c0c4  ;
  margin: 0 auto;
  
}
.ele-heading{
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  
}

.ele-heading img{
  /* margin-top: 150px;  */
  height: 60px;
  width: 300px;
  /* margin-left:30%; */
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: absolute;
  transform: skewX(-25deg);
  
}
.ele-heading h1{
  /* margin-top: 150px; */
  /* margin-left: 10%; */
  /* text-align: left; */
  top:-24px;
  color:#e5ecef ;
  font-size: 45px;
  font-weight: 700;
  text-decoration-style: wavy;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  text-shadow: 5px 5px 10px #e3dfd9;
  /* margin-bottom: 10px; */
  position: absolute;
  
}

.elec-para1{
  width: 80%;
  margin-left: 20%;
  margin-top: 170px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.elec-para1 .p1-div{

  width: 400px;
  height: auto;
  font-size: 22px;
  font-family:'Times New Roman', Times, serif;
  color: #08205b;
  
  

}
.p1-div p{
margin-top: -120px;
  display: block;
  text-align: left;
  
  
}
 .p2-div{
 width: 700px;
} 


.p2-div img{
  margin-top: -80px;
  margin-left: 20%;
  margin-bottom: 5px;
  border-radius: 10px;
}
.p2-div p{
  margin-left: 16%;
  font-style: oblique;
  font-weight: bold;
  color: #bb3e03;
  text-shadow: 5px 5px 10px black;
 

}
.elec-para2{
  width: 80%;
  margin-left: 19.5%;
  margin-right: 7%;
  margin-top: 3%;
}
.elec-para2 p{
  display: block;
  width: 70%;
  font-size: 25px;
  color: #08205b; 
  /* color: #862912; */
}

.elec-para3{
  width: 80%;
  margin-left: 19.5%;
  margin-right: 7%;
  margin-top: 50px;
}
.elec-para3 h4{
  font-size: 22px;
  margin-bottom: 7px;
  font-style: italic;
 font-weight: 700;
 text-decoration: underline;
 color: #020610; 
}


.elec-para3 p{
  display: block;
  width: 75%;
  font-size: 22px;
  margin-left: 15px;
  color: #08205b; 
}

.elec-para4{
  width: 80%;
  margin-left: 12.5%;
  margin-top: 70px;
  display: flex;
  justify-content: center;
}
.elec-para4 img{
  width: 448px;
  height: 228px;
}

@media only screen and (min-width: 360px) and (max-width: 767px) {
  .electrik-section{
    width: 100%;
    height: 300vh;
    
    
  }
   
   .elec-para1{
    width: 100%;
    margin-top: 180px;
    margin-left: 2%;
    
    flex-direction: column;
    align-items: center;
    
  }
  .elec-para1 .p1-div{
    width: 300px;
   
  
  }
   .p2-div{
    margin-top: 100px;
   width: 300px;
  } 
  
  
  .p2-div img{
    margin-top: -80px;
    margin-left: 9%;
    margin-bottom: 5px;
    border-radius: 10px;
  }
 
 .elec-para2{
    /* width: 300px; */
    width: 100%;
    margin-left:8%;
    margin-top: 40px;
  }
  
  
  .elec-para3{
    width: 300px;
    margin-left: 9%;
    margin-top: 40px;
  }
  
  
  
  .elec-para3 p{
    font-size: 22px;
    margin-left: 15px;
    color: #08205b; 
  }
  
  .elec-para4{
    width: 300px;
    margin-left: 9%;
    /* margin-top: 70px;
    display: flex;
    justify-content: center; */
  }
  .elec-para4 img{
    width: 328px;
    height: 228px;
  }
  
 

}


/* --------------------------------------------------------------------- */
/* --------End Elektrizitaet-------------- */
/* ---------------------------------------------------------------------- */




/* ______________________________________________________________________ */
/* Biologie */


.bio-section{
  width: 80%;
  height: 300vh;
   margin-top: 150px; 
  background-color:#3cb4bf   ;
  margin: 0 auto;
}
.leftside{
  margin-top: 150px; 
   margin-left: 90%;
   z-index: 10;
   border: 3px solid black;
}


.bio-section h1{
  margin-top: 150px; 
  text-align: center;
  color: rgb(25, 53, 53);
  font-size: 55px;
  font-family: serif;
  font-weight: 700;
  text-shadow:0 1px 0px #216080, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 
              2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 
              4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 
              6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd;
   color: #200705;;

}

.bio-para1{
  width: 80%;
  margin-top: 90px;
  margin-left: 12%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.bio-para1 img{
  margin-top: 10px;
  margin-right:50px ;
  border-radius: 10px;
}

.bio-para1 p{
  display: block;
  width: 800px;
  margin-top: 30px;
  font-size: 30px;
  color:#2a331c
}

.bio-para2{
  width: 80%;
  /* width: 1200px; */
  height: auto;
  margin-top: 100px;
  margin-left: 8%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content:space-around;
}

.bio-para2 img{
  width: 228px;
  height: 228px;
  border-radius: 10px;
}

.bio-para2 .para2-pdiv{
  width: 328px;
  /* height: 228px; */
  height: auto;
}
.para2-pdiv p{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 10px;
  font-size: 25px;
  text-align: left;
 
}

.bio-para3{
  width:80%;
  margin-top: 13%;
  margin-left: 8%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content:space-around;

}

.para3-divul p{
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 5px;
}

.para3-divul ul li{
  font-size: 20px;
  margin-left: 40px;
}
.bio-para3 img{
  width: 268px;
  height: 228px;
  border-radius:60%;
}

.para3-div h5{
  font-size: 23px;
  margin-bottom: 5px;
}

.para3-div p{
  font-size: 22px;
  
}
.para3-div span{
  font-size: 35px;
}










.bioPara{
  text-align:left;
  font-size:120%;
  color : rgb(14, 43, 14);
}

  

.imgbio1{
  margin-left: 0.2%;
  

}
.imgbio1:hover{
  src: url(/images/biologie1.jpg);
  transform: scale(.98);
  ;
}
.bioh5{
  text-decoration: underline;
}
.arrsp{
font-weight: 500;
font-size: 180%;

}
.bioPara1{
  text-align: left;
  line-height: 0.3cm;
}


@media only screen and (min-width: 360px) and (max-width: 767px) {
  .bio-section{
    width: 100%;
    height: 400vh;
    
  }

  .bio-para1{
    margin-top: 30px; 
    margin-left: 2%;
    
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .bio-para1 img{
    margin-top: 10px;
    margin-right:50px ;
    border-radius: 10px;
  }
  
  .bio-para1 p{
   
    width: 300px;
   
  }
  
  .bio-para2{
    width: 300px;
    margin-top: 80px;
    margin-left: 2%;
   
    flex-direction: column;
    align-items:center;
    justify-content:center;
  }
  
  .bio-para2 img{
   margin-bottom: 20px;
  }
  
  .bio-para2 .para2-pdiv{
    width: 328px;
    height: 228px;
  }
  .para2-pdiv p{
    margin-top: 10px;
    margin-left: 6%;
    font-size: 25px;
    text-align: left;
   
  }
  
  .bio-para3{
    width: 300px;
    margin-top: 80px;
    margin-left: 2%;

    flex-direction: column;
    align-items: center;
    justify-content:center;
  
  }
  
  .para3-divul p{
    margin-left: 5%;
    margin-bottom: 15px;
  }
  
  .para3-divul ul li{
    font-size: 20px;
    margin-left: 50px;
    margin-bottom: 15px;
  }
  .bio-para3 img{
    margin-top: 15px;
    
  }
  
  .para3-div h5{
    margin-left: 5%;
   
    margin-bottom: 5px;
  }
  
  .para3-div p{
    margin-left: 5%;
    
  }
 
  

}

/* --------------------------------------------------------------------- */
/* --------Begin Quiz -------------- */
/* ---------------------------------------------------------------------- */
.quiz-section{
  width: 80%;
  height: 200vh;
   margin-top: 150px; 
  background-color:#3cb4bf   ;
  margin: 0 auto;
}

.quiz-section h1{
  margin-top: 150px;  
  font-size: 45px;
  text-align: center;
  color: #9e2c3f;
}
.tableContainer {
  height: max-content;
  width: max-content;
  align-items: center;
  margin-left: 250px;
  display: flex;
  flex-direction: row;
  
  
}
table {
  padding: 10px;
}
th, tr{
  padding: 25px 15px;
  text-align: left;
}
input {
  align-items: center;
}

td {
  padding: 20px;
  
}

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: chocolate;
}
.btnCorrect{
  background-color: rgb(41, 41, 155);
  color: white;
  border-color: rgb(41, 41, 155);
  border-radius: 5px;
}
#btnCorrect:active{
background-color: cornsilk;
}
.square {
  height: 50px;
  width: 50px;
  background-color: blueviolet;
}
.rectangle {

  height: 50px;
  width: 80px;
  background-color: darkolivegreen;
}


@media only screen and (min-width: 360px) and (max-width: 767px) {
  .quiz-section{
    width: 100%;
    height: 300vh;
     margin-top: 150px; 
    background-color:#3cb4bf;
    margin: 0 auto;
  }
  
  /* .quiz-section h1{
    margin-top: 150px;  
    font-size: 45px;
    text-align: center;
    color: #9e2c3f;
  } */
  .tableContainer {
    /* height: max-content;
    width: max-content;
    align-items: center; */
    margin-left: 2px;
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    
    
  }
  table {
    padding: 10px;
  }
  th, tr{
    padding: 2px 1px;
    text-align: left;
  }
  /* input {
    align-items: center;
  } */
  
  td {
    padding: 2px;
    
  }
  
  
  

}





/* --------------------------------------------------------------------- */
/* --------End Quiz-------------- */
/* ---------------------------------------------------------------------- */