.title-bar::before {
    position: absolute;
    inset: 0px;
    content: "";
    z-index: -1;
    background: #1319247F;
    backdrop-filter: blur(10px);
    mask: linear-gradient(to top, transparent, black 25%);
}

.title-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding-top: 10px;
    padding-bottom: 25px;
    width: 100%;
    height: 60px;

    .title-buttons {
        display: flex;
        align-items: center;
        flex-direction: row;
        overflow: auto hidden;
        &::-webkit-scrollbar {
            color: transparent;
            width: 2px;
        }
    }

    .title-buttons > a > button {
        height: 50px;
        padding: 20px;
        background-color: transparent;
        border-radius: 80px;
        font-size: 30px;
        line-height: 40%;
        text-align: center;
        margin: 0 10px;
        color: white;
        transition: 200ms ease-in-out;
        transition-property: color, background-color;
        border-width: 0;
        &.highlighted-button, &:hover {
            background: white;
            color: black;
            &:active {
                background: gray;
            }
        }
    }

    .title-left {
        display: flex;
        align-items: center;
        * {cursor: pointer; color: white;}
        &:hover {filter: opacity(70%);}
        &:active {filter: opacity(40%);}
    }

    .title-logo {
        margin-right: 10px;
        margin-left: 17px;
        height: 70px;
    }
}