@charset "utf-8";

body { margin: 0px; background-color: #026FD6; overflow: hidden; }

p {
    margin-top: 50px;
    opacity: 0.7;
}

.slideContainer {
    width: 75%;
    margin-top: 0px;
}

.slider::after {
    content: '50';
    color: white;
    font-size: 1rem;
    position: absolute;
    left: 103%;
    top: 10%;
}

.slider::before {
    content: '1';
    color: white;
    font-size: 1rem;
    position: absolute;
    left: -5%;
    top: 10%;
}

#gravitySlider::before {
    content: '0.1';
    left: -8%;
}

#gravitySlider::after {
    content: '1.0';
}

#horizonSlider::before {
    content: 'Hi';
    left: -8%;
}

#horizonSlider::after {
    content: 'Lo';
}

#cloudSlider::after {
    content: '100';
}

.slider {
    -webkit-appearance: none;
    width: 25%;
    height: 20px;
    background: linear-gradient(90deg, #00aa00 0%, #7d7d7d 0%);
    outline: none;
    opacity: 0.5;
    -webkit-transition: 0.5s;
    transition: opacity 0.5s;
    border-radius: 12px;
    box-shadow: 0px 1px 10px 1px black;

}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border: solid 0.375em transparent;
    width: 2.50em;
    height: 2.50em;
    border-radius: 50%;
    box-shadow: 0 2px 5px #7d7d7d;
    background: linear-gradient(#7d7d7d, whitesmoke) padding-box, linear-gradient(#fbfbfb , #c2c2c2) border-box;
    cursor: ew-resize;
}

.slider::-moz-range-thumb {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}