body {
    background-color:#3b403c;
    margin:0;
    padding:0;
    overflow:hidden;
    font-family:Arial, sans-serif;
}

h1 {
    color: var(--accent);
    text-align:center;
    position:absolute;
    width:100vw;
    padding:0;
    top:6vh;
    height:6vh;
}

h1 span {
    background-color:#3b403c;
    display:inline;
    padding:3px;
    font-size:7vh;
    box-shadow:0 0 160px 120px #3b403c;

}

canvas {
    width:max(100vh, 100vw);
    height:max(100vh, 100vw);
}

#bar {
    width:max(40vw, 400px);
    height:8vh;
    border-radius:4vh;
    border:1px solid var(--accent);
    outline:none;
    background-color:white;
    position:absolute;
    top:46svh;
    left:calc(50vw - max(40vw, 400px) / 2);
    box-shadow:0 0 160px 120px var(--accent);
    padding:0 4vh;
    font-size:3vh;
}

#color {
    width:40vw;
    position:absolute;
    bottom:-2px;
    left:30vw;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 50px;
    background: #3b403c;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    box-shadow:0 0 40px 30px var(--accent);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 50px;
    width: 50px;
    background: var(--accent);
    border-radius: 50%;
}
/* Why does firefox need to do this? */
input[type="range"]::-moz-range-track {
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}

input[type="range"]::-moz-range-thumb {
  border: none;
  height: 20px;
  width: 20px;
  background: #007bff;
  border-radius: 50%;
  transition: background 0.15s ease-in-out;
}