@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto+Condensed:wght@300;400&display=swap');

/* font-family: 'Poppins', sans-serif; */

*

{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}


body  
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;

}


.container

{
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
}

.container img

{
   max-width: 150px;
}


.container h2

{
   font-size: 2em;
   color: #fff;
   font-weight: 500;
}

.gender

{
   position: relative;
   display: flex;
   gap: 20px;
}


.gender label

{
   position: relative;
   padding: 15px 40px 15px 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
   font-weight: 500;
   cursor: pointer;
   user-select: none;
}


.gender label input

{
   appearance: none;
}


.gender label  i

{
   position: relative;
   width: 20px;
   height: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
}



.gender label  i::before

{
   content: '';
   position: absolute;
   width: 100%;
   height: 2px;
   background: #999;
   transform: rotate(45deg);
   transition: 0.5s;
}




.gender label  i::after

{
   content: '';
   position: absolute;
   width: 100%;
   height: 2px;
   background: #999;
   transform: rotate(315deg);
   transition: 0.5s;
}


.gender label input:checked ~ i::before

{
   width: 50%;
   transform: rotate(45deg) translate(-4px,9px);
}


.gender label input:checked ~ i::before,
.gender label input:checked ~ i::after

{
   background: #333;
}

.gender label  span

{
   color: #999;
   transition: 0.5s;
}


.gender label  span::before

{
   content: '';
   position: absolute;
   top: 0;
   left: -10px;
   border: 3px solid #444;
   width: 100%;
   height: 100%;
   border-radius: 30px;
   box-sizing: border-box;
   pointer-events: none;
   transition: 0.5s;
   z-index: -1;

}


.gender label:hover  span::before

{
   border: 3px solid var(--clr);
}

.gender label input:checked ~ span::before

{
   background: var(--clr);
   border: 3px soilid var(--clr);
   box-shadow: 0 0 20px var(--clr),
   0 0 60px var(--clr);
}

.gender label input:checked ~ span

{
   color: #333;
}