body {
    background: #F9F9F9; /*#F9F9F9 white*/
    text-align: center;
    letter-spacing: 1px;
    font-family: "monospace", "FreeMono", monospace;
    margin:0;
}

.item2{
    grid-area: picture;
}
.littlemonkey{
    height: 98px;
    width: auto;
    float: right;
    margin-top: 5px;
    margin-right: 5vw;
}

.littlemonkeyhardhat{
    height: 300px;
    width: auto;
}

p{
    text-align: left;
    width: 80%;
    margin: 20px auto;
}

.grid{
    display: grid;
    /* grid-template-columns: repeat(1, 10%); */
    grid-template-areas:
        '. header header picture'
        'menu intro intro picture'
        'menu repo repo .'
        '. dataviz digitart .'
        '. alice dovahbot .'
        '. nets gordons .'
        '. renovations renovations .';
   /* ebb 2024-09-28: I'm adding some grid properties here */
   grid-auto-flow:column;
   grid-template-columns: .25fr .25fr .25fr .25fr;
   /* ebb: I use fr units to define the relative proportions of each column, 
    * and it looked to me like you had 4 columns on your pages.
    * .25fr is like saying 25% of 100.   */     
        
}

.item1{
    grid-area: header;
}

.item3{
    grid-area: menu;
    margin: 0;
    padding: 5px;
    overflow: hidden;
    /*background-color: #333;*/
    text-align: left;
    font-size: x-large;
    width: 100%;
}

ul{
   list-style-type: none; 
}

li{
 
}

.item4{
    grid-area: intro;
}

.item5{
    grid-area: repo;
}

.item6{
    grid-area: dataviz;
/*    height: auto;
    width: 25vw;*/
}

.item7{
    grid-area: digitart;
/*    height: auto;
    width: 25vw;*/
}

.item8{
    grid-area: renovations;
}

.item9{
    grid-area: alice;
}
.item10{
    grid-area: dovahbot;
}
.item11{
    grid-area: nets;
}
.item12{
    grid-area: gordons;
}