body {
    --aside_max_width: 500px;
    margin: 0;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    row-gap: 50px;
    font-size: 1.6rem;
    @media screen and (max-width: 900px) {
        padding-inline: 20px;
    }
    & > .header_wrapper {
        padding-block-start: 50px;
        & > header {
            display: flex;
            column-gap: 70px;
            @media screen and (max-width: 500px) {
                column-gap: 30px;
            }
            & > figure {
                flex-shrink: 0;
                margin: 0;
            }
            & > menu {
                flex-grow: 1;
                display: flex;
                column-gap: 50px;
                padding-inline-start: 0;
                list-style: none;
                font-size: 1.8rem;
                margin-block: 0;
                @media screen and (max-width: 500px) {
                    column-gap: 20px;
                }
                & > li {
                    &:is(:last-child) {
                        flex-grow: 1;
                        text-align: end;
                    }
                }
            }
        }
        &:has(span:focus-within) {
            & + .aside_wrapper {
                max-width: var(--aside_max_width);
                box-shadow: -5px 0 7px rgb(0 0 0 / 0.2);
            }
        }
    }
    & > .aside_wrapper {
        position: fixed;
        inset-inline-end: 0;
        inset-block: 0;
        max-width: 0;
        overflow: hidden;
        background-color: white;
        transition: max-width 0.2s;
        background-color: ghostwhite;
        &:has(:focus-within) {
            max-width: var(--aside_max_width);
        }
        & > aside {
            padding: 20px;
            white-space: nowrap;
            & > #f_signin {
                display: flex;
                flex-direction: column;
                row-gap: 10px;
                & > div {
                    & > input {
                        width: stretch;
                        max-width: 300px;
                    }
                }
            }
        }
    }
    & > .main_wrapper {
        & > main {
            min-height: 500px;
        }
    }
    & > .footer_wrapper {
        & > footer {
            text-align: center;
        }
    }
}