@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url("https://fonts.googleapis.com/css?family=Lusitana");
/* If Google is unreachable, use local fallbacks */
@font-face {
  font-family: "Raleway-TTF";
  font-style: normal;
  font-weight: 400;
  src: local("Raleway"), local("Raleway-Regular"),
    url(/fonts/raleway.ttf) format("truetype");
}
@font-face {
  font-family: "Lusitana-TTF";
  font-style: normal;
  font-weight: 400;
  src: local("Lusitana"), url(/fonts/lusitana.ttf) format("truetype");
}

/* Base Color and Font */
html {
  --color-bg: hsl(0 0% 99.61%);
  --color-fg: hsl(0 0% 20%);
  --color-border: hsl(0 0% 66.67%);
  --color-active: hsl(0 0% 0%);
  --color-red: #dc322f;
  --nav-height: 65px;

  color: var(--color-fg);
  background: var(--color-bg);
}
body {
  @media (min-width: 1280px) {
    width: 60%;
  }
  @media (min-width: 640px) and (max-width: 1280px) {
    width: 80%;
    max-width: 768px;
  }
  @media (max-width: 640px) {
    width: 100%;
    max-width: 512px;
  }
  margin: 0 auto min(25%, 50vh) auto;
  font-size: 16px;
  font-family: Lusitana, Lusitana-TTF, Microsoft Yahei, Hiragino Sans GB,
    WenQuanYi Micro Hei, serif;
  -webkit-font-smoothing: antialiased;
}

/* Nav */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  padding-top: 2rem;
  margin-bottom: 2rem;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Main */
main {
  position: sticky;
  top: var(--nav-height);
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
}

/* Anchors */
.anchor[id] {
  padding-top: calc(var(--nav-height) + 2rem) !important;
  margin-top: calc((var(--nav-height) + 2rem) * -1) !important;
}

/* Links */
a {
  color: var(--color-red);

  &:hover, &.active {
    color: var(--color-active);
    text-decoration: none;
  }
}
.lists a, .timemachine a {
  color: var(--color-active);

  &:hover, &.active {
    color: var(--color-red);
  }
}

/* Info */
span.title {
  font: 1.5em "Raleway", "Raleway-TTF", "sans-serif";
}
span.tagline {
  margin: 0 0.5em;
}
span.link {
  float: right;
  font-size: 0.8em;
  a {
    margin-left: 1em;
  }
}
header span.title {
  font-size: 1em;
}
footer {
  color: hsl(0 0% 50%);
  font-size: 12px;
  margin: 2em 0;
  border-top: double;
  clear: both;
  .piece {
    text-align: center;
    span {
      margin: 0 1em;
      display: inline-block;
    }
  }
}

/* Margin */
em,
strong,
a {
  margin-left: 0.1em;
  margin-right: 0.1em;
}

/* Code */
code {
  border: 1px hsl(0 0% 80%) solid;
  padding: 2px 4px;
  background: hsl(0 0% 98.04%);
  margin: 0 0.2em;
  font-size: 80%;
  line-height: inherit;
  white-space: nowrap;
}
pre {
  overflow-x: auto;
  code {
    border: none;
    word-wrap: normal;
    white-space: pre;
    padding: 0;
    margin: 0;
  }
}

/* Article */
article {
  img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 5px;
    box-shadow: 3px 3px hsl(0 0% 80%);
  }
}

/* Lists */
.lists {
  font-size: 90%;
  width: 90%;
  color: hsl(0 0% 30%);
  margin: 0 auto 2em auto;
  text-align: center;

  .title {
    display: inline-block;
    font: 1.6em "Raleway", "Raleway-TTF", "sans-serif";
    margin: 0 auto;
    padding: 0 1em;
    background-color: var(--color-bg);
  }

  .cross-line {
    width: 50%;
    margin: -1em auto 1.2em auto;
    border-top: hsl(0 0% 50%) solid 1px;
  }

  .small-line {
    width: 30%;
  }

  .item {
    text-align: center;
    margin-bottom: 1em;

    a {
      font: normal 23px/32px serif;
    }
  }
}

/* Arrows */
.arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  line-height: 7px;
  border-top: 3px solid var(--color-border);
  border-right: 3px solid var(--color-border);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow-down {
  -ms-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.arrow-left {
  -ms-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
.arrow-up {
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}