/* cousine-regular - latin-ext_latin */
@font-face {
  font-family: 'Cousine';
  font-style: normal;
  font-weight: 400;
  src: local('Cousine Regular'), local('Cousine-Regular'),
       url('/fonts/cousine-v12-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/cousine-v12-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* sunflower-300 - latin */
@font-face {
  font-family: 'Sunflower';
  font-style: normal;
  font-weight: 300;
  src: local('Sunflower Light'), local('Sunflower-Light'),
       url('/fonts/sunflower-v3-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/sunflower-v3-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* sunflower-700 - latin */
@font-face {
  font-family: 'Sunflower';
  font-style: normal;
  font-weight: 700;
  src: local('Sunflower Bold'), local('Sunflower-Bold'),
       url('/fonts/sunflower-v3-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/sunflower-v3-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* sunflower-500 - latin */
@font-face {
  font-family: 'Sunflower';
  font-style: normal;
  font-weight: 500;
  src: local('Sunflower Medium'), local('Sunflower-Medium'),
       url('/fonts/sunflower-v3-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/sunflower-v3-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


body {
  background-color: #fafafa;
  color: #383a42;
  font-family: 'Sunflower';
  font-weight: 300;
  margin: 0;
}

body, textarea { font-size: 18px; }

@media (max-width: 540px) {
  body, textarea { font-size: 16px; }
}

@media (max-width: 300px) {
  body, textarea { font-size: 14px; }
}

a {
  color: #929c6b;
  text-decoration: none;
}

code {
  font-family: 'Cousine' !important;
  font-size: 0.8em;
}

img {
  max-width: 100%;
}

h1, h2, h3 {
  align-items: center;
  display: flex;
  font-weight: 500;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }

h1 img,
h2 img,
h3 img {
  padding-right: 0.5em;
}

pre {
  position: relative;
}

.boundary {
  margin: 0 auto;
  max-width: 1280px;
}

.logo {
  max-width: 1.5em;
  height: auto;
}

.parade-logo {
  max-width: 7.5%;
  height: auto;
  padding: 4%;
}

.padding {
  padding: 0 1em;
}

.brand {
  color: #fff;
  font-weight: 400;
}

.menu {
  display: flex;
}

.menu > * {
  padding: 0.5em;
}

.menu__text {
  color: #999;
}

@media (max-width: 690px) {
  .menu__text {
    display: none;
  }
}

video {
  max-width: 100%;
}

.header__primary {
  background: #51575d;
  font-size: 1.2em;
}

.header__primary .menu__link {
  color: #fff;
}

.header__primary .menu__link.active {
  font-weight: 500;
}

.header__secondary {
  background-color: #ececec;
  /* font-size:  */
}

.header__secondary .menu__link {
  color: #484848;
}

.header__secondary .menu__link.active {
  font-weight: 500;
}

.spacer {
  flex-grow: 1;
}

.footer {
  color: #ccc;
  font-size: 0.85em;
  margin: 3em 0;
  text-align: center;
}

.footer a {
  color: #ccc;
}

#code {
  height: 300px;
  width: 100%;
}

#editor {
  height: 300px;
  width: 100%;
}

.hacky-half {
  width: 90%;
}

.split,
.tripled {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 720px) {
  .split,
  .tripled {
    flex-flow: row wrap;
  }

  .tripled .third {
    width: calc(50% - 0.5em);
  }
}

@media (min-width: 1280px) {
  .hacky-half {
    padding: 1em;
    width: 50%;
  }

  .split .half {
    width: calc(50% - 0.5em);
  }

  .tripled .third {
    width: calc(33% - 0.5em);
  }
}

.docs {
  display: flex;
  margin: 0 auto;
  max-width: 1280px;
}

.docs .class {
  border-left: 0.25em solid #383a42;
  margin-top: 3em;
  padding-left: 0.25em;
}

.docs .main {
  max-width: 900px;
}

.docs .pad {
  margin: 1em 0;
}

.docs .syntax {
  margin-top: 3em;
  white-space: pre;
}

p {
  text-align: justify;
}

.docs p {
  line-height: 140%;
  text-align: justify;
}

.docs p code {
  background-color: #eaeaea;
  padding: 0.25em;
}

.docs blockquote {
  background-color: #f8f0e8;
  margin: 0;
  padding: 1em;
}

.docs blockquote p {
  margin: 0;
}

.extension {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.5em 1em;
  font-size: 0.8em;
  color: #ccc;
}

.sidebar, .main {
  padding: 0 1em;
}