body {
    background: url(images/survey-3.svg) no-repeat center center fixed; 
    background-size: cover;            
}


.mood-slider-container {
            text-align: center;
        }
        
.mood-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 15px;
            border-radius: 7.5px;
            background: linear-gradient(to right, #ADD8E6, #FDFF8C);
            outline: none;
            transition: opacity .2s;
        }
        
.mood-slider:hover {
            opacity: 0.8;
        }
        
.mood-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            border: 1px solid #000;
        }
        
.mood-slider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            border: 1px solid #000;
        }
        
.mood-labels {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 0.5rem;
        }
        
.question {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
.navigation-dots {
            text-align: center;
            padding-top: 20px;
        }
        
.dot {
            height: 10px;
            width: 10px;
            margin: 0 5px;
            background-color: #bbb;
            /* Non-active dot color */
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.3s ease;
        }
        
.dot.active {
            background-color: #717171;
            /* Active dot color */
        }