@charset "UTF-8";







.setup #rozrazovacka,



.setup #kviz, .setup #vysledek,



.kviz #setup, .kviz #rozrazovacka,



.vysledek #kviz, .vysledek #setup,



.rozrazovacka #setup, .rozrazovacka #kviz {



  display: none;



}







#kviz {



  display: flex;



  justify-content: center;



  align-items: center;



  flex-direction: column;



}



#kviz img {



    display: block;



    width: 100%;



    height: 100%;



    max-width: min(100%, 600px);



    max-height: 500px;



    object-fit: contain;



}



#kviz label {



  display: block;



  margin: 1rem 0;



  font-size: 1.5rem;



  text-align: center;



}



#kviz label:nth-of-type(1) {



  font-size: 2rem;



  font-weight: bold;



}



#kviz input.spravne {



  color: #1a6d09;



  background-color: #62b670;



}



#kviz input.spatne {



  color: #6d1a09;



  background-color: #b67062;



}



#kviz p {



  font-size: 1.5rem;



  text-align: center;



  margin-top: 1rem;



}







#progress {



  display: flex;



  justify-content: center;



  align-items: center;



  width: 100%;



  max-width: 900px;



  margin: 20px auto 40px auto;



}



#progress div {



  width: 100%;



  height: 20px;



  position: relative;



}



#progress div.spravne {



  background-color: #269b0f;



}



#progress div.spatne {



  background-color: #c42d12;



}



#progress div.nezobrazeno {



  background-color: #b6ae62;



}



#progress div.active {



  background-color: #2177bd;



}



#progress div:first-of-type {



  border-top-left-radius: 10px;



  border-bottom-left-radius: 10px;



}



#progress div:last-of-type {



  border-top-right-radius: 10px;



  border-bottom-right-radius: 10px;



}







@media (width < 600px) {



  main section form label, main section form input {



    font-size: 1.2rem;



  }



  main section form .checkbox-container .checkbox {



    margin: 0;



    padding: 0;



  }



  main section form .checkbox-container label {



    margin: 0;



  }



}



#rozrazovacka {



  display: flex;



  justify-content: center;



  align-items: center;



  flex-direction: column;



  gap: 1rem;



  width: -moz-max-content;



  width: max-content;



  max-width: 100%;



  margin: 2rem auto;



}



#rozrazovacka p {



  font-size: 1.5rem;



  text-align: center;



  margin: 0;



}



#rozrazovacka .obchodyContainer {



  display: flex;



  justify-content: center;



  align-items: end;



  gap: 1rem;



  flex-wrap: wrap;



  position: relative;



}



#rozrazovacka .obchodyContainer .obchod {



  flex: 1;



  width: 100%;



  min-width: 300px;



  height: 100%;



  display: flex;



  justify-content: space-between;



  align-items: center;



  flex-direction: column;



  gap: 1rem;



  padding: 1rem;



  border-radius: 0.5rem;



  font-size: 1.5rem;



  font-weight: bold;



  cursor: pointer;



}



#rozrazovacka .obchodyContainer .obchod h1 {



  font-size: 1.5rem;



  text-align: center;



}



#rozrazovacka .obchodyContainer .obchod div {



  display: flex;



  flex-direction: column;



  width: 100%;



  gap: 1rem;



}



#rozrazovacka .slovaContainer {



  width: 100%;



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));



  gap: 1rem;



}



#rozrazovacka .slovo {



  width: 100%;



  aspect-ratio: 5/1;



  display: flex;



  justify-content: center;



  align-items: center;



  background-color: var(--color1);



  font-size: 1.5rem;



  font-weight: bold;



}



#rozrazovacka .slovo.spravne {



  background-color: #269b0f;



}



#rozrazovacka .slovo.spatne {



  background-color: #c42d12;



}



#rozrazovacka .slovo:empty {



  background-color: #afafaf;



}







@media (width < 600px) {



  .rozrazovacka {



    padding: 1rem 0.25rem;



  }



  .obchodyContainer .obchod {



    min-width: 150px !important;



    max-width: 50%;



  }



  .obchodyContainer .obchod h1 {



    font-size: 1.2rem;



  }



  .slovaContainer {



    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;



  }



  .slovaContainer .slovo {



    margin: 0 auto;



  }



  .slovo {



    max-height: 40px;



    max-width: 150px;



    font-size: 1rem !important;



  }



}











.pravidlaCasovaniSection {



    display: flex;



    flex-wrap: wrap;



    justify-content: center;



    align-items: center;



    gap: 2rem;







    width: 100%;



    max-width: 2000px;



    margin: 2rem auto;



}



.pravidlaCasovaniSection h2 {



    width: 100%;



    min-width: 100%;



    text-align: center;



}



.pravidlaCasovani {



    display: flex;



    justify-content: center;



    align-items: center;



    gap: 1rem;



    flex-wrap: wrap;



    width: 100%;



    max-width: 500px;



    animation: none;



    background-color: rgba(0, 0, 0, 0.3);



    box-shadow: 0 0 1rem #000;



    border-radius: 0.75rem;



    padding: 1rem;



    margin: 0;



}



.pravidlaCasovani h3 {



    text-align: center;



    font-size: 2.25rem;



}



.pravidlaCasovani p:nth-of-type(1) {



    text-align: center;



}







#chart {



  width: 100%;



  height: 100%;



  display: flex;



  justify-content: center;



  align-items: center;



}



#chart svg {



  width: 100%;



  height: 100%;



}







.prehledSloves {



  animation: none;



  flex-direction: column;



}



.prehledSloves h1 {



  font-size: 2rem;



  margin: 2rem 0;



  text-align: center;



}



.container {



    width: 100%;



    margin: 2rem auto;



}



.container .obchod .imgContainer img {



    width: 100%;



    max-height: 300px;



    object-fit: cover;



}



.container .obchod {



    width: 100%;



    max-width: min(500px, 100% - 2rem);



    display: flex;



    flex-direction: column;



    padding: 2rem;



    border-radius: 1rem;



    background-color: rgba(0, 0, 0, 0.3);



    box-shadow: 0 0 1rem #000;



    margin: 1rem;



}



.container .obchod > p:nth-of-type(1) {



    font-size: 1.5rem;



    font-weight: bold;



    text-align: center;



    margin: 0;



}



.container .obchod h2 {



    font-size: 2rem;



    text-align: center;



    margin: 1rem 0;



}



.container .obchod hr {



    margin: 1rem 0;



}



.container .obchod table tr {



    display: table-row;



}



.container .obchod table img {



    width: 30px;



    aspect-ratio: 1;



    



}



@media (width < 800px) {



    main section {



        padding: 5rem 1rem;



    }



    .container .obchod {



        padding: 1rem;



        margin: 0.5rem;



        max-width: min(300px, 100% - 1rem);



    }



    



}







.images {



    display: grid;



    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));



    gap: 1rem;



    justify-content: center;



    align-items: center;



    width: 100%;



    max-width: 2000px;



    margin: 2rem auto;



}



.images img {



    max-width: 300px;



    max-height: 300px;



    object-fit: contain;



    margin: 1rem 0;



}