@media (max-width: 600px) {
    #top-bar {
        padding: 0 5px;
    }
    #top-bar #button-bar {
        padding: 0 5px;
        gap: 10px;
    }
    #title-bar {
        padding: 0 5px;
    }
    #bottom-bar {
        justify-content: right;
        align-items: center;
        gap: 10px;
    }
    #bottom-bar>*:last-child {
        margin-right: 10px;
    }
    .bar-item {
        padding: 3px 5px;
        font-size: 14px;
    }
    #top-bar .material-symbols-outlined, #bottom-bar .material-symbols-outlined {
        font-size: 20px;
    }
    .material-symbols-outlined.penalty-icon {
        font-size: 12px;
    }
    #letters-used>.material-symbols-outlined{
        font-size: 14px !important;
    }
    #logo {
        background: url("../images/vierte-logo-icon.png") no-repeat center;
        background-size: contain;
        height: 20px;
        width: 30px;
    }
}