:root {
    background: no-repeat center center fixed url(../images/fon2.jpg);
    background-size: 100% 100%;
    padding-top: 120px;
}

* {
    font-family: "Montserrat";
}

.image {
    display: block;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 16/6;
}

.image_big {
    display: block;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/7;
}

#kn {
    display: block;
    border: 1px solid #000;
    padding: 10px;
    color: black;
    text-decoration: none;
}

.rows-grid {
    display: grid;
    grid-template-rows: auto 1fr;
}

.screen {
    display: grid;
    grid-template-columns: 1fr .35fr;
    grid-auto-flow: column;
    gap: 15px;
    padding: 15px;
    box-sizing: border-box;
}

.screen.mod2 {
    grid-template-columns: 1fr .60fr;
}

.screen__section {
    border: 1px solid black;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px;
}

.screen__section--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    place-content: start center;
    gap: 15px;
    block-size: 72vh;

    @media (max-width: 1680px) {
        block-size: 60vh;
    }
}

.answer {
    display: grid;
    place-content: center;
    text-align: center;
    inline-size: 95%;
    object-fit: fill;
    aspect-ratio: 16/9;
    cursor: grab;
}

.correct {
    background: rgba(11 156 49 / 0.6);
    color: white;
}

.answer:active {
    cursor: grabbing;
}

.answer:not([src]) {
    background: white;
}

.question {
    inline-size: 100%;
    block-size: 100%;
    
}

.question__grid {
    display: grid;
    grid-auto-rows: auto;
    block-size: 100%;
    gap: 20px;
}

.question__text {
    display: grid;
    place-content: center;
    text-align: center;
    font-size: 3vmin;
    padding: 10px;
}

.question__answers {
    display: grid;
    grid-auto-rows: minmax(50px, 1fr);
    gap: 5px;
}

.question.red {
    background-color: red;
    
}

.question.yellow {
    background-color: yellow;
}

.question.green {
    background-color: green;
}   

.question.blue {
    background-color: blue;
}

.question.purple {
    background-color: purple;
}

.slider {
    height: 27vmax;
    width: 65%;
    display: block;
    margin: 0 auto;
}

.slick-list,
.slick-track {
    height: 100%;
}

.nav {
    inline-size: 100%;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    gap: 15px;
    padding: 10px;
}

.overflow-hidden {
    overflow: hidden;
}

.border-green {
    border-color: green;
    border-style: dashed;
}

.guestions__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    grid-template-rows: repeat(3, minmax(auto, 180px));
    gap: 15px;
    inline-size: 100%;
}

.questions__grid button {
    font-size: 24px;
}