uix-header {
    & {
        --bgImg: url("");
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: var(--bgImg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 60% 40%;
        flex-direction: column;
        box-shadow: 0px 10px 20px black;
        background-color: black;
        position: relative;
        width: 100vw;
        overflow: visible;
    }
    
    .row1, .row2 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        padding: 15px;
        margin-bottom: 10px;
        width: 100%;
        height: 90px;
    }
    
    .row2 {
        display: none;
    }
    
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-direction: column;
        width: 100%;
    
        & > h1 {
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 20px;
            color: white;
        }
    }
    .left, .right {
        max-width: 50px;
        width: 100%;
        display: flex;
        justify-content: start;
        align-items: start;
        align-self: start;
        gap: 10px;
    }
    
    .left {
        & > button {
            background-color: rgb(255, 255, 255, 50%);
            color: rgb(53, 53, 53);
            border: transparent;
            margin: 0;
            width: 50px;
            height: 50px;
            padding: 0;
        }
    }
    
    .right {
        & > a {
            & > img {
                max-width: 50px;
                min-width: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 20%;
                opacity: 95%;
            }
        }
    }
    
    h1 {
        font-family: Cambria;
        text-align: center;
        display: flex;
        margin-top: 0%;
        margin-bottom: 0.2%;
        justify-content: center;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    }
    
    #sidemenu[popover] {
        border: 0px;
        top: 0;
        width: 70vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        left: 0;
        box-shadow: 10px 0px 20px black;
        &::backdrop {
            backdrop-filter: blur(20px);
        }
        transition: opacity 0.5s, transform 0.5s, display 0.5s allow-discrete;
        opacity: 1;
        z-index: 999;
        transform: translateX(-70vw);
    
        &:popover-open {
            opacity: 1;
            transform: none;
    
            /* [[UIX moved @starting-style]] */
        }
    }
    
    @media (min-width: 950px) {
        [popover] {
            display: none;
            &::backdrop {
                backdrop-filter: blur(0px);
            }
        }
    
        .left {
            max-width: 100px;
            & > button {
                display: none;
            }
        }
    
        .right {
            max-width: 100px;
            max-height: 120px;
            align-items: center;
            & > a {
                & > img {
                    max-width: 140px;
                    min-width: 70px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 20%;
                    opacity: 95%;
                }
            }
        }
    
        .row2 {
            display: flex;
            padding-bottom: 0;
            width: 100vw;
            height: 50px;
            justify-content: center;
            align-items: center;
            flex-direction: row;
        }
    }
    
}

@starting-style {
            & {
                opacity: 0;
                transform: translateX(-70vw);
            }
        }