* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}


body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: #BDA875;
}


/*Header*/
header {
    width: 100%;
}

@media (min-width: 768px) {
    .menu {
        padding-left: 10rem;
        padding-right: 10rem;
    }

    .menu_parts {
        width: 100%;
        justify-content: space-between;
    }

    .menu_name {
        margin-right: 13rem;
    }
}

@media (min-width: 768px) {
    .logo {
        width: 80px;
        height: auto;
        margin-right: 1rem;
    }
}

@media (max-width: 767px) {
    .logo {
        width: 60px;
        height: auto;
        margin-right: 1rem;
    }
}


/*Content*/

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    margin: auto auto 50px;
    max-width: 1320px;
    width: 100%;
    gap: 50px;
    font-family: 'Inter', sans-serif;
}


/*Стили кнопок*/
.button {
    background-color: #548DA6;
}

.button:hover {
    background-color: #1A3E4D;
}

.button:active {
    background-color: #1D313A;
}

/*Поменять местами кнопку и описание в мобильной версии*/
@media (max-width: 768px) {
    .min-container {
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
    }

    .num_1 {
        order: 2;
    }

    .num_2 {
        order: 1;
    }
}

/*Analysis*/

.analysis {
    background-color: white;
    border: 2px solid gray;
    margin-bottom: 1rem;
}
.result_about {
    padding: 3rem;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .analysis {
        margin: 2rem auto;
    }

    .result_about {
        margin: -4rem auto 0 auto;
    }
}

.result {
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin: 0 auto;
}

.result h2 {
    margin: 0 auto;
}

.analysis_title {
    font-size: 3rem;
    color: #BD6D5A;
}

/*Articles*/
.article_item {
    background-color: white;
    border: 2px solid gray;
    margin-bottom: 1rem;
}

/*Statistics*/

.schedule {
    background-color: white;
    border: 2px solid gray;
    margin-bottom: 1rem;
}

.schedule_about {
    margin-top: 5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    }

@media (max-width: 768px) {
    .schedule {
        margin: 2rem auto;
    }

    .schedule_about {
        margin-top: 0.5rem;
        margin-bottom: 2rem;
    }
}

.diagram {
    margin-top: -3rem;
}



/*Books*/
.book_img {
    width: 230px;
    height: auto;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 10px 5px 5px grey;
}

.book {
    background-color: white;
    border: 2px solid gray;
}

@media (min-width: 768px) {
    .book_about {
        padding-right: 7rem;
    }

    .book_img {
        margin-left: 5rem;
    }
}

@media (max-width: 768px) {
    .book_img {
        align-self: center;
    }
}

/*Test*/
.progress {
    width: 90%;
    margin: 0 auto;
}

.progress-bar {
    background-color: #082532;
}

.test {
    width: 90%;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 1),
    -23px 0 20px -23px rgba(0, 0, 0, .8),
    23px 0 20px -23px rgba(0, 0, 0, .8),
    0 0 40px rgba(0, 0, 0, .1) inset;
    padding-left: 3rem;
    padding-right: 3rem;
}
.testIQ {
    height: 100vh;
}
.test-info {
    width:90%;
    margin: 0 auto;
    height: 3rem;
}




#q_opacity {
    margin-top: 2rem;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .test {
        height: 90vh;
    }
    .timer {
        margin-top: 1rem;
        font-size: 1rem;
        white-space: nowrap;
    }

    #q_opacity {
        margin-top: 0.5rem;
        font-size: 1rem;
    }
}

.test_question {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    margin: 0 auto;
}

.answers_div {
    display: flex;
    flex-wrap: wrap;
}

.answers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 70vh;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.img_question {
    width: 20rem;
    height: auto;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: 17px 17px 18px 0px rgba(34, 60, 80, 0.2);
}

@media screen and (max-width: 767px) {
    .answers_div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 15rem;
    }

    .answers {
        display: flex;
        margin-top: -7rem;
        justify-content: center;
        align-items: baseline;
        flex-wrap: wrap;
        height: 70vh;
        flex-direction: row;
        align-content: flex-start;
    }

    .radio_label {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2px;
        width: calc(100% / 3);
        margin-bottom: 1rem;
    }

    .answer_img {
        max-width: 100%;
        min-width: 100%;
        height: auto;
        height: auto;
        border: 3px solid black;
        border-radius: 10px;
        -webkit-box-shadow: 17px 17px 18px 0px rgba(34, 60, 80, 0.2);
        -moz-box-shadow: 17px 17px 18px 0px rgba(34, 60, 80, 0.2);
        box-shadow: 17px 17px 18px 0px rgba(34, 60, 80, 0.2), inset 0 0 0 0 lightgrey;
        -webkit-transition: ease-out 0.4s;
        -moz-transition: ease-out 0.4s;
        transition: ease-out 0.4s;
    }

    .answer_img:hover {
        cursor: pointer;
        box-shadow:0 0 0 0 lightgrey, inset 0 0 0 75px lightgray;
    }

    .img_question {
        max-width: 15rem;
        min-width: 15rem;
        height: auto;
    }
}

@media (orientation: landscape) {
    .answer_img {
        max-width: 65%;
        min-width: 65%;
        height: auto;
        border: 3px solid black;
        border-radius: 10px;
        -webkit-box-shadow: 17px 17px 18px 0px rgba(34, 60, 80, 0.2);
        -moz-box-shadow: 17px 17px 18px 0px rgba(34, 60, 80, 0.2);
        box-shadow: 17px 17px 18px 0px rgba(34, 60, 80, 0.2), inset 0 0 0 0 lightgrey;
        -webkit-transition: ease-out 0.4s;
        -moz-transition: ease-out 0.4s;
        transition: ease-out 0.4s;
    }

    .answer_img:hover {
        cursor: pointer;
        box-shadow:0 0 0 0 lightgrey, inset 0 0 0 75px lightgray;

    }
    
}

.radio {
    display: none;
}

label img {
    width: 6rem;
    height: auto;
    margin: 1rem;
}

label img:hover {
    box-shadow: 0 .5em 1em 0 rgba(0, 0, 0, 0.15), 0 .4em .5em -.4em rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

/*Finish Test*/

.finish_input {
    width: 15rem;
}

.finish_label {
    padding: .375rem .75rem;
}

.finish_button {
    width: 15rem;
}

/*Footer*/

/* Privacy */
.privacy h1 {
    text-align: center;
    margin: 50px;
}

.privacy h2 {
    font-size: 1.5rem;
    font-weight: 500;
}

.privacy h3 {
    font-size: 1.25rem;
    font-weight: 500;
}

.privacy ol {
    list-style-type: none;
}

/*Contacts*/

.link-secondary {
    color: #575C5F;
}

/*iFrame*/
.iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 80%;
}

@media screen and (max-width: 767px) {
    .iframe-container {
        position: relative;
        width: 100%;
        height: 100%;
        padding-bottom: 280%;
    }
}


.iframe-container iframe {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}