body{
/*  width: 90%;
    margin: auto;
*/
    margin: 0px;/*webkits put in a margin*/

    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%; /* could be repeat(3,1fr) */
    grid-template-rows: auto;
    grid-template-areas: 
    "nav nav nav"
    "section section section"
    "background-info hobbies summary";

    /*background-image: url("image1.jpg");  backgroun images
    background-repeat: no-repeat;
    background-size: cover;*/
    background-color:rgb(252, 3, 252, 0.3);/* opacity 30%*/
    /*opacity: 0.3; image transparent*/
}

/* to adjust for mobile would be a case of just change the grids and template areas
body{
    /*  width: 90%;
        margin: auto;
    
        margin: 0px;/*webkits put in a margin
    
        display: grid;
        grid-template-columns: 100%; 
        grid-template-rows: auto;
        grid-template-areas: 
        "nav"
        "section "
        "background-info"
        "hobbies" 
        "summary"
    } by reducing the number of columns to 1 and grid areas you can keep the design
    */
nav{
    grid-area: nav;
    background-color: #ff1493;

    display: flex; /* can be used to configure the navigation menu*/
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
}
.item{
    flex-basis: auto;
    align-self: auto;
}
#active{
    background-color: #000000;
    color: rgb(252, 253, 252);
}

section{
    grid-area: section;
    background-color: #e9967a;
}
#background-info{
    grid-area: background-info;
    background-color: #8a2be2;
}
#hobbies{
    grid-area: hobbies;
    background-color: #dc143c;
}
#summary{
    grid-area: summary;
    background-color: #556b2f;
}
nav>a{
    text-decoration: none;
    color: black;
}
nav> a:hover{
    background-color: #ffc0cb;
    color: #008000;
}
p{
    padding: 0 2% 0 2%;
}

table, th, td{
    border: black;
    border-width: 2px;
    border-style: solid;
}