$primary: #2B4B8E;
$link: #6d84b4;

@import 'components';
@import 'pages';

// layout stuff for demo

html, body {
  padding: 0;
  margin: 0;
  color: rgb(50,50,50);
  font-family: helvetica, sans-serif;
  background: #EEE;
}

a {
  color: $link;
  text-decoration: none;
  &:hover { color: $primary; }
  &:active { color: darken($primary, 10%); }
}

p {
  line-height: 1.4em;
  font-size: 15px;
}

code {
  background-color: #EEE;
  padding: 0 7px;
}

.article li {
  margin-bottom: 6px;
}

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.layout-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding-top: 50px;
}

.container {
  max-width: 1000px;
  margin: 0 auto;

  &--panel {
    padding: 20px 50px;
    background: white;
    max-width: 1000px;
    margin: 0 auto 30px;
  }
}

.col-50 {
  width: 50%;
}

.col-25 {
  width: 25%;
}

.article figure {
  margin: 0;
  padding: 0;

  img {
    max-width: 700px;
    display: block;
    margin: 0 auto;
  }
}
