* {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-size: 100%;

}

html {
    height: 100%;
}

.hidden {
    opacity: 0;
    /* display: none; */
}

.off {
    display: none;
    height: 0px;
}

.filter {
    filter: grayscale();
}

.filter::after {
    position: absolute;
    width: 100%;
    top: 70%;
    margin: 0 auto;
    /* left: 35%; */
    font-size: 5vh;
    content: "НЕПРАВИЛЬНО";
    text-align: center;
    color: rgb(255, 225, 225);
    font-weight: 900;
}

.grayscale {
    filter: grayscale(100%);
}

.right-answer::after {
     position: absolute;
     width: 100%;
     top: 50%;
     margin: 0 auto;            
     text-align: center;
    font-size: 20vh;
    content: "\2713";
    color: rgba(12, 223, 23, 0.815);    
    font-weight: 900;
}

.unit-right-answer::after {
    position: absolute;
    width: 100%;
    top: 50%;
    margin: 0 auto;
    text-align: center;
    content: "\2713";
    color: rgba(12, 223, 23, 0.815);
    font-weight: 900;
}

.wrong-answer::after {
    position: absolute;
    width: 100%;
    top: 50%;
    margin: 0 auto;
    text-align: center;
    content: "\2713";
    color: rgb(236, 28, 28);
    font-weight: 900;
}

.none-answer::after {
    position: absolute;
    width: 100%;
    top: 50%;
    margin: 0 auto;
    text-align: center;
    content: "\2713";
    color: rgba(248, 250, 248, 0.5);
    font-weight: 900;
}

.congratulations {
    background-image: url(../assets/svg/medal.svg);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 30%;
}

html {
    width: 100%;

}

body {
    min-width: 320px;
    max-width: 1024px;
    height: 100%;
    margin: 0 auto;
    background-color: rgb(165, 179, 179);
    overflow: hidden;
}

h2 {
    font: 2rem;
    color: rgb(248, 239, 218);
    text-transform: uppercase;
    text-align: center;
}

h3 {
    text-align: center;
}

label,
button {
    cursor: pointer;
}

/* body input {
    display: none;
} */

.navigation {
    width: 100%;
    height: 2rem;
    /* border: azure solid 2px; */
    overflow: hidden;
}

#home:checked~.navigation,
#author:checked~.quiz-by-author,
#picture:checked~.quiz-by-picture {
    height: calc(95% - 2rem);
}

#category:checked~.categories {    
    width: 100%;
   height: calc(95% - 2rem);
    opacity: 1;
}

#menu:checked~.settings {
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 1;
}


#menu:checked~.navigation .nav-panel .home-label,
#menu:checked~.navigation .nav-panel .category-label {
    z-index: 0;
    opacity: 0;
}


section {
    height: 0px;
    width: 100%;
    max-height: 900px;
    overflow: hidden;
    transition: height 0s;
    /* transition: opacity 1.8s; */
}

/*********************************************************************************/
.nav-panel {
    height: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    font-size: 1.8rem;
    color: rgb(245, 245, 244);
    

}

.nav-panel label {
    background-color: transparent;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 800;
    font-style: normal;
    text-align: right;    
    transition: all 1s;
}

.category-label {
    width: 30%;
    justify-self: start;
}

#home-label {
    width: 30%;
    height: 100%;
    justify-self: center;
    background-image: url(../assets/svg/home-2741413.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;

}

.home-label-js {
    position: relative;
    min-width: 200px;
    width:80%;
    height: 50%;
    top: 30%;   
    border-radius: 15px;
    border: 2px solid #072d3a;
    background-color: brown;
    font: 5vh sans-serif;
    color: rgb(222, 223, 199);
    margin: 0 10%;
    text-align: center;
    padding-top: 15% ;    
}

#menu-label {
    width: 2rem;
    height: 2rem;
    margin-right: 10%;
    background-image: url(../assets/svg/carbon_settings.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 1s;
    
}

   

#menu-label:hover {
   transform: rotate(0.5turn);
}

.nav-panel label:hover {
    /* transform: rotate(0.5turn); */
    transform: scale(1.1);    
    opacity: 1;
    transition: all 1.3s;
}

.navigation {
    font-size: 2rem;
    font-style: italic;

    transition: all 1.3s;

}

.quiz-type-container {
    height: 100%;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    transition: width 0.2s;
    transition: heigth 1.8s;
}

.quiz-type-container label {
    width: 90%;
    height: 90%;
    margin: 0 auto;
    display: flex;
    border-radius: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    flex-wrap: wrap;
    text-align: center;
    transition: all 1.3s;
    /* border-bottom: rgba(189, 196, 196, 0.521) solid 2px; */

}

.quiz-type-container label:hover {
    opacity: 1;
    transform: scale(1.1);
}

.author-label {
    background-image: url(../assets/img/Author.jpg);

}

#picture-label {
    background-image: url(../assets/img/b60adaba0ace2666085a.jpg);
}

.quiz-type-container img {
    width: 80%;
    max-width: 410px;
    margin: 5px auto 0 auto;
}

/***************************************************************/

.settings {
    position: absolute;
    width: 0px;
    height: 0px;
    margin: 0 auto;
    top: 1.8rem;
    height: 160vw;
    /* left: 1910px; */
    opacity: 0;
    overflow: hidden;
    z-index: 2;
    transition: 0.8s;
    transition: opacity 1s;
}

.settings-container {
    width: 100%;
    height: 100%;
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-rows:0.3fr repeat(4, minmax(0, 1fr));
    justify-content: center;
    align-items: center;
    background-color: rgb(106, 139, 139);
}

.volume-label,
.time-label {
    min-width: 250px;
}

.mute-label {
    display: block;
    width: 38px;
    height: 31px;
    margin: 0 auto;
    background-color: transparent;
    background-image: url(../assets/svg/Volume_btn.svg);
    background-repeat: no-repeat;
}

.progress {
    display: block;
    /* background: linear-gradient(to right, #24809E 24%, #C4C4C4 24%, #C4C4C4 100%); */
    border: solid 2px #072d3a;
    border-radius: 4px;
    height: 12px;
    width: 100%;
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
}

.progress1 {
    display: block;
    /* background: linear-gradient(to right, #24809E 0%, #24809E 60%, #C4C4C4 60%, #C4C4C4 100%); */
    border: solid 2px #072d3a;
    border-radius: 4px;
    height: 12px;
    width: 100%;
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
}

.progress::-webkit-slider-thumb,
.progress1::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    -webkit-appearance: none;
    cursor: ew-resize;
    background: #24809E;
}

.time-game-toggle {
    
    display: block;
    width: 275px;
    height: 80px;
    margin: 10px auto;
    border-radius: 10px;
    background-color: #0a5a5a;
    justify-content: center;
    font: 1.2rem sans-serif;
    text-align: center;
    text-shadow: 4px 4px 5px rgb(73, 39, 39);
    color: snow;
    text-align: center;
    padding: 5% 0;
}



.settings-submit {
    display: block;
    width: 150px;
    height: 50px;
    margin: 10px auto;
    border-radius: 10px;
    background-color: coral;
    font: 1.2rem sans-serif;
    text-align: center;
    text-shadow: 4px 4px 5px rgb(73, 39, 39);
    color: snow;
}

/******************************************************************/
.categories {
    position: absolute;
    width: 0px;
    max-width: 1024px;
    height: 0px;
    /* left: 25; */
    margin: 0 auto;
    top: 2rem;
    height: calc(95% - 2rem);
    /* left: 1910px; */
    opacity: 0;
    overflow: hidden;
    z-index: 1;
    transition: 0.8s;
    transition: opacity 1s;

    background-color: rgba(57, 50, 85, 0.856);
}


.categories-container {
    width: 100%;
    height: 95%;
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    padding: 1%;
    list-style: none;
    grid-gap: 1% 1%;
    transition: all 2.5s;
}

.category-container {
    border: 2px solid #2bcca9;
    border-radius: 10px;
    background-size: cover;
}

.categorybuttonli {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #58565627;
    font-size: 60%;
    font-style: oblique;
    color: rgba(233, 228, 217, 0.979);
    text-shadow: 1px 1px 2px rgba(29, 11, 11, 0.986),
    0 0 1em rgb(78, 78, 228),
    0 0 0.2em rgba(7, 7, 187, 0.952);
    ;
    text-transform: uppercase;
    text-align: center;
    overflow-wrap: normal;

    word-wrap: normal;
    word-break: keep-all;
    cursor: pointer;
    transition: 0.8s;
}

.categorybuttonli:hover {
    background-color: #a7a2a2ab;
    color: rgb(43, 71, 75)
}

/****************************************************************/
.quiz-by-author {
    height: 0px;
    background-color: rgb(99, 98, 116);
    transition: opacity 3s;
}

.quiz-by-author-container {
    width: 100%;
    height: 100%;
    opacity: 1;
}

.question-container {
    font-size: 1.2em;
    font-weight: lighter;
    color: rgba(252, 203, 130, 0.952);
}

.full-picture-container {
    position: relative;
    width: 95%;
    height:calc(55% - 3rem);
    margin: 0 auto;
    border-radius: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    transition: all 1.5s;
    font-size: 5vh;
    color:rgba(245, 9, 9, 0.521);
    text-align: center;
}

.author-answers-container {
    width: 98%;
    height: 40%;
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2% 2%;
}

.author-answer {
    width: 100%;
    font-size: 3vh;
    border-radius: 15px;
    background-color: #aa78da2c;
    color: rgb(208, 203, 231);
}

.after-answer-container {
    position: relative;
    /* top: 2rem; */
    height: 100%;
    width: 100%;
    left: 0px;
    margin: 0 auto;
    display: block;
    /* grid-template-rows: 6fr; */
    /* background-color: rgb(99, 98, 116); */
    transition: all 1s;
    z-index: 1;
    overflow: hidden;

}

.answer-picture-container {
    position: relative;
    width: 95%;
    min-height: 30%;
    height: 67%;
    margin: 20px auto 0 auto;
    border-radius: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 2s;
    cursor: pointer;
}

.picture-description {
    position: relative;
}

.after-answer-container h3 {
    /* margin-top: 1rem; */
    font-size: 3vh;
    color: rgb(208, 203, 231);

}

.next-question {
    width: 60%;
    height: 8vh;
    margin: 0 20%;
    border: 2px solid  rgb(208, 203, 231);
    ;
    border-radius: 12px;
    background: transparent;
    color: rgb(208, 203, 231);
    text-transform: uppercase;
    
}

.round-score-line {
    width: 100%;
    height: 1.5rem;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.round-unit{
    position: relative;
    height: 1.5rem;
    width: 100%;
}





/*******************************************************************/
.quiz-by-picture {
    background-color: rgb(160, 110, 90);
    }

.quiz-by-picture-container {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all 1.3s;
}

.picture-answers-container {
    width: 100%;
    height: 8%;
    font-size: 3.5vh;
    color: rgb(250, 250, 250);
}

.pictures-set {
    position: relative;
    width: 100%;
    height: 75%;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3% 2%;
}

.picture-qwestion-frame {
    width: 90%;
    margin: 0 auto;
    border-radius: 15px;
    border: 2px solid #072d3a;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 1.3s;
    font-size: 0px;
}

.picture-qwestion-frame:hover,
.picture-qwestion-frame:active {
    transform: scale(1.1);
}

.timer-container {
    width: 50%;
    height: 5vh;
    margin: 0 25%;
    background: transparent;
    text-align: center;
    color: tomato;
    font-size:5vh;
}


/****************************************FOOTER**********/
footer {
    bottom: 0px;
    height: 5%;
    /* min-height: 30px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(165, 179, 179);
}

/* footer img {
    transform: scale(0.1);
} */
footer a {
    position: relative;
    max-width: 350px;
    display: flex;
    flex-wrap: wrap;
    font: 2.5vh sans-serif;
    
    color: rgb(31, 27, 27);
    text-align: center;
    text-decoration: none;
}


/*********************************************************************************************/
.round-result-container {
    width: 100%;
    height: 95%;
    margin: 1% 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 2% 2%;
    transition: all 2s;
}

.round-result-container label {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 70%;
    background-size: cover;
    transition: all 2s;

}

.score-button {
    width: 98%;
    height: 98%;
    position: relative;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #030303fa;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 0px;
    font-style: oblique;
    
    ;
    text-transform: uppercase;
    text-align: center;    
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: keep-all;
    cursor: pointer;
    color: transparent;
    transition: 0.8s ease-out;
     transition: color 3.5s;
    cursor: pointer;
}

/* .round-unit label input:checked~label .score-button{
    position: absolute;
    width: 190%;
    height: 190%;
    font-size: 3vh;
    background-size: contain;
} */

.buttonactive {
    position: absolute;
    height: 100%;
    width: 100%;
    max-height: 885px;
    max-width: 1020px;
    height: 89%; 
    margin: 0 auto;
    padding-top: 70vh;
    border-radius: 0;
    filter: none;
    font-size: 3vh;
    color: rgba(233, 228, 217, 0.979);
    /* text-shadow: 1px 1px 2px rgba(29, 11, 11, 0.986),
    0 0 1em rgb(78, 78, 228),
    0 0 0.2em rgba(7, 7, 187, 0.952); */
    background-color: rgb(0, 0, 0);
    background-size: contain;
   /* transform: scale(3); */
   z-index: 2;
   cursor: pointer;
}

.picture-active {
    position: relative;
    height: 100%;
    width: 100%;
    max-height: 885px;
    /* max-width: 1020px; */
    height: 89%;
    margin: 0 auto;
    padding-top: 70vh;
    border-radius: 0;
    filter: none;
    font-size: 3vh;
    color: rgba(233, 228, 217, 0.979);
    /* text-shadow: 1px 1px 2px rgba(29, 11, 11, 0.986),
    0 0 1em rgb(78, 78, 228),
    0 0 0.2em rgba(7, 7, 187, 0.952); */
    background-color: rgb(0, 0, 0);
    background-size: contain;
    /* transform: scale(3); */
    z-index: 2;
    cursor: pointer;
}



/********************************************************************************************/
@media only screen and (min-width: 400px) {
    .categorybuttonli {
        font-size: 3vh;
        /* color: rgba(247, 209, 133, 0.6); */
    }

    .question-container {
        font-size: 2em;
        color: rgba(211, 193, 183, 0.952);
    }

    .after-answer-container {
        position: absolute;
        top: 2rem;
        height: 155vw;
        max-height: 85%;
        width: 100%;
        left: 0px;
        margin: 0 auto;
        display: block;
        grid-template-rows: 6fr;
        background-color: rgb(99, 98, 116);
        transition: all 1s;
    }

    /* .answer-picture-container:hover {
        height: 80%;
        filter: inherit;
    } */

}