html, body {
    width: 250px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

body {
    padding: 5px 20px;
}

.hidden {
    display: none;
}

h2 {
    font-size: 18px
}

#slider {
    width: 100%;
    background: #d3d3d3;
    height: 10px;
    border-radius: 5px;
    margin-bottom: 24px;
}

*:focus {
    outline: unset;
    box-shadow: none;
}

input[type='range']::-moz-focus-outer {
    border: 0;
}

/* Special styling for input knob for the Firefox */
#slider::-moz-range-thumb {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: none;
    background: url('angry.svg');
}

#slider.slider-happy::-moz-range-thumb {
    background: url('happy.svg');
}

#slider.slider-09::-moz-range-thumb {
    background: url('1f60a.svg');
}

#slider.slider-08::-moz-range-thumb {
    background: url('1f642.svg');
}

#slider.slider-07::-moz-range-thumb {
    background: url('1f914.svg');
}

#slider.slider-06::-moz-range-thumb {
    background: url('1f620.svg');
}

#slider.slider-05::-moz-range-thumb {
    background: url('1f621.svg');
}

#slider.slider-happy::-moz-range-thumb {
    background: url('happy.svg');
}

/* All the same stuff for WebKit/Blink */
#slider::-webkit-slider-thumb {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: none;
    background: url('happy.svg');
}

#slider.slider-happy::-webkit-slider-thumb {
    background: url('angry.svg');
}

#slider.slider-09::-webkit-slider-thumb {
    background: url('1f60a.svg');
}

#slider.slider-08::-webkit-slider-thumb {
    background: url('1f642.svg');
}

#slider.slider-07::-webkit-slider-thumb {
    background: url('1f914.svg');
}

#slider.slider-06::-webkit-slider-thumb {
    background: url('1f620.svg');
}

#slider.slider-05::-webkit-slider-thumb {
    background: url('1f621.svg');
}

/* All the same stuff for IE */
#slider::-ms-thumb {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: none;
    background: url('angry.svg');
}

#slider.slider-happy::-ms-thumb {
    background: url('happy.svg');
}

#slider.slider-09::-ms-thumb {
    background: url('1f60a.svg');
}

#slider.slider-08::-ms-thumb {
    background: url('1f642.svg');
}

#slider.slider-07::-ms-thumb {
    background: url('1f914.svg');
}

#slider.slider-06::-ms-thumb {
    background: url('1f620.svg');
}

#slider.slider-05::-ms-thumb {
    background: url('1f621.svg');
}

label {
    display: flex;
    margin: 0 auto;
    padding: 5px 0;
    cursor: pointer;
}

label > span {
    font-size: 16px;
}

p {
    font-size: 16px;
}

p.sliderValues {
    margin: 2em 0 0;
    font-size: 14px;
}

.link {
    font-size: 14px;
    text-align: center;
}

#rangeText {
    display:flex;
    justify-content: space-between;
    margin: 0 auto;
}
