body {  
    height: 100%;
    display: grid;
    place-items: center;
    color: #5889ef;
    font-size: 20px;
    align-content: flex-start;
}


.topnav {
  grid-area: header;
  font-size: 40px;
}

.proj1 {
  grid-area: proj1;

  display: flex;
  align-items: center;
  justify-content: center;
}

.proj1desc {

  grid-area: proj1desc;
  padding: 5%;

}

.proj2 {
  grid-area: proj2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proj2desc {
  grid-area: proj2desc;
  padding: 5%;

}

.proj3 {
  grid-area: proj3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj3desc {
  grid-area: proj3desc;
  padding: 5%;

}


.container {

  display: grid;
  width: 66%;
  grid-template-columns: [col0] 10% [col1] 40% [col2] 40% [col3] 10% [col4];
  grid-template-rows: [row0] 10% [row1] auto [row2] auto [row3] auto [row4] auto [row5];
  grid-template-areas: 
    "header header header header"
    ". projlogo projlogo ."
    ". proj1 proj1desc ."
    ". proj2desc proj2 ."
    ". proj3 proj3desc .";

}