@media screen and (max-width: 400px){
    #app .card{
        padding: 5px;
    }

    .card-header{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #app .input-group{
        border-bottom: 1px solid black;
        margin: 35px 0;
        max-width: 100%;
    }

    #app.dark .input-group{
        border-bottom: 1px solid white;
    }

    #app .title, #app .score{
        font-size: 14px;
        font-weight: 400;
        margin-left: 0;
    }

    #app h2{
        font-size: 22px;
        margin: 0;
    }

    #app h3{
        font-size: 16px;
    }

    #app legend{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        color: black;
        border-top: 1px solid black;
        width: 100%;
    }

    #app fieldset *{
        width: 100%;
    }

    #app fieldset b{
        display: none;
    }

    #app.dark legend{
        border-top: 1px solid white;
    }

    #app.dark legend{
        color: white;
    }

    #app .cat-score{
        margin-left: 0;
    }
}