:root{
  --orangePrimary: hsl(25, 97%, 53%);
  --white: hsl(0, 0%, 100%);
  --lightGrey: hsl(217, 12%, 63%);
  --mediumGrey: hsl(216, 12%, 54%);
  --darkBlue: hsl(213, 19%, 18%);
  --veryDarkBlue: hsl(216, 12%, 8%);
}
body{
  font-family: 'Overpass', sans-serif;
  background-color: var(--veryDarkBlue);
  color: var(--white);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.card{
  max-width: 346px;
  border-radius: 1.8rem;
  padding: 2rem;
  background-color: var(--darkBlue);
  box-shadow: 5px 5px 5px var(--veryDarkBlue);
  & img{
    padding: 1rem;
    border-radius: 50%;
    background-color: hsla(213, 19%, 30%);
  }
  & h1{
    letter-spacing: 1px;
    margin-top: 1.8rem;
    margin-bottom: .6rem;
    font-weight: 400;
    font-size: 1.7rem;
    color: var(--white);
  }
  & p{
    margin-top: .5rem;
    font-size: .95rem;
    color: var(--lightGrey);
    line-height: 1.6;
  }
  & .clasification{
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1.4rem;
    & label{
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      align-self: center;
      aspect-ratio: 1;
      background-color: hsla(213, 19%, 30%);
      color: var(--white);
      border-radius: 50%;
      transition: background-color .2s ease-in-out;
    }
    & label:hover{
      transition: background-color .2s ease-in-out;
      background-color: var(--orangePrimary);
    }
    
    & input[type='radio']:checked + label{
      background-color: var(--lightGrey);
      transition: background-color .2s ease-in-out;
    }
  }
  & input{
    letter-spacing: 2px;
    cursor: pointer;
    width: 100%;
    font-size: .9rem;
    margin-top: 1rem;
    border: none;
    color: var(--white);
    background-color: var(--orangePrimary);
    padding: .9rem;
    border-radius: 2rem;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
  }
  & input:hover{
    color: var(--orangePrimary);
    background-color: var(--white);
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
  }
  & .success{
    display: flex;
    flex-direction: column;
    align-items: center;
    & img{
      background-color: transparent;
      border-radius: 0;
    }
    & p.selection{
      font-size: 1rem;
      color: var(--orangePrimary);
      background-color: hsla(213, 19%, 30%);
      border-radius: 2rem;
      padding: .2rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    & h2{
      margin: 28px 0 14.5px;
      font-size: 1.6rem;
    }
    .successparagraph{
      text-align: center;
    }
  }
}
.card .hidden{
  display: none;
}

@media (width < 480px) {
  body{
    padding: 1rem;
  }
  .card{
    min-width: 220px;
  }
}