/* =====================================
   ЛОГОТИП
===================================== */

.logo-link {

    color: var(--text-color);
    
    display: flex;

    align-items: center;

    text-decoration: none;

}

.logo {

    width: 28px;

    height: 28px;

    display: block;

    transition: transform .25s ease;

}

.logo-link:hover .logo {

    transform: translateY(-2px) scale(1.05);

}

/* =====================================
   CONTAINER
===================================== */

.container {

    width: min(1200px, 90%);

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    position: relative;

    z-index: 1;

}

/* =====================================
   HEADER
===================================== */

.header {

    width: min(1200px, 90%);
    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    padding: 40px 0;
    
    z-index: 1000;

}

.header-left {

    justify-self: start;

}

.navigation {

    justify-self: center;

}

/* =====================================
   HEADER CONTROLS
===================================== */

.controls {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 5px;

    justify-self: end;

}

.header-control {

    background: none;

    border: none;

    padding: 0;

    cursor: pointer;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.12em;

    color: var(--text-color);

    transition:
        color .25s ease,
        transform .25s ease;

}

.header-control:hover {

    color: var(--primary-color);

}

.header-control:focus {

    outline: none;

}

/* =====================================
   NAVIGATION
===================================== */

.navigation ul {

    display: flex;

    list-style: none;

    gap: 55px;

}

.navigation a {

    position: relative;

    display: inline-block;

    text-decoration: none;

    color: var(--nav-color);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.18em;

    transition:
        color .3s ease,
        transform .3s ease;

}

.navigation a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -6px;

    width: 0;

    height: 2px;

    background: var(--primary-color);

    transform: translateX(-50%);

    transition: width .3s ease;

}

.navigation a:hover {

    color: var(--text-color);

    transform: translateY(-2px);

}

.navigation a:hover::after {

    width: 100%;

}

/* =====================================
   CONTROLS
===================================== */

.top-button {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    border: 1px solid rgba(54,181,26,.15);

    background: rgba(255,255,255,.85);

    transition: .25s;
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 600px) {

.navigation ul {

    column-gap: 37px;
    row-gap: 0;
    flex-wrap: wrap;
    justify-content: center;

}

.navigation a {

    font-size: 9px;

    letter-spacing: 0.14em;
}

.navigation {
    max-width: 300px;
    position: relative;
    top: -3px;
}

.logo {
    width: 36px;
    height: 36px;
}

.header-control {

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

#themeButton {

    font-size: 10px;
}

}