/* constant */
* {
  box-sizing: border-box;
  text-rendering: geometricPrecision;
}

body {
  color: #222;
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  font-family: sans-serif;
  line-height: 1.5rem;
  max-width: 64em;
  margin: auto;
}

pre {
  white-space: pre-wrap;
}

a {
  color: #ff2e88;
  text-decoration: none;
}

a:hover {
  color: #fff;
  background-color: #ff2e88;
}

.content *:first-child {
  margin-top: 0px;
}

h1 {
  margin-bottom: 10px;
}

h2 {
  font-size: 24px;
}

.active.section, .active.main-title {
  color: #ff2e88;
}

.main-title, .section, .media-title {
  white-space: nowrap;
  color: inherit;
  font-weight: bold;
}

.media-title {
  font-size: 24px;
}

.date {
  color: #999;
}

.media:not(:last-child) {
  margin-bottom: 1.25rem;
}

.media-left {
  display: table-cell;
  vertical-align: top;
  padding-right: 1rem;
}

.media-right {
  display: table-cell;
  vertical-align: top;
  padding-left: 1rem;
}

.media-body {
  display: table-cell;
  vertical-align: top;
}

.content * img:not(.icon) {
  max-width: 100%;
}

img.icon {
  border-radius:10px;
  height:64px;
  width:64px;
}

sup > a {
  border-bottom: none;
}

sup {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

/* header */
.header {
  position: fixed;
  width: 100%;
}

.header-bg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #fff;
  opacity: 0.8;
  z-index: -1;
  height: inherit;
}

@media only screen and (min-width: 58em) {
 .content {
    padding-top: 60px;
  }

  .header {
    height: 60px;
  }
}

@media only screen and (max-width: 58em) {
  .content {
    padding-top: 31px;
  }

  .header {
    line-height: 50px;
    top: -13px;
    position: relative;
  }
}

.main-title {
  font-size: 30px;
  padding-right: 30px;
}

.section {
  font-size: 24px;
  padding-right: 30px;
}

.plain:hover, .main-title:hover, .section:hover, .media-title:hover {
  color: #ff2e88;
  background-color: transparent;
}