html
{
  margin       : 0px 0px 0px 0px;
  padding      : 0px 0px 0px 0px;
  border       : 0px solid #000000;
  font-style   : inherit;
  font-variant : inherit;
  font-weight  : inherit;
  font-size    : inherit;
  line-height  : inherit;
}

body
{
  line-height : 1em;
}

table
{
  border-collapse : collapse;
  border-spacing  : 0;
}

article
{
  display : block;
}

aside
{
  display : block;
}

details
{
  display : block;
}

figcaption
{
  display : block;
}

figure
{
  display : block;
}

footer
{
  display : block;
}

header
{
  display : block;
}

hgroup
{
  display : block;
}

menu
{
  display : block;
}

nav
{
  display : block;
}

section
{
  display : block;
}

.construction-banner
{
  background : #ffa500;
  padding    : 0.5rem 0.5rem 0.5rem 0.5rem;
}

body
{
  color            : #042a1e;
  font-family      : "Helvetica Neue", sans-serif;
  background-color : #042a1e;
  margin           : 0px 0px 0px 0px;
}

header
{
  width          : 100vw;
  height         : 100vh;
  display        : flex;
  flex-direction : column;
}

.hero
{
  background-position : center top;
  background-size     : cover;
  display             : flex;
  flex-direction      : column;
  justify-content     : center;
  align-content       : center;
  flex-grow           : 1;
}

.hero .namecard
{
  flex-grow       : 1;
  font-size       : 2.5em;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  align-content   : center;
  align-items     : center;
  color           : #d2e9c3;
  text-shadow     : 0.2em 0.2em 0.05em #042a1e;
}

@media screen and (max-width: 768px)
{
.hero .namecard
{
  font-size : 1em;
}

}
.hero .spacer
{
  width     : 100%;
  flex-grow : 0;
}

@media screen and (max-width: 768px)
{
.hero .spacer
{
  flex-grow : 2;
}

}
@media screen and (max-width: 768px)
{
.hero
{
  background-image : url("/image/hero.720");
}

}
@media screen and (min-width: 769px)
{
.hero
{
  background-image : url("/image/hero.1080");
}

}
.navbar
{
  display          : flex;
  flex-direction   : row;
  justify-content  : space-between;
  padding          : 0.5rem 0.5rem 0.5rem 0.5rem;
  background-color : #d2e9c3;
  color            : #042a1e;
}

.navbar > *
{
  margin : 0.5rem 0.5rem 0.5rem 0.5rem;
}

.navbar .spacer
{
  flex-grow : 1;
}

.navbar a
{
  text-decoration : none;
  color           : #042a1e;
}

.navbar a:hover
{
  color           : #02621b;
  text-decoration : underline;
}

.navbar a:active
{
  color           : #004621;
  text-decoration : underline;
}


/* Generated with Clay, http://fvisser.nl/clay */