html,body {
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 100%;
    margin: 0;
}

#how-many-holder{
    margin-top: 45vh;
}

#how-many {
    -webkit-appearance: none;
    width: 33vw;
    height: 5vh;
    border-radius: 2.5vh;  
    background: #fff;
    outline: none;
    opacity: 1;
    animation: float-down 1s;
}

#how-many:hover {
    opacity: 0.75;
}

#how-many::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 5vh;
    height: 5vh;
    border-radius: 50%; 
    background: #111;
    border: 2.5px solid white;
    cursor: pointer;
}

@keyframes float-down {
    0% {transform: translate(0,-50vh) rotate(15deg); opacity: 0; width: 5vh;}
}

#places {
    position: absolute;
}

.place {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: white;
    /*background-image: linear-gradient(45deg, #cfeddf, #385350);*/
    border-radius: 100%;
    transform: scale(0);
    animation: fade-out 2s;
}

@keyframes fade-out {
    25% {transform: scale(1.25); opacity: 1;}
    100% {transform: scale(0); background-color: #ffb600;}
}

.body {
    background-color: rgba(255,255,255,0.2);
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    border: 2px solid white;
    z-index: 100;
    opacity: 0.3;
}