*,
*:after,
*:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    transition: .3s ease-in-out;
}

html {
    font-size: 16px;
}

.ru {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../assets/images/ru.jpg');
    background-size: 100% 890px;
    background-repeat: no-repeat;
}

.ba {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../assets/images/ba.jpg');
    background-size: 100% 890px;
    background-repeat: no-repeat;
}

.en {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../assets/images/en.jpg');
    background-size: 100% 890px;
    background-repeat: no-repeat;
}

.tr {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../assets/images/tr.jpg');
    background-size: 100% 890px;
    background-repeat: no-repeat;
}

.zh {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../assets/images/zk.jpeg');
    background-size: 100% 890px;
    background-repeat: no-repeat;
}

.container {
    width: 100%;
    background-color: black;
    display: grid;
    justify-content: center;
    grid-template-rows: 250px max-content 881px;
}

.content {
    grid-row: 2/3;
    display: grid;
    grid-template-rows: calc(890px - 250px) max-content;

    a {
        text-decoration: none;
        color: black;
    }

    a:hover {
        text-decoration: none;
        color: black;
    }

    a:active {
        text-decoration: none;
        color: black;
    }
}

.lessons-2 {
    grid-template-rows: initial;
    background: white;
    padding: 0;
}

.start {
    grid-row: 1/2;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 0 100px 0;
    h1 {
        padding: 0;
        font-size: 4rem;
        text-align: center;
        line-height: 7.25rem;
    }

    button {
        cursor: pointer;
        font-size: 1.25rem;
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-weight: normal;
        font-style: normal;
        height: 79px;
        width: 338px;
        border-radius: 50px;
        border: none;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        background: linear-gradient(90.00deg, #00B2FF99, #8204AE99 100%);
        margin-top: auto;
    }
}

.start-courses {
    grid-row: 1/2;
    color: white;
    background: url("../assets/images/images.png") no-repeat top/cover;
    margin: 0 0 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    h1 {
        padding: 0;
        font-size: 4rem;
        text-align: center;
        line-height: 7.25rem;
    }
}

.start-lessons {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    line-height: 29px;
    letter-spacing: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.courses-block {
    grid-row: 2/3;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-content: center;
    color: black;
    background: white;
    padding: 60px 180px;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    line-height: 29px;
    letter-spacing: 0;
}

.lessons-2{
    padding: 60px 180px;
}

.flex-items-action {
    margin: 0 0 69px 0;
    display: flex;
    justify-content: space-between;

    input[type="search"] {
        width: 100%;
        height: auto;
        font-size: 1rem;
        border: none;
        outline: none;
    }

    button,
    input {
        cursor: pointer;
        border: none;
        font-size: 1rem;
        background: white;
    }

    select {
        cursor: pointer;
        border: black 2px solid;
        border-radius: 10px;
        width: 150px;
        height: 30px;
        padding: 0 16px;
        font-size: 1rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    option {
        width: 100%;
        color: black;
        background-color: white;
        font-size: 1rem;
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-weight: normal;
        font-style: normal;
        text-align: center;
    }
}

.back {
    height: 30px;
    padding: 0 16px;
    font-size: 1rem;
    cursor: pointer;
    border: black 2px solid;
    border-radius: 10px;
}

.add-search-filter,
.add-search {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;

}

.add-search-filter{
    form{
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
}

.search {
    border: black 2px solid;
    border-radius: 10px;
    width: 343px;
    padding: 0 16px;
    height: 30px;

    .search-form {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    label{
        width: 100%;
        height: auto;
        margin: 0 0 0 10px;
        display: flex;
        align-items: center;
    }

    button {
        height: 100%;
        padding: 0;
        margin: 0;
        line-height: 30px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1rem;
    }

    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    input[type="search"] {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        line-height: 30px; 
        -webkit-appearance: none;
        appearance: none;
    }
}

.flex-course {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.circle-wrapper {
    width: 20px;
    height: 20px;
    position: relative;
}

.circle {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    /* контур */
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.difficulty-ST { background: blue; }
.difficulty-BS { background: green; }
.difficulty-IN { background: yellow; }
.difficulty-AD { background: orange; }
.difficulty-FL { background: red; }

.fill {
    width: 100%;
    height: 100%;
    /*background-color: #00B2FF; цвет закраски */
    position: absolute;
    /*top: 100%; изначально скрыт */
    left: 0;
}

.fav svg{
    margin: 10px 0 0 0;
}

.fav svg path {
    fill: transparent;
    /* изначально прозрачный */
    stroke: #000;
    /* цвет контура */
    stroke-width: 2px;
    transition: fill 0.3s ease, stroke 0.3s ease;
    cursor: pointer;
}

.fav.active svg path {
    fill: #FF0000;
    /* закрашиваем внутренность */
    stroke: #FF0000;
    /* меняем контур в один цвет */
}

.course,
.group-lessons {
    height: 69px;
    width: 100%;
    border: black 2px solid;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin: 0 0 25px 0;
    padding: 0 38px;
}

.title-author,
.title-target,
.description-lesson,
.title-lesson,
.block-lesson {
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
}

.block-lesson {
    padding: 20px 0;
}

.lessons {
    font-size: 1rem;
    margin-left: auto;
}

.download, .views {
    font-size: 1rem;
    border: black 2px solid;
    border-radius: 10px;
    height: 30px;
    padding: 0 16px;
}

.download{
    margin-left: auto;
}

.views{
    margin: 0 0 0 10px;
}

.description-lesson {
    margin-bottom: auto;
}

.pagination {
    display: flex;
    justify-content: center;
    font-size: 1rem;
    margin-top: auto;
}

.start {
    opacity: 0;
    animation: fadeIn 0.4s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@media (width <=1600px) {
    .lessons-2,
    .courses-block{
        padding: 60px 100px;
    }
}

@media (width <=1024px) {
    .container {
        grid-template-rows: 250px max-content 700px;
    }
    .lessons-2,
    .courses-block{
        padding: 60px;
    }

    .search {
        width: 250px;
    }

    .course,
    .group-lessons {
        height: max-content;
    }
}

@media (width <=830px) {
    .container {
        grid-template-rows: max-content max-content max-content;
    }

    .content {
        grid-template-rows: 500px max-content;
    }

    .start-courses,
    .start {
        h1 {
            font-size: 3.5rem;
            padding: 150px 0;
        }

        button {
            display: none;
        }
    }

    .flex-items-action {
        .void {
            display: none;
        }
    }

    .add-search-filter{
        form{
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
    }

    .add-search-filter {
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 10px;
    }

    .search { order: -3; width: 350px; } 
    .filter-courses { order: -2; } 
    .filter-difficulty { order: -1; } 
    .add { align-self: flex-end;}

    .lessons-2 {
        padding: 40px 60px;
    }
}

@media (width <=780px) {

    .course,
    .group-lessons {
        flex-direction: column;
        align-items: flex-start;
        height: max-content;
        padding: 20px;
        gap: 10px;
    }

    .lessons,
    .lesson {
        margin-left: auto;
    }

}

@media (width <=750px) {
    .container {
        justify-content: stretch;
    }

    .courses-block{
        padding: 60px 40px;
    }

    .content {
        grid-template-rows: 700px max-content;
    }

    .lessons-2 {
        grid-template-rows: initial;
        background: white;
        padding: 60px 40px;
    }

    .fav svg{
        margin: 0;
    }
}

@media (width <=600px) {

    .start-courses,
    .start {
        h1 {
            font-size: 3rem;
        }
    }

    .search {
        width: auto;
    }
}

@media (width <=550px) {
    .content {
        grid-template-rows: 100vh max-content;
    }

    .lessons-2 {
        padding: 80px 20px 40px 20px;
        grid-template-rows: initial;
        height: 100vh;
    }

    .start-courses {
        margin: 0 0 70px 0;
    }

    .start-courses,
    .start {
        padding: 0 20px;
    }

    .courses-block {
        height: 100vh;
        padding: 40px 20px;
    }

    .flex-items-action {
        margin: 0 0 20px 0;
        gap: 20px;
    }

    .course,
    .group-lessons {
        margin: 0;
        padding: 10px;
        border: black 2px solid;
    }

    .back {
        padding: 0 10px;
    }
}

@media (width <= 450px){
    .courses-block{
        height: max-content; /*или фикс высоту, сколько будет плашек уроков и курсов на одной странице?*/
    }
    .lessons-2 {
        height: max-content;
    }
    .course, .group-lessons{
        margin: 0 0 10px 0;
    }

}

@media (350px <=width <=1440px) {
    html {
        font-size: clamp(12px, 10.716px + 0.367vw, 16px);
    }
}