style.css

/* Based on Josh Comeau blog post: https://www.joshwcomeau.com/css/custom-css-reset/ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

/* End of CSS reset */


html,
body,
#elm {
    height: 100%;
}

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px;
    gap: 10px;
}

/* SETTINGS */

section {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    align-self: center;
    align-items: center;
    gap: 20px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

form>div {
    flex-grow: 1;
    display: flex;
    gap: 10px;
}

form>div>label {
    flex: 1 0 190px;
}

form>div>input[type="text"] {
    width: 10ch;
    text-align: right;
}

form>div>input[type="range"] {
    max-width: 500px;
    width: 100%;
}

@media screen and (max-width: 510px) {
    form>div {
        flex-wrap: wrap;
    }

    form>div>input[type="range"] {
        order: 2;
    }
}

/* RESULTS */

table {
    min-width: 810px;
    width: 100%;
}

thead {
    position: sticky;
    top: 0;
    background: #fff;
}

thead>th {
    word-wrap: none;
}

th {
    text-align: right;

}

td {
    text-align: right;
}

tbody>tr:nth-child(odd) {
    background-color: #eee;
}

tbody>tr:hover {
    background-color: #ccc;
}

#results {
    overflow: auto;
    padding: 0 10px;
}

/* ACTIONS */

#actions {
    display: flex;
    gap: 10px;
}