.email{
    display: grid;
    grid-template-areas:
        ". heading ."
        ". desc ."
        ". nameL ."
        ". nameE ."
        ". messL ."
        ". messE ."
        " . sendE .";
    grid-template-rows: repeat(5,1fr) repeat(2,3fr);
    grid-template-columns: 2fr 3fr 2fr;
    grid-gap:5px;
    justify-self: center;
    height: 80vh;
    width: stretch;
    font-size:var(--font-size-normal);
}

#contact{
    grid-area:heading;
    font-size:var(--font-size-larger);
    justify-self:center;
    align-self:center;
    color: var(--primary);
    text-shadow:var(--second) 1px 0 10px;
}
#nameE{
    width: 300px;
    height: var(--font-size-large);
    resize: none;
    scrollbar-width: none;
    grid-area:nameE;
}

#nameL, #messL{
    align-content: flex-end;
    font-weight:var(--font-weight-bold);
}

#nameL{
     grid-area:nameL;
}

#messL{
    grid-area:messL;
}

#messE{
    grid-area:messE;
    resize: none;
    
}

#desc{
    grid-area:desc;
}

#sendE{
    grid-area: sendE;
    justify-self: center;
    align-self: center;
    font-size: var(--font-size-large);
    text-decoration: none;
    padding: 5px;
    color: var(--second);
    background: var(--primary);
    border: var(--primary) inset thick;
    
}