html,
body {
    margin: 0;
    height: 100%;
}

@font-face {
    font-family: Hianali;
    src: url(../../lib/fonts/Hianali.ttf);
}

@font-face {
    font-family: Norkirk;
    src: url(../../lib/fonts/NorKirk.ttf);
}

@font-face {
    font-family: VarelaRound;
    src: url(../../lib/fonts/VarelaRound.ttf);
}

.td_controls {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin-top: -5px;
}
.td_item {
    flex: 0 0 auto;
}

input[type='range'] {
    width: 100%;
    margin: 5.6px 0;
    background-color: transparent;
    -webkit-appearance: none;
}
input[type='range']:focus {
    outline: none;
}
input[type='range']::-webkit-slider-runnable-track {
    background: #aaaaaa;
    border: 0;
    border-radius: 25px;
    width: 100%;
    height: 3.8px;
    cursor: pointer;
}
input[type='range']::-webkit-slider-thumb {
    margin-top: -5.6px;
    width: 16px;
    height: 15px;
    background: #ffffff;
    border: 0.1px solid #1f2933;
    border-radius: 50px;
    cursor: pointer;
    -webkit-appearance: none;
}
input[type='range']:focus::-webkit-slider-runnable-track {
    background: #b2b2b2;
}
input[type='range']::-moz-range-track {
    background: #aaaaaa;
    border: 0;
    border-radius: 25px;
    width: 100%;
    height: 3.8px;
    cursor: pointer;
}
input[type='range']::-moz-range-thumb {
    width: 16px;
    height: 15px;
    background: #ffffff;
    border: 0.1px solid #1f2933;
    border-radius: 50px;
    cursor: pointer;
}
input[type='range']::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 5.6px 0;
    color: transparent;
    width: 100%;
    height: 3.8px;
    cursor: pointer;
}
input[type='range']::-ms-fill-lower {
    background: #a2a2a2;
    border: 0;
    border-radius: 50px;
}
input[type='range']::-ms-fill-upper {
    background: #aaaaaa;
    border: 0;
    border-radius: 50px;
}
input[type='range']::-ms-thumb {
    width: 16px;
    height: 15px;
    background: #ffffff;
    border: 0.1px solid #1f2933;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
}
input[type='range']:focus::-ms-fill-lower {
    background: #aaaaaa;
}
input[type='range']:focus::-ms-fill-upper {
    background: #b2b2b2;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align: auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type='range'] {
        margin: 0;
        /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
}

.text-block {
    max-width: 800px;
    margin: 3rem auto;
    padding: 0 1.25rem;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
}

.text-block__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2933; /* dark, neutral */
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.text-block__body {
    font-size: 1.2rem;
    color: #3c444f; /* softer than title */
    line-height: 1.7;
    margin: 0;
    margin-bottom: 0.75rem;
}