/* Подключение шрифтов */

@font-face {
    font-family: "Roboto Sans";
    src: url(../fonts/Roboto-Regular.ttf);
    
    font-weight: normal;
}

@font-face {
    font-family: "Roboto Sans";
    src: url(../fonts/Roboto-Bold.ttf);

    font-weight: bold;
}

@font-face {
    font-family: "Roboto Sans";
    src: url(../fonts/Roboto-Italic.ttf);
    
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Roboto Sans";
    src: url(../fonts/Roboto-BoldItalic.ttf);

    font-weight: bold;
    font-style: italic;
}

/* Переменные */

:root {
    --first-color: #456db1;
    --second-color: #223a76;
    --third-color: #456db1;
    --border-color: #456db1;
    --dark-color: #456db1;
    /* --bright-color: */ 
    --main-text-color: #473a53;
    --side-text-color: black;
    --title-text-color: black;
    --transparent-text-color: rgba(0, 0, 0, .6);
    --fading-text-color: rgba(0, 0, 0, .2);
    --title-font-size: 1.25rem;
    /* --plain-font-size: ... */ /* <--- Теперь это часть медиа-запроса */
    --special-font-size: 1.5rem;
}

/* Медиа-запросы на ширину экрана */

@media screen and ((width <= 1400px) or (height <= 800px))  {
    :root {
        --plain-font-size: 16px;
    }

    #_logo {
        width: 200px;
        height: 200px;
    }
}

@media screen and ((width > 1400px) and (height > 800px)) {
    :root {
        --plain-font-size: 20px;
    }

    #_logo {
        width: 250px;
        height: 250px;
    }
}

/* Универсальный селектор */

* {
    margin: 0;
    padding: 0;
    font-family: "Roboto Sans", Verdana, Geneva, Tahoma, sans-serif;
    font-weight: normal;
    font-size: var(--plain-font-size);

    box-sizing: border-box;
}

/* Общие селекторы */

p,a {
    color: var(--main-text-color);
}
body {
    background-image: url("../images/fon1.jpg");
    background-attachment: fixed;
    
}

table {
    border-collapse: collapse;

    border: 1px solid black;
}

th, td {
    border: 1px solid black;
    padding: 5px;
}

th {
    font-weight: bold;
}

/* Стили столбца и строки */

.col {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
}

/* Стили распределения по главной оси */

.main-spacing {
    justify-content: start;
}

.main-centering {
    justify-content: center;
}

/* Стили выравнивания по побочной оси */

.side-centering {
    align-items: center;
}

.side-starting {
    align-items: start;
}

.side-ending {
    align-items: end;
}

/* Стили выравнивания по центру */

.centered-h {
    margin-left: auto;
    margin-right: auto;
}

.centered-v {
    margin-top: auto;
    margin-bottom: auto;
}

/* Стили отображения */

.absolute {
    position: absolute;
}

/* Стили долей ширины */

.wrapper {
    width: 100%;
}

.container {
    width: 100%;
    padding: 1px;
}

.content {
    width: 100%;
}

.subcontent {
    width: 100%;
}

/* Стили линий */

.stripe-h {
    border-bottom: solid;
}

.stripe-v {
    border-right: solid;
}

/* Стили шрифта */

.bold {
    font-weight: bold;
}

.centered {
    text-align: center;
}

/* Стили курсора */

.pointer {
    cursor: pointer;
}

/* Стили основной страницы */

#_exit_button {
    margin-top: 40vh;
    background-color: var(--dark-color);
    opacity: 0.3;

    transform-origin: left top;
    transform: rotate(-90deg);

    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-top: 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    user-select: none;

    transition: 0.5s ease;
}

#_exit_button:hover {
    opacity: 1;
    transition: 0.5s ease;
}

#_exit_caption {
    color: white;
    font-size: var(--special-font-size);
}

/* Стили заголовка */

#_container {
    background-image: linear-gradient(rgba(68,28,80,.1) 0,rgba(68,28,80,.1) 130px,rgba(68,28,80,.1) 150px,rgba(68,28,80,.1) 100%);
    box-shadow: 0px 0px 10px 0px black;
    
    min-height: 100vh;
}

#_title {
    height: 60px;
    margin-top: 15px;

    background-color: #456db1;

    border-radius: 15px;

    flex-shrink: 0;
}

#_title_text {
    font-size: var(--title-font-size);
    color: var(--title-text-color);
    margin-left: 15px;
}

#_title_desc {
    font-size: var(--plain-font-size);
    color: var(--main-text-color);
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 5px;
}

#_title_stripe {
    color: var(--main-text-color);
    border-width: 3px;
    margin-bottom: 3px;
}


/* Стили контента */

.main-content {
    padding-left: 5px;
    padding-right: 15px;
    height: 70vh;
}

.fill {
    height: 70vh;
}

.btn {
    width: 200px;
    height: 30px;
    background-color: white;
    border: 1px solid white;
    border-radius: 5px;
    margin-right: 575px;
}

.btn:enabled {
    cursor: pointer;
}

.btn-text {
    color: white;
}

.btn-text-back {
    color: #456db1;
}

.disabled {
    color: gray;
}

#_answers {
    gap: 10px;
}

.data-row {
    gap: 10px;
    flex-shrink: 0;

    padding: 5px;
    border-radius: 5px;
    background-color: white;

    height: 60px;

    margin-top: 20px;
}

.data-row label {
    color: var(--dark-color);
}

.rd {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

#_bottom {
    margin-top: 10px;
    background-color: var(--dark-color);
    padding: 10px;
}

#_timer {
    color: white;
    font-size: var(--title-font-size);
    font-weight: var(--border-color);
}

#_timer_stopped {
    color: white;
    font-size: var(--title-font-size);
    font-weight: var(--border-color);
    background-color: #ddd7d1;
}

#_buttons {
    gap: 10px;
    margin-left: 10px;
}

#result_note {
    font-size: var(--title-font-size);
    color: var(--dark-color);
}

#_result {
    font-size: var(--special-font-size);
}

#CranTrub {
    margin-top: 100px;
}

#btn_next {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#test {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

.step_counter {
    width: 100px;
    height: 35px;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    color: white;
    position: absolute;
    margin-left: 91.3%;
    margin-top: -2.6%;

}

#step_count {
    text-align: center;
    color: white;
    margin-top: 7px;
}

.theory-image {
    height: 450px;
    width: 550px;
}

.step-visual {
    position: absolute;
    max-width: 150%;
    max-height: 100%;
    width: 99%;
}

.text {
    font-size: 22px;
    margin-bottom: 375px;
}

.container-theory {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 55px;
    position: absolute;
    margin-left: 15%;
    margin-top: 3%;
}

.text-container {
    overflow-y: scroll;
    max-height: 449px;
    padding-right: 50px;
    width: 450px;
}

section .option {
    background: white;
    border-radius: 5px;
    padding: 8px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease
}

.option:hover {
    color: white;
    background: #456db1;
}

.next_question {
    background: white;
    color: #456db1;
    border: 1px solid white;
    width: 150px;
    border-radius: 5px;
    position: absolute;
    bottom: 100px;
    cursor: pointer;
}

.quiz-container {
    background-color: rgb(238,236,224);
    border-radius: 10px;
    padding: 20px;
    margin-left: 5%;
    margin-bottom: 100%;
    margin-top: 3%;
}

h1 {
    font-size: 24px;
}

.columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 250px;
}

.column {
    flex: 1;
    width: 48%;
}

.questions,
.answers {
    border: none;
    /* Убираем обводку */
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}

.questions {
    height: 50px;
    width: 250px;
    margin-right: 260px;
}

.answers {
    height: 50px;
    width: 250px;
}

.question,
.answer {
    padding: 10px;
    height: 200%;
    width: 200%;
    margin: 10px;
    background-color: #3498db;
    color: #fff;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 75px;
}

.answer:hover {
    background-color: #e74c3c;
}

#result {
    margin-top: 20px;
    font-weight: bold;
}

.question:hover {
    background-color: #1a73e8;
    /* Цвет заливки при наведении */
    cursor: pointer;
}

#test1 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#test2 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

/* Стили для оформления теста */
.question_2 {
    margin-bottom: 20%;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 4%;
}

.options {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 35px;
}

.options_checkbox {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 35px;
}

.option_2 {
    margin: 5px;
    background-color: white;
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
}

.correct {
    background-color: green;
    border-color: green;
    color: white;
}

.incorrect {
    background-color: red;
    border-color: red;
}

#confirm_button1 {
    width: 7%;
    height: 7%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 70%;
    margin-top: 8.6%;
}

#test3 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#test4 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#confirm_button2 {
    width: 7%;
    height: 7%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 70%;
    margin-top: 8.6%;
}

#test5 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#confirm_button3 {
    width: 7%;
    height: 7%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 70%;
    margin-top: 14.6%;
}

#confirm_button4 {
    width: 7%;
    height: 7%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 70%;
    margin-top: 14.6%;
}

#confirm_button5 {
    width: 7%;
    height: 7%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 70%;
    margin-top: 2%;
}

#confirm_button6 {
    width: 7%;
    height: 7%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 70%;
    margin-top: 14.6%;
}

#test6 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#test7 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#test8 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#test9 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#test10 {
    width: 7%;
    height: 5%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 90%;
    margin-top: 35.5%;
}

#confirm_button4 {
    width: 7%;
    height: 7%;
    background-color: #456db1;
    border: 1px solid white;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    color: white;
    position: absolute;
    margin-left: 70%;
    margin-top: 14.6%;
}

.container-bottom {
    visibility: visible;
    padding: 30px;
}

.container-bottom.hidden {
    visibility: hidden;
}

.end-header-text {
    padding: 20px;
    text-align: center;
}

.end-container {
    width: 104%;
    height: 150%;
    background-color: rgb(238,236,224);
    padding-right: 10px;
    overflow-y: scroll;
   
}

.first-text-box {
    height: 80px;
    border: 1px solid black;
    border-radius: 15px;
    margin-top: 20px;
    background-color: white;
    margin-left: 10%;
    margin-right: 10%;
}

.second-text-box {
    height: 65px;
    border: 1px solid black;
    border-radius: 15px;
    margin-top: 20px;
    background-color: white;
    margin-left: 10%;
    margin-right: 10%;
}

.grid-first-text-box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.grid-second-text-box {
    display: flex;
    gap: 3%;
    margin-top: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.first-left-text, .first-right-text {
    margin-top: 15px;
}

.end-highlight {
    color: #456db1;
    font-size: 24px;
    text-align: center;
}

.third-text-box {
    width: 1174px;
    height: 110px;
    border: 1px solid black;
    border-radius: 15px;
    margin-top: 20px;
    background-color: white;
    margin-left: 10%;
    margin-right: 10%;
}

.grid-third-text-box {
    display: flex;
    gap: 45%;
    margin-top: 20px;
    justify-content: center;
}

.grid-third-text-box-numbers {
    display: flex;
    gap: 57%;
    align-items: center;
    justify-content: center;
}

.numbers-stats {
    color: #456db1;
    font-size: 48px;
}

.fourth-text-box {
    width: 1174px;
    max-height: fit-content;
    border: 1px solid black;
    border-radius: 15px;
    margin-top: 20px;
    background-color: white;
    margin-left: 10%;
    margin-right: 10%;
}

.fourth-text-box-text {
    margin-left: 50px;
    margin-top: 15px;
    font-size: 24px;
}

._src_19{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.end-questions, .end-questions1, .end-questions2,
.end-questions3, .end-questions4, .end-questions5,
.end-questions6, .end-questions7, .end-questions8,
.end-questions9, .end-questions10 {
    padding-bottom: 4px;
}

.end-questions.correct-text, .end-questions1.correct-text,
.end-questions2.correct-text, .end-questions3.correct-text,
.end-questions4.correct-text, .end-questions5.correct-text,
.end-questions6.correct-text, .end-questions7.correct-text,
.end-questions8.correct-text, .end-questions9.correct-text,
.end-questions10.correct-text {
    color: #32CD32;
    font-weight: bold;
}

.end-questions.uncorrect-text, .end-questions1.uncorrect-text,
.end-questions2.uncorrect-text, .end-questions3.uncorrect-text,
.end-questions4.uncorrect-text, .end-questions5.uncorrect-text, 
.end-questions6.uncorrect-text, .end-questions7.uncorrect-text,
.end-questions8.uncorrect-text, .end-questions9.uncorrect-text,
.end-questions10.uncorrect-text  {
    color: red;
    font-weight: bold;
}