body{
    display: grid;
    margin: auto;
    max-width: auto;
    background-color:rgb(253, 240, 255);
    grid-template-areas: 
    "B A A A"
    "B M M M"
    "auto M M M"
    "C C C C";
}

img {
        border:2px solid #7021ad;
        border-radius: 4%;
        max-width: 100%
    }
figcaption{
    font-size: xx-small;
    color: #421266;

}
#pic1{
    grid-area: F;
}
#pic3{
    max-width: 70%;
}
h1{
    color: #421266;
    text-align: center;
    text-transform:uppercase;
    text-decoration: underline;
    text-decoration-color: #421266;
    font-family: 'Times New Roman', Times, serif;
    padding: 5px;
}
h2{
    color: #421266;
    text-align: center;
    text-transform:capitalize;
    font-family: 'Times New Roman', Times, serif;
}
header{
    grid-area: A;
    color: #421266;
    background-color: rgba(208, 151, 222, 0.356);
    border-radius: 10px;
    padding: 5px;
    margin: 10px;
}
fieldset{
    font-size: smaller;
}
main {
    display: grid;
    grid-area: M;
    font-family: 'Times New Roman', Times, serif;
    padding:3%;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
    "D D D D"
    "G G F F"
    "E E F F";
}
p{
    font-size: larger;
    text-indent: 2%;
    max-width: 150ch;
    padding: 5px;
}
nav a:hover{
    text-decoration: underline;
    background-color: rgb(195, 130, 238);  
}
#p1{
    grid-area: D;
}
#p2{
    grid-area: E;
    border: 2px solid #7021ad;
    border-radius: 2px;
    margin: 5px;
    padding: 5px;
}
#p3{
    grid-area: G;
    border: 2px solid #7021ad;
    border-radius: 2px;
    padding: 5px;
    margin: 5px;
}
nav{
    display: grid;
    grid-area: B;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    border-radius: 10px;
    border: 2px solid #7021ad;
    padding: 5px;
    margin: 10px;
    justify-content: space-around;
    align-content: space-evenly;
    background-color: rgba(208, 151, 222, 0.356);
}

li{
    font-size: larger;
    color: #421266;
}

footer{
    grid-area: C;
    font-size: small;
}
footer a:hover{
    background-color: rgb(195, 130, 238);  
}

#scores{
   grid-row: 1 / 2;
   grid-column: 1 / 3;
   padding: 5px;
    }
#bid{
    grid-row: 2 / 3;
    grid-column: 1 / 5;
    padding: 5px;
 }
#abuse{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    border: 2px solid #7021ad;
    background-color: rgba(208, 151, 222, 0.356);
    border-radius: 2px;
    margin: 5px;
    padding: 5px;
}
#neglect{
        grid-row: 3 / 4;
        grid-column: 2 / 3;
        border: 2px solid #7021ad;
        background-color: rgba(208, 151, 222, 0.356);
        border-radius: 2px;
        margin: 5px;
        padding: 5px;
}
#house{
        grid-row: 3 / 4;
        grid-column: 3 / 4;
        border: 2px solid #7021ad;
        background-color: rgba(208, 151, 222, 0.356);
        border-radius: 2px;
        margin: 5px;
        padding: 5px;
}
#Q3, #Q4, #Email, #sub{
text-align: center;
}
textarea{
    width: 90%;
    max-width: 90%;
    min-width: 90%;
}
td{
    text-align: center;
}

table{
    grid-column: 1 / 4;
    grid-row: 5 / 6;
    border: 2px solid #7021ad;
    background-color: rgba(208, 151, 222, 0.356);
    border-radius: 2px;
    margin: 5px;
    padding: 5px;
}

#top{
    grid-column: 1 /  4;
    grid-row: 1 / 2;
}
#soc{
    margin: 5px;
    grid-column:1 / 4;
    grid-row: 2 / 3;
    border: 2px solid #7021ad;
    border-radius: 2px;
    padding: 5px;
}
#cog{
    margin: 5px;
    grid-column:1 / 4;
    grid-row: 3 / 4;
    border: 2px solid #7021ad;
    border-radius: 2px;
    padding: 5px;
}
#phys{
    margin: 5px;
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    border: 2px solid #7021ad;
    border-radius: 2px;
    padding: 5px;
}

#sources{
    margin: 5px;
    font-size: xx-small;
    grid-column: 1 / 4;
    grid-row: 6 / 7;
}