@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8GBs5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  src: local('Nunito Sans Black'), local('NunitoSans-Black'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe03MImSLYBIv1o4X1M8cc8-BM5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
div { outline: 1px solid red !important; }
*/


body {
  text-align: center;
  /*font-family: "Nunito Sans", Helvetica, Arial, sans-serif;*/
  font-family: "Nunito Sans", Helvetica;
  background-color: gainsboro;
  margin: 0px;
  padding: 0px;
}

table {
  text-align: center;
}

h1 {
  font-weight: bold;
}

li {
  font-weight: bold;
}

/*
img {
  width: 200px;
}
*/

.project {
  display: block;
  padding: 6px;
}

.header {
  background-color: darkgray;
  width: 100%;
  padding: 0px;
  display: inline-block;
  border-bottom: 2px solid black;
  padding: 0 0 10px 0;
  text-align: left;

  font-size: 0px;
}

section {
  /*white-space: nowrap;*/
  padding: 10px;
}


.header-left {
  display: inline-block;
  box-sizing: border-box;
  width: 20%;

  padding: 0px;
  margin: 0px;
  text-align: left;
  vertical-align: middle;
}

.header-center {
  display: inline-block;
  box-sizing: border-box;
  width: 60%;

  padding: 0px;
  margin: 0px;
  text-align: center;
  vertical-align: middle;
}

.header-right {
  display: inline-block;
  box-sizing: border-box;
  width: 20%;

  padding: 0px;
  margin: 0px;
  text-align: right;
  vertical-align: middle;

}

.name-top {
  font-size: 48px;
  font-weight: 900;
  display: inline-block;
  color: black;
}

.top-right {
  display: inline-block;
  position: absolute;
  right: 0px;
}

.top-middle {
  width: 100%;
}

.center {
  display: block;
  position: relative;
  left: 50%;
  margin-left: -12px;
  width: 24px;
}

.center-block {
  text-align: center;
}

.projects {
  display: inline-block;
  width: 300px;
  border-style: solid;
  background-color: orange;
  padding: 10px;
  text-align: left;
}

.projects a {
  color: black;
  text-decoration: none;
}

.projects a:hover {
  color: grey;
}