html, body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans', sans-serif;
  color: #454545;
  background: #282828; /* for scrolling above / below page */
}

.body-container {
  background: #FFF;
}

.invert {
  background: #282828;
  color: #989898;
  /* Make the section margin space be dark */
  border: 1px solid #282828;
  border-left: 0;
  border-right: 0;
}

body section.container {
  margin-top: 32px;
  margin-bottom: 32px;
}

.left {
  float: left;
}

.left > p:first-child,
.left > ol > li:first-child > p:first-child {
  margin-top: 0;
}

h1, h2, h3 {
  margin: 0;
}

h1 {
  font-size: 25px;
  font-weight: normal;
  color: #E0E0E0;
}

h2 {
  color: #FF00C6;
  font-size: 20px;
  font-weight: normal;
}

h3 {
  color: #00C8FF;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}

h2, h3 {
  margin-bottom: 12px;
}

p,
subline,
footer,
li {
  font-size: 14px;
  line-height: 21px;
}

subline {
  display: block;
  margin-top: 6px;
  margin-bottom: 12px;
}

p {
  margin: 0 0 12px 0;
}

em {
  color: #00C8FF;
  text-transform: uppercase;
  font-style: normal;
}

ol, ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

ol {
  padding-left: 37px; /* gutter + column */
}

ol li {
  counter-increment: step-counter;
  margin-bottom: 18px;
}

ol li::before {
  content: counter(step-counter);
  background: #00C8FF;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  line-height: 25px;
  display: block;
  margin-left: -37px; /* 12px + width */
  float: left;
  width: 25px;
  border-radius: 8px;
  text-align: center;
  margin-top: -2px;
}

pre {
  margin: 0;
  padding: 0;
  line-height: 19px;
  font-size: 12px;
  font-family: Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

hr {
  width: 100%;
  height: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid #E0E0E0;
}

.icon:before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid #00C8FF;
  border-radius: 8px;
  margin-bottom: 12px;
}

.icon-megaphone:before {
  background: url(./assets/icon_megaphone.png) no-repeat 3px 5px;
  background-size: 19px 17px;
}

.icon-person:before {
  background: url(./assets/icon_person.png) no-repeat 4px 2px;
  background-size: 20px 20px;
}

.icon-bell:before {
  background: url(./assets/icon_bell.png) no-repeat 5px 3px;
  background-size: 16px 20px;
}

.icon-message:before {
  background: url(./assets/icon_message.png) no-repeat 3px 3px;
  background-size: 20px 20px;
}

@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2) {
  .icon-megaphone:before {
    background-image: url(./assets/icon_megaphone@2x.png);
  }
  .icon-person:before {
    background-image: url(./assets/icon_person@2x.png);
  }
  .icon-bell:before {
    background-image: url(./assets/icon_bell@2x.png);
  }
  .icon-message:before {
    background-image: url(./assets/icon_message@2x.png);
  }
}

.plan {
  margin-top: 18px;
  border: 1px solid #454545;
  border-radius: 8px;
  padding: 12px 18px;
}

.plan h3 {
  text-align: center;
}

.plan ul li {
  margin-bottom: 12px;
}

.plan ul li:last-child {
  margin-bottom: 0;
}

blockquote {
  padding-left: 28px;
  margin: 0 0 12px 0;
}

blockquote:before {
  display: block;
  content: '\201C';
  font-size: 50px;
  color: #00C8FF;
  float: left;
  margin-left: -30px;
  margin-top: -15px;
}

blockquote footer {
  margin-left: 20px;
  padding-left: 20px;
}

blockquote footer:before {
  display: block;
  float: left;
  margin-left: -20px;
  content: '\2014';
}

button {
  background: 0;
  border: 1px solid #FF00C6;
  border-radius: 8px;
  color: #FF00C6;
  padding: 5px 50px 7px 50px;
  cursor: pointer;
  font-size: 16px;
  margin: 0 auto;
}

button:hover {
  color: #FFF;
  background: #FF00C6;
}

.center {
  text-align: center;
}

a {
  color: #454545;
  text-decoration: none;
  border-bottom: 1px dashed #989898;
}

a:hover {
  color: #282828;
  border-color: #454545;
}

.invert a {
  color: #989898;
  text-decoration: none;
  border-bottom: 1px dashed #454545;
}

.invert a:hover {
  color: #E0E0E0;
  border-color: #989898;
}

.follow {
  height: 32px; /* same as access button */
}

.hide {
  display: none;
}