body{
    padding-top: 100px;
    background-color: #ABBCD1;
    margin:0;
}

h1{
    color: rgb(218, 4, 4);
    font-weight: bold;
}
.caption{
    font-size: 45px;
    color: rgb(218, 4, 4);
    font-weight: bold;
    text-align: center;
    margin-bottom: 0;
}
h2{
    color: rgb(218, 4, 4);
    text-align: center;
}

.section-container1{
    padding-top: 25px;
    
    
    padding-bottom: 25px;
    
}
.overall-flex{
    display: flex;
    justify-content: center;
}
.main-grid{
    display: grid;
    grid-template-columns: 225px 225px 225px 225px 225px;
    column-gap: 17px;
    row-gap: 10px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 25px;
    margin-top: 10px;
}

.Zdroje{
    background-color: #5d87ac;
    height: 150px;
    font-size: 20px;
  
     
}
.sectionPN{
    background-image: url(Teoria-Image/PNpriechod-Teoria.png);
    background-color: black;
    z-index: 7;
    position: relative;
    height: 155px;
    background-position: center;
    background-repeat: no-repeat;
    display:flex;
    justify-content: center;
    align-items:  center;;
    border: 4px solid black;
    border-radius: 15px;
    transition: all 0.2s;
}
.sectionPN:hover{
    transform: scale(1.1);
    
  
}
.sectionDioda{
  background-image: url(Teoria-Image/led_sim_cap-Teoria.png);
  background-color: rgb(247, 204, 204);
  background-repeat: no-repeat;
  height: 155px;
  display:flex;
  justify-content: center;
  align-items:  center;;
  border: 4px solid black;
  border-radius: 15px;
  transition: all 0.2s;
  
  
}
.sectionDioda:hover{
    transform: scale(1.1);
    
  
}
.sectionTriak{
    background-color:rgb(80, 223, 245);
    background-image: url(Teoria-Image/Viacvrstvove-menu.jpg);
    background-position: center bottom;
    height: 155px;
    display:flex;
    justify-content: center;
    align-items: center;
    border: 4px solid black;
    border-radius: 15px;
    transition:all 0.2s;
    
  }
  .sectionTriak:hover{
  transform: scale(1.1);
 
}
.sectionTransistor{
   
    background-image: url(Teoria-Image/Tranzistor-menu.jpg);
    background-position: center top;
    height: 155px;
    display:flex;
    justify-content: center;
    align-items: center;
    border: 4px solid black;
    border-radius: 15px;
    transition: all 0.2s;
    
   
  }
  .sectionTransistor:hover{
    transform:scale(1.1);
   

}
.sectionPoloBez{
   
    background-image: url(Teoria-Image/PolovodiceBez-menu.jpg);
    background-position: center ;
    height: 155px;
    display:flex;
    justify-content: center;
    align-items: center;
    border: 4px solid black;
    border-radius: 15px;
    transition: all 0.2s;
}
.sectionPoloBez:hover{
    transform:scale(1.1);
   

}
.psection1{
    font-weight: bold;
    color: white;
    text-shadow:2px 2px 1px black;
    font-size: 26px;
}
.spanBlue{
    color: rgb(41, 90, 252);
    text-shadow: none;
}
.spanB{
    color: black;
    text-shadow: 1px 1px 1px grey;
}
.spanR{
    color: rgb(218, 4, 4);
    text-shadow: 1px 1px 1px black;
}
.spanDioda{
    color:rgb(246, 250, 3);
}
.spanTransistor{
    color:rgb(246, 250, 3);
}

.article{
    width: 70%;
    margin: auto;
    text-align: justify;
    font-size: 25px;

}
.gif-description{
 
  font-size: 25px;
  text-align: center;
  padding-bottom: 1%;


}

.Circuit-transistor{
    width: 40%;
}

.question{
    font-size: 25px;
    
  }
.video1{
    padding-top:3%;
    text-align: center;
}
.vach1{
    padding-top:3%;
    text-align: center;
}
.quiz-container{
    padding-top: 3%;
    width: 70%;
    margin:auto;
    padding-bottom: 3%;
  }
.imgZaverny{
    margin-top: 3%;
    
}
  .text{
    margin-left: 3%;
    font-size: 25px;
  }
input[type='radio'] { 
    transform: scale(1.3); 
    z-index: 7;
    position: relative;
}
.hall_sensor{
    font-family: 'Outfit';
    font-size: 100%;
}
#btn{
    width:160px;
    height: 60px;
    font-size:25px;
    font-family: 'Outfit';
    cursor: pointer;
}
#btn2{
    width:160px;
    height: 60px;
    font-size:25px;
    font-family: 'Outfit';
    cursor: pointer;
}
#btn3{
    width: 160px;
    height: 60px;
    font-size:25px;
    font-family: 'Outfit';
    cursor: pointer;
}
#btn4{
    width: 160px;
    height: 60px;
    font-size:25px;
    font-family: 'Outfit';
    cursor: pointer;
}
#btn5{
    width: 160px;
    height: 60px;
    font-size:25px;
    font-family: 'Outfit';
    cursor: pointer;
}

#resetBtn{
    width: 80px;
    height: 60px;
    font-size:25px;
    font-family: 'Outfit';
    cursor: pointer;
    
}
.red-highlight{
    color: rgb(218, 4, 4);
}
.small-caption{
    font-size: 32px;
    font-weight: bold;
}
.bold-caption{
    font-weight: bold;
}
.object-schematic{
    width: 27%;
    
    
}
.object-pn{
    width: 25%;

}
.object-vach{
    background-color: white;
    border-radius:18px;
    width: 35%;
}
.nonlabeled{
    width: 40%;
    border-radius: 18px;
}
.nonlabeled2{
    border-radius: 18px;
}
.white-background{
    background-color: white;
}
.link-animation{
    color: rgb(20, 20, 226);
}
.link-animation:hover{
    color: rgb(250, 250, 250);
}


@media screen and (min-width: 1700px){
    html{
        padding-top: 25px;
    }
}

@media screen and (max-width: 1600px){
    .main-grid{
        grid-template-columns: 206px 206px 206px 206px 206px;
    }
}
@media screen and (max-width: 1500px){
    .main-grid{
        grid-template-columns: 190px 190px 190px 190px 190px;
    }
}
@media screen and (max-width: 1400px){
    .main-grid{
        grid-template-columns: 170px 170px 170px 170px 170px;
        column-gap: 16px;
    }
    .psection1{
        font-size:24px;
     }
}
@media screen and (max-width: 1300px){
    .caption{
        font-size: 35px;
    }
    .small-caption{
        font-size:28px;
    }
    
    .video1 img{
        width: 55%;
    }
    .vach1 img{
        width:45%;
    }
    
    .main-grid{
        grid-template-columns: 160px 160px 160px 160px 160px;
        column-gap: 15px;
    }
    
        .psection1{
       font-size:24px;
    }

    

}
@media screen and (max-width: 1200px){
    .main-grid{
        grid-template-columns: 150px 150px 150px 150px 150px;
        column-gap:14px;
    }
    .psection1{
        font-size:24px;
     }
  
}
@media screen and (max-width: 1100px){
    .main-grid{
        grid-template-columns: 170px 170px 170px;
        grid-template-rows: 175px 175px;
        column-gap:17px;
    }
        .main-grid > a:nth-child(n+4):not(:nth-child(n+7)) {
       margin-left: 90px;
       margin-right: -90px;
     }
        .psection1{
       font-size:24px;
    }
    .spanDioda{
        color:white;
    }
    .spanPoloBez{
        color: rgb(246, 250, 3);
    }
}

@media screen and (max-width: 1000px){
.object-schematic{
    width: 47%;
  }
}

@media screen and (max-width: 880px) {
   .Circuit-transistor{
    width: 60%;
   }
   
   .main-grid{
    grid-template-columns: 160px 160px 160px;
    grid-template-rows: 170px 170px;
    column-gap:16px;
    
}
    .main-grid > a:nth-child(n+4):not(:nth-child(n+7)) {
   margin-left: 85px;
   margin-right: -85px;
 }
   
   
   
}
   

@media screen and (max-width: 765px), screen and (max-height: 520px){
    body{
        background-color:#b9ddfa;
    }
}

@media screen and (max-width: 765px){
    body{
        background-color:#b9ddfa;
        padding-top: 50px;
    }
    .nonlabeled{
        width: 60%;
    }
    .caption{
        font-size: 30px;
    }
    .small-caption{
        font-size:26px;
    }
    .article{
        font-size: 22px;
        width:90%;
        text-align: left;
        
     }
     .gif-description{
        font-size: 22px;
     }
     .quiz-container{
        width: 90%;
     }
     .text{
        font-size: 22px;
        text-align: left;
     }
     .question{
        font-size: 22px;
     }
     .object-pn{
        width: 30%;
      }
      .object-schematic{
        width: 45%;
      }
      .Circuit-transistor{
        width: 90%;
      }
      .vach1 img{
        width: 60%;
      }
    .video1 img{
        width: 70%;
    }
    .main-grid{
         grid-template-columns: 150px 150px 150px;
         grid-template-rows: 170px 170px;
         column-gap:15px;
         
    }
    .main-grid > a:nth-child(n+4):not(:nth-child(n+7)) {
        margin-left: 80px;
        margin-right: -80px;
      }
    .psection1{
        font-size:24px;
    }
      
    
    }
    @media screen and (max-width: 610px){
        .main-grid{
            grid-template-columns: 130px 130px 130px;
            grid-template-rows: 170px 170px;
            column-gap:13px;
       }
       .main-grid > a:nth-child(n+4):not(:nth-child(n+7)) {
           margin-left: 70px;
           margin-right: -70px;
         }
       .psection1{
           font-size:22px;
       }
    
    }
    @media screen and (max-width: 470px){
        .main-grid{
            grid-template-columns: 110px 110px 110px;
            grid-template-rows: 160px 160px;
            column-gap:10px;
       }
       .main-grid > a:nth-child(n+4):not(:nth-child(n+7)) {
           margin-left: 60px;
           margin-right: -60px;
         }
       .psection1{
           font-size:20px;
       }
    }