@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:400,400i,700");
* {
  box-sizing: border-box; }

body {
  font-family: Roboto, Helvetica, Arial, Helvetica, sans-serif;
  color: #333;
  line-height: 1.5; }

@media (min-width: 30em) {
  body {
    font-size: 1.25em; } }

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

h1,
h2,
h3 {
  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif; }

a {
  color: #0074aa;
  text-decoration: none;
  border-bottom: 0.125rem solid #0074aa50; }
  a:visited {
    color: #0e45bb;
    border-bottom-color: #0e45bb50; }

h2,
h3 {
  margin-top: 0; }

p {
  margin-top: 0; }

ul {
  margin: 0 0 2em;
  padding: 0 0 0 1.5em; }

li {
  margin: 0 0 1em; }

img {
  max-width: 100%; }

ruby {
  ruby-position: under; }

rt {
  font-family: Roboto, Helvetica, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 0.9375rem; }

.page {
  max-width: 51rem;
  margin: 0 auto;
  padding: 4rem 2rem; }

@media (min-width: 30em) {
  .page {
    padding: 5rem 3rem; } }

@supports (display: grid) {
  @media (min-width: 42em) {
    .page__header {
      display: grid;
      grid-template: 1fr / 1fr auto;
      grid-template-areas: "title ." "description social"; } } }

.page__title-wrapper {
  grid-area: title;
  padding: 0 0 1.5em; }

.page__title {
  margin: 0; }

.my-name {
  background: #ffdf6f70; }

.page__header-copy {
  grid-area: description;
  margin: 0 0 2em; }

.aka {
  font-size: 0.75em; }

.social-icons {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  grid-area: social;
  justify-self: end;
  list-style: none;
  margin: 0 0 1em;
  padding: 0; }

@media (min-width: 42em) {
  .social-icons {
    -ms-flex-direction: column;
        flex-direction: column;
    width: 4.25em;
    margin: 0;
    padding: 0 0 0 2em; } }

.social-icons__icon-wrapper {
  margin: 0 1em 1em 0;
  padding: 0; }

@media (min-width: 42em) {
  .social-icons__icon-wrapper {
    margin: 0 0 1em 0; } }

.social-icons__icon {
  display: block;
  width: 2.25em;
  height: 2.25em;
  border: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.8; }
  .social-icons__icon:hover, .social-icons__icon:focus {
    opacity: 1; }
  .social-icons__icon--github {
    background-image: url(../images/Github.svg); }
  .social-icons__icon--codepen {
    background-image: url(../images/Codepen.svg); }
  .social-icons__icon--linkedin {
    background-image: url(../images/Linkedin.svg); }
  .social-icons__icon--twitter {
    background-image: url(../images/Twitter.svg); }

.portrait {
  margin: 0 auto 1.5em;
  max-width: 20em; }

@media (min-width: 42em) {
  .portrait {
    float: right;
    width: 50%;
    padding: 0 0 0 2em; } }

.slides h3,
.articles h3 {
  margin: 0 0 0.5em; }

.slides li,
.articles li {
  position: relative;
  list-style: none; }
  .slides li:before,
  .articles li:before {
    content: '✶';
    position: absolute;
    top: 0.2em;
    left: -1.25em;
    display: block;
    color: #daa900;
    -ms-transform: rotate(20deg);
        transform: rotate(20deg); }

.unem {
  color: #888;
  font-size: 0.75em; }

.space-dude {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 5em 2em 4em;
  background: linear-gradient(to bottom, #15a1e7, #004669);
  text-align: center; }
  .space-dude img {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 37.75rem; }

.space-dude__inner-wrapper {
  position: relative; }
  .space-dude__inner-wrapper:before {
    content: '';
    position: absolute;
    top: -2em;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(190deg, rgba(200, 0, 50, 0.4), rgba(150, 0, 50, 0) 60%);
    border-radius: 5%; }

.space-dude__antenna-nonsense {
  position: absolute;
  top: 6.5%;
  right: 31%;
  width: 3em;
  height: 3em;
  overflow: hidden;
  -ms-transform: rotate(58deg);
      transform: rotate(58deg);
  -ms-transform-origin: right top;
      transform-origin: right top;
  z-index: 1; }
  .space-dude__antenna-nonsense:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2em;
    height: 2em;
    background: radial-gradient(transparent 35%, #e22 35%, #e22 45%, transparent 45%, transparent 60%, #e22 60%, #e22 70%, transparent 70%);
    -ms-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    opacity: 0.1;
    animation: 1.5s infinite emit;
    animation-timing-function: linear; }

.space-dude__antenna-nonsense--2 {
  -ms-transform: rotate(-120deg);
      transform: rotate(-120deg); }

@keyframes emit {
  0% {
    transform: translate(50%, -50%) scale(1.2);
    opacity: 0; }
  25% {
    transform: translate(50%, -50%) scale(1.45);
    opacity: 0.5; }
  50% {
    transform: translate(50%, -50%) scale(1.7);
    opacity: 0.3; }
  75% {
    transform: translate(50%, -50%) scale(1.95);
    opacity: 0.5; }
  100% {
    transform: translate(50%, -50%) scale(2.2);
    opacity: 0; } }

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  /* 1 */ }

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit; }

.invisible {
  visibility: hidden; }

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clearfix:after {
  clear: both; }