simple.css

@charset "utf-8";

nav span {
    margin-right: 1ex;
}

article {
    line-height: 1.8;
    margin-bottom: 10ex;
}

input {
    width: 90vw;
}

button {
    margin-top: 2ex;
    width: 90vw;
}

canvas {
    margin-top: 2ex;
    border: 1px solid gray;
}

.table .row .cell {
    margin-bottom: 1ex;
}

@media (orientation: landscape) {

    article {
        line-height: 1.5;
    }

    input {
        width: 90vh;
    }

    button {
        width: 90vh;
    }

    @media (min-width: 768px) {

        input {
            width: auto;
        }

        button {
            margin-top: 0ex;
            width: auto;
        }

        .table {
            display: table;
        }

        .table .row {
            display: table-row;
        }

        .table .row .cell {
            display: table-cell;
            padding: 0ex 0.5ex;
            vertical-align: middle;
        }

    }

}