*{  
  font-family:"Segoe UI Light";
  box-sizing:border-box;
  padding:0;
  margin:0;
}
html, body {
  width: 100%;
  height: 100%;
}
.header{
  grid-area: header;
  display: grid;
  width: 100%;
  grid-template-areas: ". AboutMeBtn ProjectsBtn MediaBtn ContactBtn .";
  grid-template-rows: 50px;
  grid-template-columns: auto 125px 125px 125px 125px auto;
}
.header a{
    font-size: 20px;
}
.header > .AboutMeBtn{
    grid-area: AboutMeBtn;
    text-align: center;
    background: lightgray;
    margin-bottom: 10px;
}
.header > .ProjectsBtn{
    grid-area: ProjectsBtn;
    text-align: center;
    background: lightgray;
    margin-bottom: 10px;
}
.header > .MediaBtn{
    grid-area: MediaBtn;
    text-align: center;
    background: lightgray;
    margin-bottom: 10px;
}
.header > .ContactBtn{
    grid-area: ContactBtn;
    text-align: center;
    background: lightgray;
    margin-bottom: 10px;
}
.AboutMeBtn:hover{
    margin-bottom: 0px;
    transition: 0.5s;
    background: darkgray;
}
.ProjectsBtn:hover{
    margin-bottom: 0px;
    transition: 0.5s;
    background: darkgray;
}
.MediaBtn:hover{
    margin-bottom: 0px;
    transition: 0.5s;
    background: darkgray;
}
.ContactBtn:hover{
    margin-bottom: 0px;
    transition: 0.5s;
    background: darkgray;
}
.page {
  display: grid;
  width: 100%;
  min-height: 100%;
  grid-template-areas: ".     main      .";
  grid-template-rows: 1fr;
  grid-template-columns: 325px minmax(750px, 1fr) minmax(325px, auto);
}
.footer {    
  background:#666;
  color: white;
  font-size: 10pt;
  padding: 15px;
  text-align: center;  
}