main {
    display: flex;
    flex-flow: column;
    justify-self: center;

    font-family: Arial, Helvetica, sans-serif;
}

form {
    display: grid;
    grid-template-areas:
        "formTitle formTitle"
        "fNLabel lNLabel"
        "fName lName"
        "eLabel eLabel"
        "email email"
        "pLabel pLabel"
        "phone phone"
        "tLabel tLabel"
        "team team"
        "lLabel lLabel"
        "loc loc"
        "mLabel mLabel"
        "message message"
        "products products"
        "submit submit";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 3vh auto 3vh auto 3vh auto 3vh auto 3vh auto 6vh auto 3vh;
    column-gap: 1ch;
    row-gap: 1ch;

    background-color: lightgray;
    
    border-radius: 1ch;

    padding: 1ch;
}

form > input, textarea, select {
    border: 1px solid gray;
    border-radius: 1ch;
}

h2 {
    grid-area: formTitle;
}

label[for="fName"] {
    grid-area: fNLabel;
}
#fName {
    grid-area: fName;
}

label[for="lName"] {
    grid-area: lNLabel;
}
#lName {
    grid-area: lName;
}

label[for="email"] {
    grid-area: eLabel;
}
#email {
    grid-area: email;
}

label[for="phone"] {
    grid-area: pLabel;
}
#phone {
    grid-area: phone;
}

label[for="team"] {
    grid-area: tLabel;
}
#team {
    grid-area: team;
}

label[for="loc"] {
    grid-area: lLabel;
}
#loc {
    grid-area: loc;
}

label[for="message"] {
    grid-area: mLabel;
}
#message {
    grid-area: message;
}

fieldset {
    display: grid;
    grid-template-areas:
    "mail mailLabel vpn vpnLabel"
    "calendar calendarLabel work workLabel"
    "drive driveLabel other otherLabel";
    grid-template-columns: min-content 1fr min-content 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 1ch;
    row-gap: 1ch;


    #mail {
        grid-area: mail;
    }
    label[for="mail"] {
        grid-area: mailLabel;
    }

    #vpn {
        grid-area: vpn;
    }
    label[for="vpn"] {
        grid-area: vpnLabel;
    }

    #calendar {
        grid-area: calendar;
    }
    label[for="calendar"] {
        grid-area: calendarLabel;
    }

    #work {
        grid-area: work;
    }
    label[for="work"] {
        grid-area: workLabel;
    }

    #drive {
        grid-area: drive;
    }
    label[for="drive"] {
        grid-area: driveLabel;
    }

    #other {
        grid-area: other;
    }
    label[for="other"] {
        grid-area: otherLabel;
    }

    border: none;

    margin: 0%;

    grid-area: products;
}

#submit {
    grid-area: submit;

    background-color: blue;
    color: white;

    border-color: blue;
    border-radius: 5vw;
}