@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic);

html, body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body>*:not(header) {
  max-width: 1100px;
  margin: 0 auto;
}

header {
  display: flex;
  flex-direction: row;
  padding: 0 1rem;
  background: #00539F;
  color: white;
  padding: 0 calc((100vw - 1100px) / 2);
}

header .menu {
  flex-grow: 1;
  display: flex;
}

header .title {
  align-self: center;
  font-size: 1.4rem;
  font-weight: 300;
  display: block;
  text-decoration: none;
  color: white;
}

@media (max-width: 1100px) {
  header .title {
    padding-right: 2rem;
  }
}

@media (max-width: 650px) {
  header .title {
    display: none;
  }
}

.menu a {
  color: white;
  display: block;
  text-decoration: none;
  padding: 1rem 1.5rem;
  position: relative;
  margin: 0rem 0.1rem;
}
.menu a.current::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 0.3rem;
  background: #0095DD;
  width: 100%;
  left: 0;
}
.menu a:hover {
  background: #0095DD;
}
@media (max-width: 768px) {
  html, body {
    font-size: 14px;
  }
  header .menu {
    padding: 0;
  }
  .menu a {
    padding: 1rem 1rem;
  }
}
@media (max-width: 400px) {
  header .menu {
    font-size: 3.5vw;
  }
  .menu a {
    padding: 1rem 0.5rem;
  }
}

.yolo {
  display: flex;
}
.yolo .cover-image {
  background-repeat: no-repeat;
  background-size: auto 100%;
  flex-shrink: 0;
}
.yolo .banana {
  height: 34.5vw;
  width: 40vw;
  background-image: url("../img/banana.jpg");
}
.yolo .keon-board-usb {
  height: 22.5vw;
  width: 30vw;
  background-image: url("../img/keon-board-usb.jpg");
}
.yolo .gonzo-worked-open {
  height: 22.5vw;
  width: 30vw;
  background-image: url("../img/gonzo-worked-open.jpg");
}
.yolo .messy-desk {
  height: 22.5vw;
  width: 40.18vw;
  background-image: url("../img/messy-desk.jpg");
}
.yolo .paper-antenna {
  height: 22.5vw;
  width: 26.78vw;
  background-image: url("../img/paper-antenna.jpg");
}
.yolo .cross-compile {
  height: 22.5vw;
  width: 31.04vw;
  background-image: url("../img/cross-compile.jpg");
}
.yolo .device-motion {
  height: 22.5vw;
  width: 27vw;
  background-image: url("../img/devicemotion.jpg");
}
.yolo .briantracker {
  height: 22.5vw;
  width: 30.54vw;
  background-image: url("../img/briantracker.jpg");
}
.yolo .flame {
  height: 22.5vw;
  width: 26.58vw;
  background-image: url("../img/flame.jpg");
}
.yolo .power {
  height: 22.5vw;
  width: 28.20vw;
  background-image: url("../img/power.jpg");
}
.yolo .jsconfeu {
  height: 30vw;
  width: 35.44vw;
  background-image: url("../img/jsconfeu.jpg");
}
@media (max-width: 768px) {
  .yolo {
    flex-direction: column;
  }
  .yolo .story {
    margin: 0 1rem;
  }
  .yolo .cover-image {
    width: 100vw;
    height: 30vw;
    background-size: 100% auto;
    background-position: 50%;
    order: -1;
  }
}

@media (min-width: 1600px) {
  .yolo .cover-image {
    max-width: 50%;
    max-height: 50vh;
  }
}

.story {
  margin: 0 2rem;
  align-self: center;
  flex-grow: 1;
}
.story.left {
  margin-left: 0;
}
@media (max-width: 1100px) {
  .story.left {
    margin-left: 1rem;
  }
}
.story h1 {
  font-weight: 300;
  color: #E66000;
  font-size: 4rem;
  margin: 0;
}
.story h2 {
  font-weight: 400;
  margin: 0;
  color: #FF9500;
}
.section {
  border-bottom: solid 1px #4D4E53;
}
.section.secondary {
  padding: 1rem;
}

li {
  line-height: 1.8rem;
}
.secondary a, .api a, .story a:not(.button) {
  color: #0095DD;
  text-decoration: none;
}
.secondary a:hover, .api a:hover {
  color: #00539F;
}

h3 {
  margin: 0;
  font-weight: 300;
  font-size: 1.6rem;
  color: #4D4E53;
}

a.button {
  display: inline-block;
  border: solid 1px black;
  border-radius: 4px;
  text-decoration: none;
  color: black;
  padding: 0.5rem;
}
a.button {
  color: #0095DD;
  border-color: #0095DD;
}
a.button:hover {
  background: rgba(0, 150, 221, 0.1);
}

.footer {
  padding: 1rem;
  color: #aaa;
}
.footer a {
  color: #aaa;
}
.code {
  background: #eee;
  font-family: monospace;
  padding: 0.3rem;
  border-radius: 0.3rem;
}
p.code, pre.code {
  line-height: 1.8rem;
  padding-left: 1rem;
}
.api h1 {
  font-size: 3rem;
  margin-top: 1rem;
}
.article h1 {
  font-size: 3rem;
}
.device-description {
  margin-top: -1rem;
  margin-left: 1rem;
}