.control-bar {
  position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    color: rgb(153, 187, 187);
    margin-top: 3px;
    margin-bottom: 0;
    text-align: center;
    opacity: 0.5;
    transition-duration: 0.2s;
}

.slidecontainer {

    width: 20%; /* Width of the outside container */
    margin: 5px;
}

/* The slider itself */
.slider {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 10px; /* Specified height */
    background: #0b3c47; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
    transition: opacity 0.2s;
    border-radius: 5px;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

.slider:hover ~p {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 20px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: #307ab6; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 50%;
}

.button {
    position: absolute;
    left: 10px;
    top: 20%;
    border: 2px solid #376e394f; /* Green */
    border-radius: 25%;
    padding: 5px;
    transition-duration: 200ms;
}

#randomize {
    height: 30px;
    width: 30px;
    opacity: 0.7;
    transition-duration: 200ms;
}



.button:hover #randomize{
    opacity: 1;
    cursor: pointer;
}

.button:hover{
  border: 2px solid #50b9537a;
  transform: scale(1.1);
}

.button:active #randomize{
  transform: translateY(3px);
}