@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  src: local('DM Serif Display'), url('fonts/DM_Serif_Display/DMSerifDisplay-Regular.ttf');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato'), url('fonts/Lato/Lato-Light.ttf');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: local('PlayfairDisplay'), url('fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf');
}

* {
    margin: 0;
    padding: 0;
}

.grid-container  {
    display: grid;
    /* border: 1px solid red;  */
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
  }

@media all and (min-width: 1000px) {
    .grid-container  {
      display: grid;
      grid-template-columns: 1fr 1000px 1fr;
      grid-template-rows: auto auto auto auto auto;
      /* border: 1px solid red;  */
  }
}

.grid-container .header, .grid-container .navbar {
    text-align: center;
    /* border: 1px solid red;  */
}

@media all and (min-width: 1000px) {
    .grid-container .header, .grid-container .navbar, .grid-container .body{
        grid-column-start: 2;
    }

    .grid-container .header{
        grid-row-start: 1;
    }

    .grid-container .navbar{
        grid-row-start: 2;
    }

    .grid-container .navbar li{
        display: inline-block;
    }

    .grid-container .navbar a{
        padding: 40px;
    }

    .grid-container .body{
        grid-row-start: 3;
    }

    .grid-container .footer{
        grid-column-start: 2;
    }
}

.grid-container .header{
    font: normal 60px/1.5em 'DM Serif Display', serif;
  }  
  
.grid-container .navbar{
    list-style-type: none;
    /* font: normal 30px/1.5em 'BenchNine', sans-serif;  */
    font: normal 30px/1.5em 'Playfair Display', sans-serif;
    padding-top: 5px;
    padding-bottom: 5px;
  }

.grid-container .navbar a, .grid-container .header a, .grid-container .header a:hover{
    text-decoration: none;
    color: #4B4E53;
  }

.grid-container .header a {
    border-bottom: 1px solid black;
  }

.grid-container .navbar a:hover {
    color: #d65882;
  }

.grid-container .body{
    display: grid;
    /* border: 1px solid red; */
    grid-template-rows: auto auto;
  }

.grid-container .body .content {
    font: normal 20px/1.5em 'Arial', sans-serif;
    color:#4B4E53;
    overflow: auto;
    font-family: 'Lato', sans-serif;
    text-align: justify;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    /* outline: 1px solid red; */
    line-break: loose;
  } 

.grid-container .body .profile-photo{
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 0px;
    /* outline: 1px solid red; */
  } 

.grid-container .footer {
    position:relative;
    bottom:0;
    width:100%;
    background: white;
    font: normal 18px/1.5em 'Arial', sans-serif;
    color:#bdbec2;
    padding-top: 50px;
    padding-left: 5px;
    grid-row-start: 5;
 }