header {
    width: 100%;
    height: 62px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: var(--page-padding) var(--page-padding) 0 var(--page-padding);

    img {
        height: 100%
    }

    nav {
        display: flex;
        gap: 10px;

        div.menu-box {
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: var(--font-weight-bold);
            background-color: white;
            box-shadow: var(--box-shadow);
            border-radius: var(--border-radius-box);
            padding: 0 var(--page-padding);
            gap: var(--page-padding);
            cursor: default;

            a {
                height: 100%;
                display: flex;
                align-items: center;
                transition: .2s;
            }

            a:hover, a.active {
                color: var(--color-primary);
            }
        }

        div.user {
            gap: 2px;

            svg {
                height: 18px;
                width: 18px;
                margin: 0 -4px 1px 0;
            }

            div.user-menu-frame {
                position: fixed;
                top: 62px;
                right: var(--page-padding);
                display: none;
                opacity: 0;
                padding-top: 10px;
                transition: opacity .2s ease, display .2s ease;
                transition-behavior: allow-discrete;
                z-index: 99;

                div.user-menu-frame-content {
                    display: flex;
                    flex-direction: column;
                    font-size: 14px;
                    font-weight: var(--font-weight-normal);
                    list-style: none;
                    background-color: white;
                    box-shadow: var(--box-shadow);
                    border-radius: var(--border-radius-box);
                    margin: 0;
                    padding: var(--page-padding);
                    gap: 12px;
                }
            }
        }

        div.user:hover {
            div {
                display: block;
                opacity: 1;

                @starting-style {
                    opacity: 0;
                }
            }
        }
    }
}