* {
    padding: 0; 
    margin: 0;
    font: bolder;
}

body {
    font-family: Arial, sans-serif;
    margin: 19px;
}


label {
    display: block;
    margin-bottom: 8px;
}

input,
textarea,
select {
    font-size: 1rem;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

form {
    display: grid;
    gap: 16px;
    max-width: 500px;
    margin: auto;
}



#address {
    height: 4rem;
}

.group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
}

#coding {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}

input[type="submit"] {
    width: 6rem;

    color: black;
    cursor: pointer;
    font-size: 1rem;

}



.container {
    padding: 72px;
}

.radio-group {
    display: flex;
    gap: 8px;
}

.radio-group label {
    display: flex;
    align-items: center;
}

.radio-group input {
    margin-right: 4px;
}



.gender-radio #female {
    width: 1rem;
}

#gender-group {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.gender-radio #male {
    width: 1rem;
}

.gender-radio {
    margin-top: -30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}


#coding-group {
    gap: 14px;
}



/*  ---------------------------------------- Adding media Query for Responsiveness ----------------------------------------> */
@media (max-width: 1000px) {

    input,
    textarea,
    select {
        width: 15rem;
    }

    select {
        font-size: 1rem;
    }

    .group {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #coding {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gender-radio {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #coding-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    #gender-group {
        grid-template-rows: repeat(2, 1fr);

    }

    input[type="checkbox"] {
        width: auto;
    }

    #gender {
        margin-bottom: 27px;
    }

    .gender-radio #female {
        width: 1rem;
    }
}