@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@700&display=swap');
*{
 padding:0;
 margin:0;
 box-sizing: border-box;
}
:root{
    --primary: hsl(25, 97%, 53%);
    --White: hsla(0, 0%, 100%, 0.472);
--LightGrey: hsla(217, 12%, 63%, 0.507);
--MediumGrey: hsla(216, 12%, 54%, 0.267);
--DarkBlue: hsl(213, 19%, 18%);
--VeryDarkBlue: hsl(216, 12%, 8%);
}
body{
    background-color: var(--VeryDarkBlue);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin:40% auto;
    font-family:'Overpass';
    color: hsl(0, 0%, 100%);
    width:90%;
    font-size: 15px;
}
#card, #card2{
   background-color: var(--DarkBlue);
   padding:25px;
   border-radius: 25px;
}
#card2{
    display: none;
}
#star{
    background-color: var(--MediumGrey);
    border-radius: 50%; 
    padding: 8px;
}
h1{
    color: hsl(0, 0%, 100%);
}
#ratings{
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin:20px 0px;
}
.rate{
    padding:15px 20px;
}
div{
    margin: 10px 0px;
    background-color: var(--MediumGrey);
    border-radius: 50%;
}
div:hover{
    background-color: var(--White);
}
#btn, #btn2{
    padding:10px 122px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 700;
    background-color: var(--primary);
    border: none;
    color: hsl(0, 0%, 100%);
  cursor: pointer;
  letter-spacing: 2px;
  font-family: inherit;
}

.active {
    background-color: var(--primary); 
}
.disable{
    display: none;
}

p{
    opacity:0.7;
    font-size: 14px;
    line-height: 1.8;
    
}
#btn:hover, #btn2:hover{
    transform:scale(0.9);
    transition: ease-in-out 3ms ;
}
#seccard{
    width: 100%;
    text-align: center;
}
#sel{
    border-radius: 18px;
    background-color:var(--LightGrey);
}
@media only screen and (min-width:630px){
    body{
        margin:15% auto;
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;

    }
}