header {
    grid-area: header;
    width: 100vw;
    height: 3.75rem;
    background-color: var(--main-color);
    display: flex;
    padding: 0 1.5rem;
    color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);

    .header {
        anchor-name: --header;
        justify-content: space-between;
        align-items: center;
        display: flex;
        flex-direction: row;
        width: 100%;
        max-width: 1920px;
    }

    img {
        height: 2rem;
        width: auto;
    }

    .header-right {
        display: flex;
        align-items: center;

        .header-title {
            font-size: 1.25rem;
            color: #ffffff;
            display: none;
        }

        .help-container {
            padding-right: 1rem;
            display: none;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.25rem;
            text-decoration: none;
            color: #ffffff;

            img {
                display: flex;
                width: 2rem;
                height: 2rem;

                &:hover {
                    transition: transform 200ms;
                    cursor: pointer;
                    transform: scale(1.1);
                }
            }
        }
    }
}

.avatar {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background-color: #ffffff;
    color: var(--main-color);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    border: 0.0625rem solid;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
        cursor: pointer;
        background-color: rgb(240, 248, 255);
    }
}

label[for="slideInSideMenu"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0.1875rem solid #ffffff;
}

#slideInSideMenu {
    display: none;
}

#slideInSideMenu:checked ~ .side-menu {
    transform: translateX(0);
    opacity: 1;
}

#slideInSideMenu:not(:checked) ~ .side-menu {
    transform: translateX(200%);
    opacity: 0;
}

.side-menu {
    position: fixed;
    position-anchor: --header;
    right: anchor(--header right);
    top: anchor(--header bottom);
    border: none;
    background-color: #ffffff;
    z-index: 1001;
    border-radius: var(--border-rad-20) 0 var(--border-rad-20) var(--border-rad-20);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    transform: translateX(200%);
    opacity: 0;
    transition: all 500ms ease-in-out;
}

nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.625rem;

    a {
        text-decoration: none;
        font-size: 1rem;
        color: var(--main-color);
        padding: 0.25rem;

        &:hover {
            cursor: pointer;
            color: var(--main-color-secondary);
        }
    }
}

footer {
    grid-area: footer;
    width: 100%;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    background-color: #ffffff;
    position: fixed;
    gap: unset;
    bottom: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 -0.0625rem 0.375rem rgba(0, 0, 0, 0.1);

    .footer-login-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .nav-login {
        font-size: 0.875rem;
        color: var(--color-menu-item);
    }

    .footer-separator {
        display: flex;
        flex-direction: row;
        gap: 1rem
    }

    .legal-link {
        font-size: 0.875rem;
        color: var(--color-menu-item);
        text-decoration: none;
        &.active {
            color: var(--main-color);
        }

        &:hover {
            color: var(--main-color);
        }
    }

    a {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: var(--color-menu-item);
        padding: 0;
        gap: 0.3125rem;
        font-weight: 400;

        &:hover,
        &.active {
            transition: color 200ms;
            cursor: pointer;
            color: var(--main-color);
        }

        .nav-contacts,
        .nav-board,
        .nav-add-task,
        .nav-summary {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .nav-contacts::before {
            display: flex;
            width: 1.25rem;
            height: 1.25rem;
            content: '';
            background-image: url(../assets/menu_icons/contacts.svg);
            background-size: contain;
        }

        &:hover .nav-contacts::before,
        &.active .nav-contacts::before {
            transition: background-image 200ms;
            background-image: url(../assets/menu_icons/contacts_hover.svg);
        }

        .nav-board::before {
            display: flex;
            width: 1.25rem;
            height: 1.25rem;
            content: '';
            background-image: url(../assets/menu_icons/board.svg);
            background-size: contain;
        }

        &:hover .nav-board::before,
        &.active .nav-board::before {
            transition: background-image 200ms;
            background-image: url(../assets/menu_icons/board_hover.svg);
        }

        .nav-add-task::before {
            display: flex;
            width: 1.25rem;
            height: 1.25rem;
            content: '';
            background-image: url(../assets/menu_icons/add-task.svg);
            background-size: contain;
        }

        &:hover .nav-add-task::before,
        &.active .nav-add-task::before {
            transition: background-image 200ms;
            background-image: url(../assets/menu_icons/add-task_hover.svg);
        }

        .nav-summary::before {
            display: flex;
            width: 1.25rem;
            height: 1.25rem;
            content: '';
            background-image: url(../assets/menu_icons/summary.svg);
            background-size: contain;
        }

        &:hover .nav-summary::before,
        &.active .nav-summary::before {
            transition: background-image 200ms;
            background-image: url(../assets/menu_icons/summary_hover.svg);
        }
    }
}

@media (width <= 350px) {

    .nav-contacts,
    .nav-board,
    .nav-add-task,
    .nav-summary {
        font-size: 14px;
    }
}

@media (width >= 50.75rem) {
    header {
        height: 6rem;
        padding: 0 2.5rem;

        img {
            height: 3.5rem;
        }

        .link-none {
            display: none;
        }

        .header-right .help-container,
        .header-right .header-title {
            display: flex;
        }
    }

    footer {
        display: none;
    }

    label[for="slideInSideMenu"] {
        width: 3.5rem;
        height: 3.5rem;
    }

    .avatar {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }
}