@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

.font-jakarta{
    font-family: 'Plus Jakarta Sans';
};

.border-radius-left{
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

.border-bottom-left-radius{
    
    border-bottom-left-radius: 5rem;
}

@media(max-width: 975px){
    
    .border-radius-left{
        border-top-right-radius: 1.5rem;
        border-bottom-left-radius: 0;
    }

    .border-radius-right{
        border-top-right-radius: 0;
        border-bottom-left-radius: 1.5rem;

    }

    .border-bottom-left-radius{
    
        border-bottom-left-radius: 1.5rem;
    }
}

div#result-container.bg-slate900{
    background-color: hsl(201, 57%, 9%);
}

input[type='radio']{
    -webkit-appearance: none;
    appearance: none;
    color: hsl(202, 55%, 16%);
    width: 1rem;
    height: 1rem;
    border: 0.10rem solid hsl(200, 26%, 54%);
    border-radius: 50%;
    display: grid;
    place-content: center;
    margin-right: 1rem;
}

input[type='radio']::before{
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1rem 1rem hsl(61, 70%, 52%);
}

input[type='radio']:checked{
    border-color: hsl(61, 70%, 52%);
}

input[type='radio']:checked::before{
    transform: scale(1);
}

.checked{
    border: 0.06rem solid hsl(61, 70%, 52%);
    background-color:  #fafae0;
}

.active{
    background-color: hsl(61, 70%, 52%);
    color: hsl(202, 55%, 16%);
}

.active-border{
    border: 1px solid hsl(61, 70%, 52%);
}

.error{
    background-color: hsl(4, 69%, 50%);
    color: hsl(0, 0%, 100%);
}

.error-border{
    border: 1px solid hsl(4, 69%, 50%);
}

.error-msg{
    color: hsl(4, 69%, 50%);
    font-weight: 600;
};