:root {
    --orange:hsl(25,97%,53%);
    --white:hsl(0,0%,100%);
    --light-gray:hsl(217,12%,63%);
    --gray:hsl(216,12%,54%);
    --blue:hsl(213,19%,18%);
    --dark-blue:hsl(216,12%,8%);
    --gradient: linear-gradient(to bottom,hsl(215,20%,17%),hsl(215,24%,12%)); 
}
*,*::after
,*::before{
box-sizing: border-box; 
margin:unset;
}

html:focus-within{
scroll-behavior: smooth;
}
body{
font-family: 'Overpass', sans-serif;
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
font: clamp(14px,3vw, 15px)/1.6;
background-color: var(--dark-blue);
display: grid;
place-items: center;
min-block-size: 100vh;
}
img{
max-width: 100%;
display: block;
}
input,button{
font:inherit;
}
@media(prefers-reduced-motion: reduce){
html:focus-within{
    scroll-behavior: auto;
}
*,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
}
h1{
color:var(--white);
 font-size: clamp(24px,5vw, 28px);
 line-height: 1.2;
 margin-bottom: 7px;
}
p {
  color: var(--light-gray);
}
.rate {
background-image: var(--gradient);
max-width: 412px;
width: calc(100% - 32px);
  background-color: var(--blue); 
  border-radius: 30px;
  color:var(--light-gray);
 padding: clamp(24px,5vw,32px);
}
.star{
       background-color:var(--blue);
        width: 48px; 
        height: 48px;
        color:hsl(217, 12%, 63%);
        border-radius: 50%; 
        padding:16px;
        margin-bottom:30px ;
      
    }

.animate-out{
animation: animate-out 0.15s linear both; 
}
.animate-in{
animation: animate-in 0.15s linear both; 
}
@keyframes animate-out {
 from {
    opacity:1;
 }
 to{
    opacity:0;
    translate: -3rem;
 }
}
@keyframes animate-in {
from{
    opacity:0;
    translate: 3rem;
}
to{
    opacity:1;
    translate: 0;
}
}

/*
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
*/

 
   #sub {
    background-color: var(--orange);
   color: var(--white);
   border:unset;
   text-transform:uppercase;
   height: 45px;
   border-radius: 45px;
   width:100%;
   text-align: center;
    cursor: pointer;
    appearance: none;
    font-weight: 700;
    letter-spacing: 2px;
    transition:background-color .15s linear,color .15s linear;
  }
  #sub:hover{
    background-color:var(--white);
    color: var(--orange);
    outline:none; 
} 
 
.sr-only{
 position: absolute;
 width: 1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 white-space: nowrap;
 border-width: 0;
}
.rating{
display: flex;
justify-content: space-between;
margin-block:24px 32px ;

}
label{
--size:clamp(42px,13vw,51px);
 display: block;
  background-color: var(--blue); 
 color: var(--gray);
 width: var(--size);
 height: var(--size);
 border-radius: var(--size);
 text-align: center;
 line-height: var(--size);
 cursor: pointer;
 font-size: 16px;
 font-weight: 700;
 transition:background-color .15s linear,color .15s linear;

}
input:hover+label , input:focus+label{
 background-color: var(--orange);
color: var(--white);
}
input:checked+label{
 background-color: var(--gray);
 color: var(--white);
}
.center{
text-align: center;
}
.result{
   background-color: var(--blue); 
   color:var(--orange);
   height: 32px;
   border-radius: 32px;
   line-height: 32px;
   width:max-content;
   margin-inline:auto ;
   padding-inline: 20px;
   margin-block: 32px;
}
.thank{
  margin-inline: auto;
}