@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&text=BRAINTLE&display=swap');

body .topbar .brand-btn.brand-btn {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}
body .topbar .brand-btn.brand-btn .brand-word {
    display: block !important;
    position: relative !important;
    top: .06em !important;
    font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif !important;
    font-weight: 400 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}
body .topbar .brand-btn.brand-btn .brand-logo-icon {
    width: 26px !important; height: 26px !important;
    margin: 0 4px !important;
    top: 0 !important;
    flex: none;
}

@media (max-width: 760px) {
    body .topbar .brand-btn.brand-btn {
        flex: 1 1 auto !important;
        align-self: center !important;
        margin: 0 10px !important;
        padding: 0 !important;
        min-width: 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        justify-content: center !important;
        container-type: inline-size;
    }
    body .topbar .brand-btn.brand-btn .brand-word {
        font-size: 30px !important;
        font-size: min(calc(100cqi / 5.7), 42px) !important;
        color: #5AC8FF !important;
    }
    body .topbar .brand-btn.brand-btn .brand-logo-icon {
        width: 26px !important; height: 26px !important;
        width: min(calc(100cqi / 5.7 * .8), 33px) !important;
        height: min(calc(100cqi / 5.7 * .8), 33px) !important;
        margin: 0 min(calc(100cqi / 5.7 * .12), 5px) !important;
    }
}