#topbar, .topbar {
    margin: 4px;

    display: flex;
    /* z-index: 1; */
    align-items: center;
    /* background: ; */
    /* backdrop-filter: blur(12px); */
    gap: 2px;

    a {
        font-size: 18px;
        color: #fff;
        background-color: #3C096C;
        border-radius: 8px;
        padding: 4px;
        text-decoration: none;

        /* text-shadow: 1px 1px rgb(0, 0, 0); */
        * {
            /* mix-blend-mode: color-dodge; */
            color: #fff;
        }
    }

    a:hover {
        background-color: #C77DFF;

        * {
            color: #fff;
            /* mix-blend-mode: normal !important; */
            /* color: var(--color1) !important; */
        }

    }

    #logo {
        font-family: "soopafre" !important;
        color: var(--color8);
        border: none !important;
        align-self: flex-start;
    }

}

.topbar-selected {
    color: var(--color8);
    background: #C77DFF !important;
    /* background-color: #FEE440 !important; */

    * {
        color: var(--color8) !important;
        /* mix-blend-mode: normal !important; */
        /* color: var(--color1) !important; */
    }

    /* box-shadow: 2px 2px rgb(0, 0, 0); */
    /* background-color:white; */
    /* padding-bottom: 2px; */
    /* border-bottom: solid var(--color1) 4px; */
}