/*body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}*/

html, body {
  font-family: "Open Sans", sans-serif;
  color: #212121;
  background-color: #3F51B5;
  -webkit-font-smoothing: antialiased;
}

a, a:visited, a:hover, a:focus {
  color: #cc9900;
}

code {
  color: #3F51B5;
}

pre {
  color: #212121;
  /* box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px; */
  border-radius: 2px;
}

pre[class~="language-grain"], code[class~="language-grain"] {
  font-family: 'Fira Mono', monospace;
  background-color: #F5F5F5;
}

.navbar {
  background-color: #cc9900;
  color: white;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8);
  transition: color .2s;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 1);
}

.navbar-nav-svg {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: text-top;
  fill: rgba(255, 255, 255, 0.8);
  color: rgba(255, 255, 255, 0.8);
  transition: fill .2s, color .2s;
}
.navbar-nav-svg:focus, .navbar-nav-svg:hover {
  fill: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}

#hero {
  background-color: #3F51B5;
  color: white;
}
@media screen and (min-width: 768px) {
  #hero {
    background: url('/images/hexes2.svg'), #3F51B5;
    background-repeat: no-repeat;
    background-position-x: 82vw;
    background-size: 37%;
    background-position-y: 51%;
  }
}

#hero-wrapper {
  margin-top: 48px;
  margin-bottom: 72px;
}
#hero-wrapper h1 {
  font-size: 72px;
}
#hero-wrapper h2 {
  font-size: 36px;
}

.hero-nav {
  margin-top: 1em;
  line-height: 3;
}

.hero-nav > a, .hero-nav > a:visited {
  color: white;
  border: 2px solid white;
  border-radius: 2px;
  padding: .3em 1em;
  margin-right: .5em;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 100ms;
}
.hero-nav > a:hover, .hero-nav > a:focus {
  color: #3F51B5;
  background-color: white;
}

.block {
  background-color: white;
  padding-top: 48px;
}

footer {
  background-color: #3F51B5;
  color: white;
}