body{
    font-family: 'Overpass', sans-serif;
    background-color:hsl(216, 12%, 8%);
    color:hsl(0, 0%, 100%);
    display:flex;
    justify-content:center;
    align-items:center;
}
.rate{
    background-color:hsl(213, 19%, 18%);
    width:16rem;
    padding:1rem;
   border-radius:15px;
   position: absolute; 
   top: 50%; 
   left: 50%; 
   transform: translate(-50%, -50%);

}

.title{
    font-size:15px;
    font-weight: bold;
}
p{
    font-size:11px;
   color: hsl(217, 12%, 63%);
}
.circle{
    border-radius:50px;
    width: 30px;
    height: 30px;
    background-color:hsl(216, 12%, 54%);
    margin:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    

}
.coloredCircle{
    border-radius:50px;
    width: 30px;
    height: 30px;
    background-color:hsl(25, 97%, 53%);
    margin:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
}
.circle:hover{
    background-color:hsl(217, 12%, 63%);
 
}
.degrees{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-bottom:10px;
}

img{
    width: 8px;
    height: 8px;  
}
button{
    border-radius:10px;
    outline: none;
    border:none;
    font-size:11px;
    padding-top:5px;
    padding-bottom:5px;
    color:hsl(0, 0%, 100%);
    background-color: hsl(25, 97%, 53%);
    width:100%;
}
button:hover{
    border-radius:10px;
    outline: none;
    border:none;
    font-size:11px;
    padding-top:5px;
    padding-bottom:5px;
    color: hsl(25, 97%, 53%);
    background-color: hsl(0, 0%, 100%);
    width:100%;
}