form {
    display: grid;
    padding: 5px;
    grid-template-areas: 
        "heading heading"
        "heading heading"
        "fname e-mail"
        "name email"
        "interests project_budget"
        "interest budget"
        "messages messages"
        "message message"
        "message message"
        "submit blank";
    gap: 20px;
    border: none;
    text-decoration: none;
    font-family: 'Poppins', 'sans-serif';
    font-weight: 500;
    font-style: normal;
    font-size: smaller;
    justify-content: center;
    grid-template-columns: 300px 300px;
    grid-template-rows: 9% 9% 2% 9% 2% 9% 2% 9% 13% 9% ;
    margin-top: 5%;
    
}
legend {
    grid-area: heading;
    font-size: xx-large;
}
#fname {
    grid-area: name;
    height: 35px;
}
#name {
    grid-area: fname;
}
#email {
    grid-area: email;
    height: 35px;
}
#e-mail {
    grid-area: e-mail;
}
#interest {
    grid-area: interest;
    height: 35px;
}
#interests {
    grid-area: interests;
}
#budget {
    grid-area: budget;
    height: 35px;
}
#project_budget {
    grid-area: project_budget;
}
#message {
    grid-area: message;
    height: 100px;
}
#messages {
    grid-area: messages;
}
input, select, textarea {
    background-color: rgb(247, 255, 253);
    border-color: rgb(247, 255, 253);
}
.active {
    border: 2px solid;
    border-radius: 1px;
}
#submit {
    grid-area: submit;
    background-color: black;
    color: white;
    height: 35px;
    font-family: 'Poppins', 'sans-serif';
    font-weight: 300;
    font-style: normal;    
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 20;
  position: absolute;
}