main.css

body {
    margin: 1em;
}

header h1 {
    display: flex;
    font-size: revert;
    align-items: center;
}

table {
    border: 0.1em solid;
    padding: 1em;
}

table, #duration {
    margin: 1em;
    border-radius: 3px;
}

td {
    padding:  0.25em;
}

table button {
    display: inline-block;
    width: 3em;
    height: 3em;
    font-size:  1em;
}

input, button {
    font-size:  1em;
}

#duration {
    text-align: left;
    max-width: 240px;
}

#duration label {
    display: block;
}

#current-tone-wrapper {
    font-size: 5em;
}

@media only screen and (max-width: 800px) {
    html {
    }
    body {
        font-size: 3em;
        text-align: center;
    }

    header h1 {
        justify-content:  center;
    }

    table {
        font-size: 4vw;
        margin-left: auto;
        margin-right: auto;
    }

    #duration {
        max-width: 100%;
    }

    #current-tone-wrapper {
        font-size: 2em;
    }
}