* {
  box-sizing: border-box;
  font-family: Verdana, Arial, sans-serif;  
}

.Darktheme {
 /* background: linear-gradient(to right, #008000 0%, #006600 100%);*/
  background: darkgoldenrod;
  border: 2px solid black;
 /* color: rgb(156, 147, 147);*/
  color: darkblue; 
}

.Lighttheme {
 /* background: linear-gradient(to right, #90ee90 0%, #66ff99 100%);*/
  background: lightgreen;
 /* border: 2px solid green; */
 border: 2px solid blue;
 /* color: black;*/
 color: black; 
}

        body {
          font-size: 1.1em;          
          background: linear-gradient(to bottom right, #add8e6 2%, #0066ff 80%);
          color:black;
          
          }

          /*Darkmode of background*/
          .dark-mode {
            background: linear-gradient(to right, #10085e 0%, #006666 100%);
            color: rgb(156, 147, 147);
          }

        .download {
          color: darkslategrey;
          text-decoration: none;
          padding: 1px;
        }

        .download:hover, .download:active {
          color: red;
        }

.Titel {              
 background:  #90ee99;
 animation-iteration-count: infinite;
 animation-name: colorC;
 animation-duration: 20s;
  text-align: left;   
  z-index: 10; 
  height: auto;
  padding: 8px 20px;
  margin-bottom: 4px;
  color:black;
  }
    
  /*Darkmode for title*/
.Titel-dark {
  background:#003500;
  animation-iteration-count: infinite;
  animation-name: colorCdark;
  animation-duration: 8s;
   color: whitesmoke;
   text-align: left;           
   z-index: 10; 
   height: auto;
   padding: 8px 20px;
   margin-bottom: 4px;
}
      
    nav  {
      position: sticky;
      top: 0px;  
      z-index: 10; 
      }

    nav div {           /*Container for flexbox (NavBar) */
      display: flex; 
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      justify-content: space-between;      
    }

     a.nav {  /*Elements for Flexbox --> the Buttons (NavBar)  */
        flex: 1; 
        z-index: 7;            
        text-decoration: none;
        text-align: center;             
        border-radius: 2px;                
        padding-top: 10px; 
        height: 50px;
        margin-right: 1px;
        margin-bottom: 2px;
        min-width: 240px;  
        cursor: pointer;   
        z-index: 8;                   
      }
   

      /*Dropdown NavigationBar*/    
       .dropbtn {
        font-size: 16px;
        padding-bottom: 10px;  
        flex: 1;                
        padding-top: 10px; 
        height: 50px;
        margin-right: 1px;
        margin-bottom: 2px;
        min-width: 240px;  
        cursor: pointer;  
        z-index:9; 
      }     

      .dropdown-content { 
        display: none;
        position: absolute;
        top: 52px;
        left: 0;
        width: 100%;
        z-index: 1;     
      }      
      
      .show, .dropdown-content a {
        display: block;
      }

      /*Titel*/
      /*__________________________________________________________________________________________________*/
      h1.Titel {
        max-width: 83%;
        margin-left: 5%;
     }

    h2 {
        text-align: center;       
    }

    h3            /* Übertitel der Prüfungen*/ {
    border-bottom: 2px groove black; /*Hier könnte jedweils die Hintergrundfareb, aber dünkler sein */
    background-color: rgb(77, 147, 212);
    color:black;
    padding: 10px;
    }

    section.exam {  /*Hintergrund Prüfungen */
      background-color: greenyellow;
      padding: 10px;
    }

    section.summary {  /*Hintergrund Prüfungen */
      background-color: lightsalmon;
      padding: 10px;
    }

            
    div.Button {  /*Container for Flexbox (Fächerbuttons) */
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      justify-content: space-between;
    }

    a.Button {  /*Elements for Flexbox (Fächerbuttons-Buttons) */
        flex: 1;
        text-align: center;
        padding: 60px 0px; 
        margin: 5px;
        min-width: 250px;       
        border-radius: 5px;      
        text-decoration: none;
        cursor: pointer;  
    }
    a.closed {
      cursor: not-allowed;
      opacity: 0.6;
    }



            /*generally links*/
    .link:link, .link:visited { 
        text-decoration: none;  /*Disable underline*/
        color: black;  
        text-align: center;      
        border-radius: 5px;          
      }   
      .link:hover, .link:active link:focus {  /*Mark links as such on hover*/
        text-decoration: none;
        color:blue; 
      }
 

      /* Section for Image Gallery (Backdrop of images) */
      div.gallery { 
        border: 1px solid #ccc;
        background-color: rgba(53, 58, 54, 0.781);
        box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.4), 0 8px 30px 0 rgba(0, 0, 0, 0.3);
        text-align: center;
      }
      
      div.gallery:hover {
        border: 1px solid #777;       
      }
      
      div.gallery img {
      width: 100%;        
      }

      div.gallery embed {
        width: 100%;
        height: 400px;
      }
      

      div.desc {      /*Beschreibungstexte für PDF's*/
        padding: 15px;
        height: 100px;
        text-align: center;
        background-color: grey;
        vertical-align: bottom;
      }
 
      section.flex {  /*Container for Flexbox (Bilder-Box) */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: left;
        justify-content: space-between;
      }
    
  
      div.flex {      /*Elements for Flexbox (Bilder) */
          flex: 1;   
          min-width: 220px;  
          padding: 0 4px; 
          margin: 5px 2px;         
      }


                      /*Die Physik sektionen sind standardmässig nicht sichtbar.*/
            #panel4,#panel5, #panel6, #panel7 {
              display: none;
            }

 /*Sliders  ______________________________________________________________________________________________________________-*/         
/* The switch - the box around the slider */
span.Slidr {
  float:right;
}

.switch {
  position: relative;
  bottom:97px;
  right:10px;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switchD {
  position: relative;
  bottom:0px;
  right:0px;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(288px);
  -ms-transform: translateX(28px);
  transform: translateX(28px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}

/*Field for Darkmode Button*/
div.Darkmode {
  position: fixed;
  right: 0px;
  bottom: 0px;  
  padding: 3px;
  border-radius: 1px;
  z-index: 10;
  vertical-align: middle;
}


/*Sizing for the navbar*/
@media screen and (max-width: 800px) {  
  .navbar {
  display: flex; }
  .navbig {
  display: none;}
  .faviHome {
    display: none;}
}

@media screen and (min-width: 800px) {
  .navbar {
  display: none; }
  .navbig {
  display: flex;}
  .faviHome {
    display: block;
    float: right; }
}

/*Colorcahnge of the Title 
@keyframes colorC {
  0% {background-color: #90ee90;}
  50% {background-color: #73d473;}
  0% {background-color: #90ee90;}
  
}

@keyframes colorCdark {
  0% {background-color: #003500;}
  50% {background-color: #006500;}
  0% {background-color: #003500;}
}*/

/* ScrollBar */
.scroll-container {
  width: 100%;
  height: 8px;
  background: #ccc;
  position:fixed;
  bottom: 0px;
}

.scroll-bar {
  height: 8px;
  background: #73d473;
  width: 0%;
}


/*ToDoListe*/

ul li {
  position: relative;
  padding: 12px 8px 12px 40px;
  background: linear-gradient(to right, rgba(250,250,250,0.6) 0%, rgba(250,250,250,0.1) 8%); 
}

/* zebra-stripes */
ul li:nth-child(odd) {
  background: linear-gradient(to right, rgba(200,200,200,0.6) 0%, rgba(200,200,200,0.1) 16%);
}

/* Darker background-color on hover */
ul li:hover {
  background: linear-gradient(to right, rgba(150,150,150,0.6) 0%, rgba(150,150,150,0.1) 35%);
}