#meter {  
    position: relative;  
    width: 150px;   
    height: 80px; /* Adjust height for half-circle */  
    overflow: visible; /* Make sure overflow is visible for the needle */  
}  

#needle {  
    position: absolute;  
    width: 2px;  
    height: 70px;  
    background-color: red;  
    top: 0px; /* Position the center of the needle */  
    left: 50%;  
    transform-origin: bottom;  
    transform: rotate(-180deg);  
}  

#text {  
    position: absolute;  
    bottom: 28px; /* Adjust for the space above */  
    left: 45%;  
    transform: translateX(-30%); 
    width: 80%; 
    font-size: 10px;  
}  

#meter::before {  
    content: '';  
    position: absolute;  
    width: 150px;  
    height: 80px;  
    background-color: white;  
    border-radius: 200px 200px 0 0; /* Half-circle */  
    border: 5px solid #333;  
    top: 0;  
    left: 0;  
}  

input[type="range"] {  
    width: 90%;  
    margin-top: 18px;  
}