/*! Open Sans Light | Apache License 2.0 | fonts.google.com/specimen/Open+Sans */

@font-face {
  font-family: "Open Sans";
  font-display: fallback;
  font-style: normal;
  font-weight: 300;
  src: url("fonts/open-sans-light.eot");
  src: local("Open Sans Light"), local("OpenSans-Light"),
       url("fonts/open-sans-light.eot?#iefix") format("embedded-opentype"),
       url("fonts/open-sans-light.woff2") format("woff2"),
       url("fonts/open-sans-light.woff") format("woff"),
       url("fonts/open-sans-light.ttf") format("truetype"),
       url("fonts/open-sans-light.svg#OpenSans") format("svg");
}


/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: .35em .75em .625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}


/*! JJ CSS */

body {
  display: table;
  width: 100%;
  height: 100%;
  color: #1a1a1a;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.5;
}

a {
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s linear;
  -moz-transition: border-color 0.2s linear;
  -webkit-transition: border-color 0.2s linear;
  -o-transition: border-color 0.2s linear;
}

div#home {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 8%;
}

div#home img#me {
  float: right;
  margin: 0 0 12px 12px;
  padding: 4px;
  border: 1px solid #dddddd;
  width: 140px;
  height: 140px;
}

div#home h1 {
  margin: 0 0 20px 0;
  font-size: 1.5em;
  line-height: 1;
}

div#home h2 {
  margin: 20px 0;
  font-size: 1.2em;
}

div#home p {
  margin: 20px 0;
  font-size: 1em;
}

div#home sup {
  vertical-align: middle;
  font-size: 50%;
}

@media screen and (max-width: 800px) {
  body {
    font-size: 18px;
  }

  div#home img#me {
    width: 80px;
    height: 80px;
  }

  div#home h1 {
    font-size: 130%;
  }

  div#home h2 {
    font-size: 100%;
  }

  div#home div#footer div#panda {
    display: none;
  }

  div#home div#footer div#blog, div#home div#footer div#info {
    width: 50% !important;
    line-height: 20px !important;
  }

  div#home div#footer div#info {
    font-size: 0.6em !important;
  }

  div#home div#footer div#info span#copyright::after {
    content: "\A";
    white-space: pre;
  }
}

div#home a#boston {
  color: #008349;
}
div#home a#boston:hover {
  border-color: #008349;
}

div#home a#javascript {
  color: #f48024;
}
div#home a#javascript:hover {
  border-color: #f48024;
}

div#home a#node {
  color: #6fbc4e;
}
div#home a#node:hover {
  border-color: #6fbc4e;
}

div#home a#react {
  color: #61dafb;
}
div#home a#react:hover {
  border-color: #61dafb;
}

div#home a#angular {
  color: #c3002f;
}
div#home a#angular:hover {
  border-color: #c3002f;
}

div#home a#vue {
  color: #41b883;
}
div#home a#vue:hover {
  border-color: #41b883;
}

div#home a#java {
  color: #ab6311;
}
div#home a#java:hover {
  border-color: #ab6311;
}

div#home a#cpp {
  color: #865fc5;
}
div#home a#cpp:hover {
  border-color: #865fc5;
}

div#home a#python {
  color: #f3bb12;
}
div#home a#python:hover {
  border-color: #f3bb12;
}

div#home a#php {
  color: #8892bf;
}
div#home a#php:hover {
  border-color: #8892bf;
}

div#home a#ruby {
  color: #d34135;
}
div#home a#ruby:hover {
  border-color: #d34135;
}

div#home a#infosec {
  color: #00b81a;
}
div#home a#infosec:hover {
  border-color: #00b81a;
}

div#home a#server {
  color: #0098ec;
}
div#home a#server:hover {
  border-color: #0098ec;
}
div#home a#server span#serverless {
  color: #87cef7;
  margin-left: 0.06em;
}

div#home a#devops {
  color: #ff6200;
}
div#home a#devops:hover {
  border-color: #ff6200;
}

div#home a#containerization {
  color: #c48f49;
}
div#home a#containerization:hover {
  border-color: #c48f49;
}

div#home a#y2k {
  color: #ffa900;
}
div#home a#y2k:hover {
  border-color: #ffa900;
}
div#home a#y2k span#shh {
  color: #aaaaaa;
}

div#home span#fairy {
  color: #fd5da8;
}
div#home span#fairy:hover {
  cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMiIgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij48dGV4dCB5PSIxOCI+8J+nmjwvdGV4dD48L3N2Zz4=), default !important;
}

div#home a#github {
  color: #7290a4;
}
div#home a#github:hover {
  border-color: #7290a4;
}

div#home a#linkedin {
  color: #0073b1;
}
div#home a#linkedin:hover {
  border-color: #0073b1;
}

div#home a#facebook {
  color: #4267b2;
}
div#home a#facebook:hover {
  border-color: #4267b2;
}

div#home a.twitter {
  color: #00acee;
}
div#home a.twitter:hover {
  border-color: #00acee;
}

div#home a#instagram {
  color: #a37754;
}
div#home a#instagram:hover {
  border-color: #a37754;
}

div#home a#news-1 {
  color: #ff1b1b;
}
div#home a#news-1:hover {
  border-color: #ff1b1b;
}

div#home a#news-2 {
  color: #f78200;
}
div#home a#news-2:hover {
  border-color: #f78200;
}

div#home a#news-3 {
  color: #ffc30c;
}
div#home a#news-3:hover {
  border-color: #ffc30c;
}

div#home a#news-4 {
  color: #5ebd3e;
}
div#home a#news-4:hover {
  border-color: #5ebd3e;
}

div#home a#news-5 {
  color: #009cdf;
}
div#home a#news-5:hover {
  border-color: #009cdf;
}

div#home a#news-6 {
  color: #3e49bb;
}
div#home a#news-6:hover {
  border-color: #3e49bb;
}

div#home a#news-7 {
  color: #973999;
}
div#home a#news-7:hover {
  border-color: #973999;
}

div#home a#resume {
  color: #d54b3d;
}
div#home a#resume:hover {
  border-color: #d54b3d;
}

div#home a#email {
  color: #de0c0c;
}
div#home a#email:hover {
  border-color: #de0c0c;
}

div#home a#pgp {
  color: #999999;
  margin: 0 4px;
}
div#home a#pgp:hover {
  border-color: #999999;
}

div#home a#sms {
  color: #6fcc01;
}
div#home a#sms:hover {
  border-color: #6fcc01;
}

div#home div#footer {
  margin: 0;
  height: 40px;
}

div#home div#footer div {
  float: left;
  vertical-align: middle;
  line-height: 40px;
  height: 100%;
}

div#home div#footer div#blog {
  width: 40%;
  text-align: left;
  font-size: 0.75em;
}

div#home div#footer div#blog a#wordpress {
  color: #0087be;
}
div#home div#footer div#blog a#wordpress:hover {
  border-color: #0087be;
}

div#home div#footer div#panda {
  width: 20%;
  text-align: center;
  font-size: 1em;
}

div#home div#footer div#panda span {
  text-align: center;
  width: 12px;
}

div#home div#footer div#info {
  width: 40%;
  font-size: 0.5em;
  color: #999999;
  text-align: right;
}

div#home div#footer div#info a {
  color: #999999;
}

div#home div#footer div#info a#source {
  border-bottom: 1px solid #dddddd;
}

@keyframes wave {
    0% { transform: rotate(  0.0deg); }
   10% { transform: rotate(-10.0deg); }
   20% { transform: rotate( 12.0deg); }
   30% { transform: rotate(-10.0deg); }
   40% { transform: rotate(  9.0deg); }
   50% { transform: rotate(  0.0deg); }
  100% { transform: rotate(  0.0deg); }
}

div#home h1 span#wave {
  display: inline-block;
  margin-left: 2px;
  animation-name: wave;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  transform-origin: 70% 70%;
}
