@font-face {
  font-family: 'SpaceGrotesk-Bold';
  src: url('../font/SpaceGrotesk-Bold.woff') format('woff'),
  url('../font/SpaceGrotesk-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'SpaceGrotesk-Light';
  src: url('../font/SpaceGrotesk-Light.woff') format('woff'),
  url('../font/SpaceGrotesk-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'SpaceGrotesk-Medium';
  src: url('../font/SpaceGrotesk-Medium.woff') format('woff'),
  url('../font/SpaceGrotesk-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'SpaceGrotesk-Regular';
  src: url('../font/SpaceGrotesk-Regular.woff') format('woff'),
  url('../font/SpaceGrotesk-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'SpaceGrotesk-SemiBold';
  src: url('../font/SpaceGrotesk-SemiBold.woff') format('woff'),
  url('../font/SpaceGrotesk-SemiBold.woff2') format('woff2');
}


body {
  background-color:#FDC100;
}

#header{
  font-family: 'SpaceGrotesk-Regular', Fallback, sans-serif;
  position:fixed;
  top:0;
  right:0;
  left:0;
  height:20pt;
  color:white;
  padding:20px;
  font-size:12pt;
  font-family: sans-serif;
  text-align: center;
}


#header span {
  color:grey;
  margin-left:32pt;
  margin-right:32pt;
}


@media (max-width: 960px) {
  #wrapper{
    margin:32pt;
  }
  #quote{
    font-size:32pt;
  }
  #expertise span {
    color:grey;
    margin-left:6pt;
    margin-right:6pt;
  }
}

@media (min-width: 960px) {
  #wrapper{
    margin:100pt;
  }
  #quote{
     font-size:36pt;
  }
  #expertise span {
    color:grey;
    margin-left:16pt;
    margin-right:16pt;
  }
}

#wrapper{
  font-family: 'SpaceGrotesk-Regular', Fallback, sans-serif;
  overflow-y:scroll;
  padding-bottom:20pt;
  overflow-x:visible;
}

#title{
  color:white;
  font-size:36pt;
  margin-bottom:-6pt;
  font-family: 'SpaceGrotesk-Bold', Fallback, sans-serif;
}

#subtitle{
  color:white;
  font-size:12pt;
  font-family: 'SpaceGrotesk-Regular', Fallback, sans-serif;
}

#quote{
  text-align:right;
  margin-top:40pt;
}


#about{
  font-family: 'SpaceGrotesk-Regular', Fallback, sans-serif;
  line-height: 200%;
  text-align:center;
  margin-top:50pt;
  font-size:12pt;
}


#about a{
  padding:3px;
  text-decoration:none;
  color:inherit;
  border-bottom: 1px solid #000;
  margin-bottom:0;
}

#about a:hover{
  color:white;
  background-color:black;
  margin-bottom:0;
}


#contact{
  float:right;
}

#contact a{
  padding:3px;
  text-decoration:none;
  color:inherit;
  border-bottom: 1px solid white;
  margin-bottom:0;
}

#contact a:hover{
  color:black;
  background-color:white;
  margin-bottom:0;
}

#expertise{
  text-align:center;
  margin-top:90pt;
  font-size:12pt;
}

#expertise span {
  color:grey;
}


#projects{
  margin-top:30pt;
  margin-bottom:10pt;
  text-align:center;
}

#hybrixLogo{
  margin:15pt;
}

#projects a{
  display:inline-block;
  margin:5pt;
  text-decoration:none;
}

#projects img {
 display: inline;
 vertical-align:middle;
 float: none;
}

a{
  text-decoration:none;
  color:inherit;
}

a:hover{
  text-decoration:underline;
}
#footer{
  font-family: 'SpaceGrotesk-Regular', Fallback, sans-serif;

  position:fixed;
  bottom:0;
  right:0;
  left:0;
  height:16pt;
  background-color:#333333;
  color:white;
  padding:8pt;
  font-size:12pt;
  font-family: sans-serif;
}