@keyframes dropdownAnimacia {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
@keyframes podsekciaAnimacia {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

@keyframes uvod-animacia{
  0% {top: 200px;}
  100% {top: -50px;}}



body {
  margin: 0;
  font-family: 'Sen';
  font-weight: 400;
  
  
  background-color: #F7FBFC;
  color:black;
  background-image: url('./fotky/bg-image.png');
  background-size: 100%;
}

footer{
  margin-top:12.5vw;
}




  
  /* priklady - text */
@keyframes uvod-animacia{
      0% {top: 200px;}
      100% {top: -50px;}}
    
      .sekcia-uvod {

        text-align: left;
        margin-left:20vw;
        animation: uvod-animacia;
        animation-duration: 0.7s;
        animation-fill-mode: forwards;
    }
    .sekcia-uvod h2{
        font-weight: 400;
        font-size:2.2vw;
        color:#2d2e47
    }
    .sekcia-uvod p{
        font-size:0.9vw;
        line-height: 1.5vw;
        padding-right:4vw;
    }
  
  .upper-section-margin{
    margin-top: 50px;
  }
  

  .priklad-prvy{
    margin-top: 2vw;
  }
  
  /* sekcia - priklady */
  
  .sekcia-uvod .priklad-nazov, .priklad-prvy{
    text-decoration: none;
    font-size:1.5vw;
    color:#2d2d49;
    font-weight: 500;
    margin-top:6vw;

  }

  .priklad-prvy{
    margin-top: 2vw;
  }

  .sekcia-uvod .priklad-description{

    margin-top:1vw;
    margin-bottom: 1vw;
    font-size:1.1vw;
    font-weight: 400;
  }
  .sekcia-uvod .priklad-description p{
    font-size:1.1vw;
  }
  
  

  
  .hidden{
    display: none;
  }

  
  .button-riesenie {
    padding: 0.55vw 1.3vw;
    border: unset;
    border-radius: 0px;
    color: #212121;
    z-index: 1;
    background: #e8e8e8;
    position: relative;
    font-weight: 700;
    font-size: 0.9vw;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms;
    overflow: hidden;
    margin-bottom: 0.5vw;
    margin-top:0.5vw;
   }
   
   .button-riesenie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 0px;
    background-color: #212121;
    z-index: -1;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms
   }
   
   .button-riesenie:hover {
    color: #e8e8e8;
   }
   
   .button-riesenie:hover::before {
    width: 100%;
   }
  /* /sekcia priklady */

  .riesenie{
    display: none;
    margin-top:1vw;
    font-size:0.9vw;
    font-weight: 400;
  }
.riesenie p{
  font-size:0.9vw;
}


  .riesenie-popis{
    font-weight: 900;
    font-size:1.2vw!important;

  }
  .xs-img{
    width:6vw;
  }
  .xs-s-img{
    width: 7vw;
  }
  .s-img{
    width:8vw;
  }
  
  .sm-img{
    width: 9.5vw;
  }
  input {
    width: 7ch;
}
  .m-img{
    width:11vw;
  }
  .l-img{
    width:13vw;
  }
  .ll-img{
    width:20vw;
  }
  .lll-img{
    width:26vw;
  }
  .xl-img{
    width:35vw;
  }
  .xxl-img{
    width:2vw;
  }
  .visible{
    display: block;
    margin-bottom:1vw;
  
  }
.odpoved-group{

    display: flex;
    align-items: center;
  
}
  .odpoved-pole{
    height: 1.55rem;
    width: 3.2vw;
    padding: 0 0.5rem;
    background-color: #212121;
    color: #000000;
    border: 1px solid #5e4dcd;
    border-radius: 6px 0 0 6px;
    background-color: transparent;
  }
  .submitButton{
    
    padding: 0.27rem 0.3vw;
    border: none;
    border-radius: 0 6px 6px 0;
    background-color: #5e4dcd;
    color: #fff;
    font-size: 0.8vw;
    cursor: pointer;
    transition: background-color .3s ease-in-out;
  }

  .submitButton:hover {
    background-color: #5e5dcd;
  }
  .odpoved-pole:focus, .submitButton:focus-visible {
    border-color: #3898EC;
    outline: none;
  }

  .answer-check{
    font-size: 1.7rem!important;
    margin-left:0.2rem;
    position: relative;
    top:0.05rem
  }



.xxxs{
  width: 1.4vw;
}
.skoro-xxs{
  width: 2vw;
}
.xxs{
width: 2.5vw;
}

.xs{
  width: 4vw;
}
.s{
  width: 6vw;
}
.sm{
  width: 7vw;
}
.m{
  width: 10vw;
}
.ml{
  width: 12vw;
}
.l{
  width: 14vw;
}
.ll{
  width: 16vw;
}
.lll{
  width: 18vw;
}
.xl{
  width: 22vw;
}
.xxl{
  width: 26vw;
}
.xxxl{
  width: 30vw;
}
.xxxxl{
  width: 40vw;
}

@media screen and (min-width:1px) and (max-width:800px){
  body{
    background-image: none;
  }

  


  body {

    background-image: none;

  }
h3{            
font-size: 3vw;

}
.sekcia-uvod h2{
font-size:6vw;
}
.sekcia-uvod p{
font-size:2.8vw;
line-height: normal;
padding-right:4vw;
}
.sekcia-uvod {

margin-left:5vw;

}
.visible{
margin-bottom:4vw;

}
.sekcia-uvod .priklad-nazov{
  font-size:1.5rem;
margin-top:15vw;
}

.priklad-prvy{
font-size:1.5rem;
margin-top:10vw;
}




.sekcia-uvod .priklad-description{

margin-top:1vw;
margin-bottom: 1vw;
font-size:1rem;
margin-right:10vw;
}
.sekcia-uvod .priklad-description p{


  font-size:1rem;

  }

.button-riesenie {
  padding: 2vw 4vw;

  font-size: 3vw;

  margin-bottom: 3vw;
  margin-top:4vw;
 }

 .riesenie{
  font-size: 1rem;
 }





.odpoved-pole{
height: 1.3rem;
width: 2.8rem;
padding: 0 0.4rem;
}
.submitButton{

padding: 0.35rem 0.5rem;
font-size: 0.7rem;

}

.answer-check{
font-size: 1.3rem!important;
top:-0.1rem;
}

  .sekcia-uvod{
    width: 90%;
    
  }
  .sekcia-uvod h2{
    font-size:2rem;
  }
  .sekcia-uvod li{
    font-size:1rem
  }
  .sekcia-uvod p{
    font-size:1rem
  }

  .xxxs{
    width: 1.4rem;
  }
  .skoro-xxs{
    width: 2rem;
  }
  .xxs{
  width: 2.5rem;
  }
  
  .xs{
    width: 4rem;
  }
  .s{
    width: 6rem;
  }
  .sm{
    width: 7rem;
  }
  .m{
    width: 10rem;
  }
  .ml{
    width: 12rem;
  }
  .l{
    width: 13rem;
  }
  .ll{
    width: 16rem;
  }
  .lll{
    width: 18rem;
  }
  .xl{
    width: 22rem;
  }
  .xxl{
    width: 22rem;
  }
  .xxxl{
    width: 30rem;
  }
  .xxxxl{
    width: 40rem;
  }
  #bozemoj{
    width: 90%;
  }
}