index.css

/*
 *
 */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'),
         local('Roboto-Light'),
         url('roboto-light.woff2') format('woff2'),
         url('roboto-light.woff') format('woff');
}

* {
    font-family: roboto, sans-serif;
    font-weight: 300;
}
body {
    font-size: 1.2em;
    margin-top: 0;
}
input,
button,
select {
    font-size: inherit;
    min-width: 3em;
}
input,
select {
    border: 0;
    background: transparent;
    border-bottom: 2px solid #cecece;
    text-align: center;
}
input:focus,
select:focus {
    outline: 0;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"] {
    -moz-appearance: textfield;
}
.toggle input {
    display: none;
}
.toggle label {
    display: inline-block;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #637280;
    cursor: pointer;
    padding: 0.5em 1em;
}
.toggle input:checked + label {
    color: #fff;
    background-color: #545969;
}
header {
    display: flex;
    justify-content: space-between;
    background: #f0f0f0;
    padding: 0.7em;
}
header .field,
#timer {
    display: inline-block;
}
#timer.play button:after {
    content: '▶';
}
#timer.stop button:after {
    content: '■';
}
main {
    padding-top: 2em;
    columns: 3;
    text-align: center;
}
main .op {
    font-size: 2em;
    line-height: 1.7em;
}
main .op, main footer {
    transition: opacity 1.7s;
}
main .op .a,
main .op .b {
    display: inline-block;
    min-width: 1.1em;
}
main .op .sign {
    font-size: 0.6em;
    vertical-align: top;
}
main .op input {
    min-width: inherit;
    width: 2em;
    transition: border-bottom-color 0.7s;
}
main .op.err input {
    color: red;
    border-bottom-color: red;
}
main footer {
    break-inside: avoid;
    margin-top: 2em;
}
main footer output[name="timer"] {
    display: block;
    font-size: 1em;
    padding-top: 0.5em;
}
main footer output[name="score"] {
    display: block;
    padding-top: 0.5em;
    min-height: 150px;
    font-size: 1.7em;
    transform: rotate(-7deg);
    font-family: "Comic Sans MS", "Comic Sans", cursive;
}

/* https://github.com/una/animated-emojis
 * https://dribbble.com/shots/1925708-Emojis
 */
.emojis {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url(emojis.gif);
    background-repeat: no-repeat;
}
                                /* -106px -106px */
.emojis--01 { background-position: -37px  -39px; }
.emojis--02 { background-position: -143px -39px; }
.emojis--03 { background-position: -249px -39px; }
.emojis--04 { background-position: -355px -39px; }
.emojis--05 { background-position: -461px -39px; }
.emojis--06 { background-position: -567px -39px; }
.emojis--07 { background-position: -673px -39px; }

.emojis--08 { background-position: -37px  -145px; }
.emojis--09 { background-position: -143px -145px; }
.emojis--10 { background-position: -249px -145px; }
.emojis--11 { background-position: -355px -145px; }
.emojis--12 { background-position: -461px -145px; }
.emojis--13 { background-position: -567px -145px; }
.emojis--14 { background-position: -673px -145px; }

.emojis--15 { background-position: -37px  -251px; }
.emojis--16 { background-position: -143px -251px; }
.emojis--17 { background-position: -249px -251px; }
.emojis--18 { background-position: -355px -251px; }
.emojis--19 { background-position: -461px -251px; }
.emojis--20 { background-position: -567px -251px; }
.emojis--21 { background-position: -673px -251px; }

.emojis--22 { background-position: -37px  -357px; }
.emojis--23 { background-position: -143px -357px; }
.emojis--24 { background-position: -249px -357px; }
.emojis--25 { background-position: -355px -357px; }
.emojis--26 { background-position: -461px -357px; }
.emojis--27 { background-position: -567px -357px; }
.emojis--28 { background-position: -673px -357px; }

.emojis--29 { background-position: -37px  -463px; }
.emojis--30 { background-position: -143px -463px; }
.emojis--31 { background-position: -249px -463px; }
.emojis--32 { background-position: -355px -463px; }
.emojis--33 { background-position: -461px -463px; }
.emojis--34 { background-position: -567px -463px; }
.emojis--35 { background-position: -673px -463px; }

/*
 * Media queries
 */

@media print {
    header,
    footer {
        display: none;
    }
}
@media only screen and (max-width: 800px) {
    main {
        columns: 2;
    }
}
@media only screen and (max-width: 600px) {
    .field {
        display: block;
        margin-top: 0.3em;
    }
    main {
        columns: 1;
    }
    .toggle label {
        padding: 0.2em 0.5em;
    }
    .field label[for="qty"], .field label[for="nos"] {
        display:none;
    }
    .field input[name="qty"], .field input[name="nos"] {
        width:2em;
    }
}