styles.css

/************************************************
*---------------- GLOBAL STYLES ----------------*
************************************************/

html {
    font-family: 'Cambria';
    font-size: 2vh;
    text-align: center;
}

body {
    color: #E1E1E1;
    background: repeating-linear-gradient(
        45deg,
        #1E1E1E,
        #1E1E1E 25px,
        #282828 25px,
        #282828 50px
    ) fixed;
}

hr {
    border-style: groove;
}

/************************************************
*--------------- HEADER / FOOTER ---------------*
************************************************/

header p {
    font-size: 2.5vh;
    margin-bottom: 0;
}

header p:first-child:before, header p:first-child:after {
    content: ' ';
    width: 4.5em;
    height: 1px;
    display: inline-block;
    border-bottom: 1px solid #888;
    position: relative;
    top: -0.35em;
    margin: 0 .5em;
}

header div {
    font-size: 10vh;
    text-shadow: 2px 2px #B7BD9B;
    color: #F5F5F5;
}

footer div {
    font-family: 'Open Sans Light';
    font-size: 1.5vh;
}

footer button {
    background-color: #323232;
    border: none;
    border-radius: 4px;
    font-size: 1.5vh;
    color: #E1E1E1;
    padding: 0.75vh 10px;
    margin-top: 2vh;
    margin-bottom: 1vh;
    cursor: pointer;
}

footer p {
    display: inline-block;
    opacity: 0.5;
}

footer a {
    opacity: 0.75;
    color: #B7BD9B;
}

/************************************************
*------------------- CONTENT -------------------*
************************************************/

#canvas {
    background-color: #191919;
    border-color: #282828;
    border-style: solid;
    border-width: 1px;
}

#controls {
    width: 60vh;
    margin: auto;
}

.right, form {
    font-family: 'Open Sans Light';
}

input:focus {
    outline: none;
}

input[type=radio] {
    height: 1.45vh;
}

.right { float: right; }
.left { float: left; }
.row { display: flex; }
.column { flex: 50%; }

/************************************************
*------------------- SLIDERS -------------------*
************************************************/

.sliderStyle {
    border-radius: 5px;
    height: 2.5vh;
    width: 90%;
    margin-top: 0.75vh;
    margin-bottom: 0.75vh;
    padding-left: 5%;
    padding-right: 5%;
}

#vapeColorSliderStyle {
    /* In order: gold, cyan, grey, white, black, red, orange, blue, burgundy */
    background: linear-gradient(to right,
        #FBE5D2 00%, #FBE5D2 11%,
        #55FEF2 11%, #55FEF2 22%,
        #7D7D7D 22%, #7D7D7D 33%,
        #FEFEFE 33%, #FEFEFE 44%,
        #212322 44%, #212322 55%,
        #FD564E 55%, #FD564E 66%,
        #FCA53D 66%, #FCA53D 77%,
        #0E5DEF 77%, #0E5DEF 88%,
        #BA3237 88%, #BA3237 99%);
}

#woodColorSliderStyle {
    /* In order: none, sun yellow, azo orange, permanent cyan, permanent red violet, permanent blue violet, permanent green, marine blue, sap green, oxide black */
    background: linear-gradient(to right,
        #FFFFFF  0%, #FFFFFF 10%,
        #FFC01B 10%, #FFC01B 20%,
        #FF8003 20%, #FF8003 30%,
        #06B4F5 30%, #06B4F5 40%,
        #D93D64 40%, #D93D64 50%,
        #551865 50%, #551865 60%,
        #16A773 60%, #16A773 70%,
        #13435C 70%, #13435C 80%,
        #365B3B 80%, #365B3B 90%,
        #252525 90%, #252525 100%);
}

input[type=range] {
    -webkit-appearance: none;
    background: transparent;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #E9E9E9;
    border: 1px solid #CECECE;
    height: 3.5vh;
    width: 10px;
}

input[type=range]::-moz-range-track {
    -webkit-appearance: none;
    background: transparent;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    background-color: #E9E9E9;
    border: 1px solid #CECECE;
    height: 3.5vh;
    width: 10px;
}

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

input[type=range]::-ms-fill-lower {
    background: transparent;
    border: none;
}

input[type=range]::-ms-fill-upper {
    background: transparent;
    border: none;
}

input[type=range]::-ms-track {
    background: transparent;
    color: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
}

input[type=range]::-ms-thumb {
    background: transparent;
    border: none;
}