@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
body {
    font-family: 'Overpass', sans-serif;
    background-color: hsl(216, 12%, 8%);
    color: hsl(0, 0%, 100%);
}
p{
    font-size: 15px; 
    color: hsl(216, 12%, 54%);
    line-height: 1.5;
}
.content{
    background-color: hsl(213, 19%, 18%);
    width: 365px;
    padding: 30px;
    margin: 150px auto;
    border-radius: 20px;
}
.content img{
    background-color: rgba(103, 86, 105, 0.329);
    border-radius: 50%;
    padding: 15px;
} 
#rating {
    display: flex;
    justify-content: space-between;
}
button {
    border: none;
    color: hsl(216, 12%, 54%);
    background-color: rgba(103, 86, 105, 0.329);
    border-radius: 50%;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}
button:hover{
    background-color: hsl(25, 97%, 53%);
    color: hsl(0, 0%, 100%);
}
button:focus{
    background-color: #ccc;
}
h1{
    margin-top: 20px;
    margin-bottom: 20px;
}
.submit{
    background-color: hsl(25, 97%, 53%);
    border-radius: 30px;
    padding: 10px;
    color: hsl(0, 0%, 100%);
    text-align: center;
    cursor: pointer;
}
.submit:hover{
    background-color: hsl(0, 0%, 100%);
    color: hsl(25, 97%, 53%);
}
#thank-you{
    display: none;
    background-color: hsl(213, 19%, 18%);
    width: 365px;
    padding: 30px;
    margin: 150px auto;
    border-radius: 20px;
    text-align: center;
}
#thank-you .rate-result p {
    
    color: hsl(25, 97%, 53%);
    background-color: rgba(103, 86, 105, 0.329);
   border-radius: 30px;
   padding: 5px ;
   width: 200px;
   margin: auto;
   
}
#thank-you img{
    margin-bottom: 30px;
}
#thank-you h2{
    margin-bottom: 10px;
    margin-top: 30px;
}