*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main {
    margin: var(--base-size-x2) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--base-size-x8);
    padding-bottom: var(--base-size-x10);
}

.main h1 {
    font-size: var(--base-h1-font-size);
    text-align: center;
    font-family: "Lobster", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--base-text-color);
}

.center {
    border-radius: 0 0 var(--base-border-radius-x6) var(--base-border-radius-x6);
    background: linear-gradient(191deg, var(--base-background-color) 30%, var(--base-color-light-orange) 62%);
    width: 100%;
    min-width: 0;
}

common-lessons-nav { display: block; width: min(100%, 900px); min-width: 0; }
.common-lessons-nav { max-width: 100%; justify-content: center; }

.searchBox {
    border-radius: var(--base-border-radius-x6);
    border: none;
    padding: var(--base-size-x2);
    background-color: var(--base-background-color-shadow);
}


form {
    justify-content: space-between;
    padding: var(--base-padding);
    border-radius: var(--base-border-radius-x4);
    border: none;
    background-color: var(--base-color-light-orange);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}

input {
    border: none;
    background-color: transparent;
    padding: var(--base-padding);
    color: var(--base-text-color)
}

input:focus {
    outline: none;
}

input::placeholder{
    font-size: var(--base-body-font-size);
}

.important-button {
    border: none;
    background-color: var(--base-color-orange);
    color: var(--base-on-accent);
    padding: var(--base-padding);
    border-radius: var(--base-border-radius-x3);
    font-size: var(--base-button-large-font-size);
    font-weight: var(--base-medium-font-weight);
    transition: var(--base-transition);
}

.important-button:hover {
    transform: scale(1.05);
    font-size: var(--base-button-large-font-size);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.common-lessons-nav {
    padding: var(--base-size-x2);
    background-color: var(--base-background-color-shadow);
    border-radius: var(--base-border-radius-x4);
    display: flex;
    justify-content: space-between;
    gap: var(--base-size-x2);
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    flex-wrap: wrap;
}

.common-lessons-nav a {
    color: var(--base-text-color);
    border-radius: var(--base-border-radius-x3);
    border: solid 0.3px var(--base-color-grey);
    padding: var(--base-padding);
    transition: var(--base-transition);
}

.common-lessons-nav a:hover {
    background-color: var(--base-background-color);
    border: solid 0.3px var(--base-color-white);
}

.common-lessons-nav {
    max-height: 200px; /* 200px-аас дээш хэтэрвэл scroll үүснэ */
    overflow-y: auto;  /* Босоо scroll идэвхжүүлнэ */
    padding: 10px;
}

.container{
    margin:var(--base-size-x3) var(--base-size-x10) var(--base-size-x10) var(--base-size-x10);
}

.tutors-box {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 22%));
    grid-template-rows: auto;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    justify-items: stretch;
    align-items: stretch;
}

.tutors-box a{
    width: 100%;
    height: 100%;
    color: var(--base-text-color);
    align-items: stretch;
}

#starsNumber {
    font-weight: var(--base-bold-font-weight);
}

@media (max-width: 900px) {
    .tutors-box {
        grid-template-columns: repeat(2, minmax(0, 46%));
        gap: var(--base-size-x2);
        grid-template-rows: auto;
    }
}

@media (max-width: 500px) {
    .container{
        margin:var(--base-size-x5) var(--base-size-x2) var(--base-size-x4);
    }
    .center { gap: var(--base-size-x4); padding: var(--base-size-x5) var(--base-size-x2); }
    .main h1 { font-size: 28px; }
    .searchBox { width: 100%; max-width: 420px; padding: var(--base-size); }
    .searchBox form { display: flex; width: 100%; }
    .searchBox input { width: 100%; min-width: 0; }
    .common-lessons-nav { justify-content: flex-start; flex-wrap: nowrap; }
    .container h2 { font-size: 22px; margin-bottom: 16px; }
}