* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  color: #1e1e1e;
  padding:0.25em;
  text-rendering: optimizeLegibility;
}

header a.img {
  position:fixed;
  padding-top: 1em;
  z-index: -100;
}

.bigger_footer {
  margin-bottom:3em;
}

ul {
  list-style-type:none;
  padding-left:0;
}

h1 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 900px;
}

h1 a {
  text-decoration: none;
  color: #1e1e1e;
  border-bottom: 4px solid #00E5CF;
}

h1 a:hover {
  border-bottom: 4px solid #1e1e1e;
}

h2 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  max-width: 860px;
}

h2 a {
  text-decoration: none;
  color: #1e1e1e;
  border-bottom: 3px solid #00E5CF;
}

h2 a:hover {
  border-bottom: 3px solid #1e1e1e;
}

#workimage {
  width: 100%;
  position:relative;
  padding-top: 1em;
}

.header,
div[role="main"],
.footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex: 1 1 100%;
  -moz-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  padding: 2em 0;
  z-index: 100;
}

.header {
  margin-top: 1em;
  -webkit-align-self: flex-start;
  -moz-align-self: flex-start;
  -ms-align-self: flex-start;
  -ms-flex-align: flex-start;
  align-self: flex-start;
}

div[role="main"] {
  -webkit-align-self: center;
  -moz-align-self: center;
  -ms-align-self: center;
  -ms-flex-align: center;
  align-self: center;
  padding-left: 15em;
  z-index: 100;
}

.wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 0 5em;
  height: 90vh;
}

.footer {
  -webkit-align-self: flex-end;
  -moz-align-self: flex-end;
  -ms-align-self: flex-end;
  -ms-flex-align: flex-end;
  align-self: flex-end;
  padding-left: 15em;
}

.footer ul {
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 1.5em;
}

.footer li {
  display: inline;
  margin-bottom: 2em;
  margin-right: 1em;
  border-bottom: 3px solid #00E5CF;
}

.footer li a {
  text-decoration: none;
  color: #1e1e1e;
  border-bottom: 3px solid #00E5CF;
}

.footer a:hover {
  border-bottom: 3px solid #1e1e1e;
}

#can_canvas {
  padding-left:10em;
}

@media only screen and (max-width: 650px) {
  h1 {
    font-size: 1.5rem !important;
    margin: 1em 0 0.25em;
  }

  h2 {
    font-size: 1.2rem;
    margin: 1em 0 0.25em;
  }
  .header,
  div[role="main"],
  .footer {
    display: block;
    padding: 0.5em 0;
    z-index: 100;
  }
  header a img {
    position:inherit;
    width:75px;
  }

  .wrapper {
    display: block;
    padding: 0 2em;
    height: auto;
  }

  #can_canvas {
    padding:-2em;
  }
}

@media only screen and (max-width: 900px) {
  div[role="main"] {
    padding-left: 0;
    z-index: 100;
  }

  header a img {
    position:inherit;
    width:100px;
  }

  .footer {
    padding-left: 0;
    font-size: 0.9em;
  }
}