@import url("https://fonts.googleapis.com/css?family=Orbitron:500");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("http://fonts.googleapis.com/earlyaccess/notosanstc.css");
body {
  background: #0f1516;
  font-family: 'Open Sans', 'Noto Sans TC', sans-serif;
}
@media (max-width: 33.9em) {
  body {
    font-size: 0.7em;
  }
}
.bg-gradient {
  background: #192224;
  background: -moz-linear-gradient(top, #192224 0%, #21728b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #192224), color-stop(100%, #21728b));
  background: -webkit-linear-gradient(top, #192224 0%, #21728b 100%);
  background: -o-linear-gradient(top, #192224 0%, #21728b 100%);
  background: -ms-linear-gradient(top, #192224 0%, #21728b 100%);
  background: linear-gradient(to bottom, #192224 0%, #21728b 100%);
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: -2;
}
.bg-pattern {
  background: url("../img/bg-pattern.png") repeat;
  opacity: 0.5;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: -1;
}
a,
a:link,
a:visited,
a:active {
  color: #d7ecff;
  border-bottom: 1px dotted #d7ecff;
  cursor: pointer;
  transition: text-shadow 0.3s ease, border-bottom-color 0.5s ease;
  text-decoration: none;
}
a:hover {
  color: #d7ecff;
  text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 7px #228dff;
  border-bottom: 1px dotted transparent;
  text-decoration: none;
}
.btn {
  color: #113a47;
  text-decoration: none;
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
  background: #d7ecff;
}
.btn:hover {
  background: #b1daff;
  transition: all 0.3s ease;
}
.btn:active {
  background: #62b4ff;
}
.push {
  height: 150px;
}
@media (max-width: 33.9em) {
  .push {
    height: 60px;
  }
}
header {
  padding-top: 100px;
}
header .logo {
  margin: 0 auto;
  text-align: center;
}
header .logo a,
header .logo a:link,
header .logo a:visited,
header .logo a:active {
  border-bottom: none;
}
header .logo .logo-icon {
  font-size: 60px;
  color: #d7ecff;
  text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 15px #228dff;
}
header .logo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
header .logo .title {
  line-height: 100px;
  color: #d7ecff;
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
  text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 15px #228dff;
}
section.main {
  color: #d7ecff;
}
section.main .post {
  margin-top: 200px;
}
@media (max-width: 33.9em) {
  section.main .post {
    margin-top: 60px;
  }
}
section.main .post .post-header {
  position: relative;
  width: 100%;
  margin: 0 10px;
}
section.main .post .post-header:before {
  position: absolute;
  padding: 5px;
  top: -10px;
  bottom: -10px;
  left: -5px;
  content: "  ";
  border-left: 1px solid #d7ecff;
  border-bottom: 1px solid #d7ecff;
  border-top: 1px solid #d7ecff;
  transition: left 0.3s ease;
}
@media (max-width: 33.9em) {
  section.main .post .post-header:before {
    display: none;
  }
}
section.main .post .post-header:after {
  position: absolute;
  content: "  ";
  padding: 5px;
  top: -10px;
  bottom: -10px;
  right: -5px;
  border-right: 1px solid #d7ecff;
  border-bottom: 1px solid #d7ecff;
  border-top: 1px solid #d7ecff;
  transition: right 0.3s ease;
}
@media (max-width: 33.9em) {
  section.main .post .post-header:after {
    display: none;
  }
}
section.main .post .post-header h1.title {
  text-align: center;
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
  text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 15px #228dff;
  cursor: pointer;
}
section.main .post .post-header h1.title a,
section.main .post .post-header h1.title a:link,
section.main .post .post-header h1.title a:visited,
section.main .post .post-header h1.title a:active {
  border-bottom: none;
}
@media (max-width: 33.9em) {
  section.main .post .post-header h1.title {
    font-size: 2.5em;
  }
}
section.main .post .post-header .post-info {
  margin-top: 15px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
}
section.main .post .post-header .post-info span {
  padding: 10px;
}
section.main .post .post-header.hover:before {
  left: 5px;
}
section.main .post .post-header.hover:after {
  right: 5px;
}
section.main .post .content {
  margin-top: 65px;
}
@media (max-width: 33.9em) {
  section.main .post .content {
    margin-top: 40px;
    text-align: justify;
  }
}
section.main .post .content .gallery-container {
  width: 100%;
  display: block;
}
section.main .post .content .gallery-container:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 50px;
  clear: both;
}
section.main .post .content .gallery-container .picture-container {
  width: 25%;
  float: left;
  min-width: 200px;
}
section.main .post .content .gallery-container .picture-container a {
  border: none;
}
section.main .post .content .gallery-container .picture-container a .img-thumbnail {
  border: none;
  background: transparent;
  padding-right: 20px;
  width: 100%;
}
section.main .post .read-more {
  margin: 10px auto;
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
  text-transform: uppercase;
}
section.main .post .comments {
  margin-top: 120px;
}
@media (max-width: 33.9em) {
  section.main .post .comments {
    margin-top: 60px;
  }
}
section.main .post-tags {
  margin-top: 60px;
  text-transform: uppercase;
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
}
section.main .post-tags a,
section.main .post-tags i {
  margin-right: 15px;
}
.featherlight .featherlight-content {
  background: transparent;
}
.featherlight .featherlight-content .featherlight-close {
  color: #d7ecff;
  cursor: pointer;
  transition: text-shadow 0.3s ease;
  text-decoration: none;
  background: transparent;
}
.featherlight .featherlight-content .featherlight-close:hover {
  text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 7px #228dff;
}
section.main .post .content h1,
section.main .post .content h2,
section.main .post .content h3,
section.main .post .content h4,
section.main .post .content h5,
section.main .post .content h6 {
  color: #d7ecff;
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
}
section.main .post .content h1,
section.main .post .content h2 {
  text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 15px #228dff;
}
section.main .post .content h1 {
  width: 100%;
  padding-bottom: 10px;
  margin: 60px 0 30px 0;
  border-bottom: 1px solid #d7ecff;
}
section.main .post .content h2 {
  margin: 50px 0 15px 0;
}
section.main .post .content h3 {
  margin: 50px 0 15px 0;
  text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 7px #228dff;
}
section.main .post .content hr {
  border-color: #d7ecff;
}
section.main .post .content b {
  font-weight: 900;
}
section.main .post .content table {
  margin: 0 0 3em 0;
  width: 100%;
}
section.main .post .content table tbody tr {
  border: solid 1px #d7ecff;
  border-left: 0;
  border-right: 0;
}
section.main .post .content table tbody tr:nth-child(2n + 1) {
  background: rgba(144,144,144,0.075);
}
section.main .post .content table td {
  padding: 0.75em 0.75em;
}
section.main .post .content table th {
  font-weight: 900;
  padding: 0 0.75em 0.75em 0.75em;
  text-align: left;
}
section.main .post .content table thead {
  border-bottom: solid 2px #d7ecff;
}
section.main .post .content table tfoot {
  border-top: solid 2px #d7ecff;
}
section.main .post .content blockquote {
  background: rgba(144,144,144,0.1);
  border-left: 10px solid #a9b7c6;
  margin: 2em 10px;
  padding: 1em 15px;
}
section.main .post .content blockquote p {
  display: inline;
}
section.main .post .content blockquote footer {
  text-align: right;
  padding: 25px 10px 10px 10px;
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
  overflow: auto;
}
section.main .post .content blockquote footer strong:before {
  content: "-";
  padding-right: 10px;
}
section.main .post .content blockquote footer cite {
  padding: 10px;
}
section.main .post .content .pullquote {
  float: right;
  border: none;
  padding: 0;
  margin: 1em 0 1em 1.5em;
  text-align: left;
  width: 45%;
  background: none;
  font-size: 2em;
  font-style: italic;
}
section.main .post .content .pullquote.left {
  float: left;
}
section.main .post .content img {
  display: block;
  margin: 0 auto;
}
section.main .post .content .video-container {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
}
section.main .post .content .video-container iframe,
section.main .post .content .video-container object,
section.main .post .content .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
.archive-container {
  margin-top: 50px;
}
@media (max-width: 33.9em) {
  .archive-container {
    margin-top: 0;
  }
}
.archive-container .archive-post {
  margin: 10px 0;
  font-size: 1.2em;
  border-left: 10px solid transparent;
  background: rgba(144,144,144,0.1);
  transition: border-left 0.3s ease, background 0.3s ease;
}
.archive-container .archive-post .archive-date {
  margin-right: 40px;
}
.archive-container .archive-post a,
.archive-container .archive-post a:link,
.archive-container .archive-post a:visited,
.archive-container .archive-post a:active {
  padding: 10px 10px 10px 40px;
  display: block;
  border-bottom: none;
  width: 100%;
}
.archive-container .archive-post a:hover {
  padding: 10px 10px 10px 40px;
  display: block;
  width: 100%;
  text-shadow: none;
}
.archive-container .archive-post:hover {
  background: rgba(144,144,144,0.2);
  border-left: 10px solid #d7ecff;
}
.menu-bg {
  background: #000;
  display: none;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 100;
}
.menu-bg .menu-container {
  position: fixed;
  padding: 0 250px;
  border-left: 1px solid #d7ecff;
  border-right: 1px solid #d7ecff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.menu-bg .menu-container ul {
  list-style-type: none;
  margin-bottom: 0;
}
.menu-bg .menu-container ul li {
  text-align: right;
  padding: 5px;
}
.menu-bg .menu-container ul li a {
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
  text-transform: uppercase;
  font-size: 30px;
  border-bottom: none;
}
nav {
  position: fixed;
  right: 2em;
  top: 1.5em;
  z-index: 10000;
}
nav a,
nav a:link,
nav a:visited,
nav a:active {
  font-family: FontAwesome;
  font-style: normal;
  border-bottom: none;
  font-size: 2em;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
nav a:before,
nav a:link:before,
nav a:visited:before,
nav a:active:before {
  content: "\f0c9";
}
nav a.menu-active:before,
nav a:link.menu-active:before,
nav a:visited.menu-active:before,
nav a:active.menu-active:before {
  content: "\f00d";
}
nav a:hover {
  opacity: 1;
}
.wrap-pagination {
  margin-top: 50px;
  font-size: 30px;
  text-align: center;
  color: #d7ecff;
}
.wrap-pagination a {
  border-bottom: 0;
  margin: 30px;
}
.wrap-pagination a.disabled,
.wrap-pagination a.disabled:active,
.wrap-pagination a.disabled:visited,
.wrap-pagination a.disabled:link,
.wrap-pagination a.disabled:hover {
  color: #a9b7c6;
  opacity: 0.3;
  text-shadow: none;
  pointer-events: none;
}
footer.footer-content {
  padding-top: 100px;
  width: 100%;
  min-height: 350px;
  background: #0f1516;
  color: #d7ecff;
  border-top: 1px dotted #d7ecff;
  text-align: center;
}
@media (max-width: 33.9em) {
  footer.footer-content {
    min-height: 250px;
    padding-top: 60px;
  }
}
footer.footer-content a,
footer.footer-content a:link,
footer.footer-content a:visited,
footer.footer-content a:active {
  color: #d7ecff;
  text-decoration: none;
  cursor: pointer;
}
footer.footer-content h2 {
  font-family: "Orbitron", "Noto Sans TC", sans-serif;
  padding-bottom: 30px;
  font-size: 1.5em;
}
footer.footer-content ul {
  list-style-type: none;
  padding-left: 0;
}
footer.footer-content .footer-about {
  text-align: left;
}
@media (max-width: 47.9em) {
  footer.footer-content .footer-about h2 {
    text-align: center;
  }
  footer.footer-content .footer-about p {
    text-align: center;
    padding-bottom: 30px;
  }
}
footer.footer-content .footer-social-icons {
  margin: 80px 0 50px 0;
}
@media (max-width: 33.9em) {
  footer.footer-content .footer-social-icons {
    margin: 30px 0 25px 0;
  }
}
footer.footer-content .footer-social-icons li {
  padding: 0 10px;
  line-height: 3em;
}
footer.footer-content .footer-social-icons li .footer-icon-container i {
  font-size: 2em;
}
footer.footer-content .footer-social-icons li a,
footer.footer-content .footer-social-icons li a:link,
footer.footer-content .footer-social-icons li a:visited,
footer.footer-content .footer-social-icons li a:active {
  border-bottom: 0;
}
footer.footer-content .footer-copyright {
  margin: 0 0 40px 0;
  font-size: 0.7em;
}
code {
  color: #a9b7c6;
  background: rgba(144,144,144,0.1);
}
figure.highlight {
  font-family: monospace;
  color: #a9b7c6;
  border-top: 1px solid #d7ecff;
  background: rgba(144,144,144,0.1);
  overflow-y: auto;
  margin: 1.5em 0;
}
figure.highlight figcaption {
  padding-top: 10px;
}
figure.highlight figcaption:before {
  content: "\f016";
  font-family: FontAwesome;
  margin: 0 20px 0 50px;
}
figure.highlight figcaption a {
  margin-left: 10px;
}
figure.highlight table {
  margin: 0 !important;
}
figure.highlight table tbody tr {
  border-top: 0 !important;
  background: none !important;
}
figure.highlight table tbody tr td {
  padding: 8px !important;
  overflow-x: auto !important;
}
figure.highlight table tbody tr td.gutter {
  width: 40px;
  text-align: right;
}
figure.highlight table tbody tr td pre {
  overflow-x: auto !important;
  margin-bottom: 0;
  color: #a9b7c6;
}
figure.highlight table tbody tr td pre .comment,
figure.highlight table tbody tr td pre .template_comment,
figure.highlight table tbody tr td pre .diff .header,
figure.highlight table tbody tr td pre .doctype,
figure.highlight table tbody tr td pre .pi,
figure.highlight table tbody tr td pre .lisp .string,
figure.highlight table tbody tr td pre .javadoc {
  color: #808080;
  font-style: italic;
}
figure.highlight table tbody tr td pre .keyword,
figure.highlight table tbody tr td pre .winutils,
figure.highlight table tbody tr td pre .method,
figure.highlight table tbody tr td pre .addition,
figure.highlight table tbody tr td pre .css .tag,
figure.highlight table tbody tr td pre .request,
figure.highlight table tbody tr td pre .status,
figure.highlight table tbody tr td pre .nginx .title {
  color: #cc7832;
}
figure.highlight table tbody tr td pre .number,
figure.highlight table tbody tr td pre .command,
figure.highlight table tbody tr td pre .tag .value,
figure.highlight table tbody tr td pre .phpdoc,
figure.highlight table tbody tr td pre .tex .formula,
figure.highlight table tbody tr td pre .regexp,
figure.highlight table tbody tr td pre .hexcolor {
  color: #6897bb;
}
figure.highlight table tbody tr td pre .string {
  color: #6a8759;
}
figure.highlight table tbody tr td pre .title,
figure.highlight table tbody tr td pre .localvars,
figure.highlight table tbody tr td pre .chunk,
figure.highlight table tbody tr td pre .decorator,
figure.highlight table tbody tr td pre .built_in,
figure.highlight table tbody tr td pre .identifier,
figure.highlight table tbody tr td pre .vhdl,
figure.highlight table tbody tr td pre .literal,
figure.highlight table tbody tr td pre .id {
  color: #268bd2;
}
figure.highlight table tbody tr td pre .attribute,
figure.highlight table tbody tr td pre .variable,
figure.highlight table tbody tr td pre .lisp .body,
figure.highlight table tbody tr td pre .smalltalk .number,
figure.highlight table tbody tr td pre .constant,
figure.highlight table tbody tr td pre .class .title,
figure.highlight table tbody tr td pre .parent,
figure.highlight table tbody tr td pre .haskell .type {
  color: #6a8759;
}
figure.highlight table tbody tr td pre .preprocessor,
figure.highlight table tbody tr td pre .preprocessor .keyword,
figure.highlight table tbody tr td pre .shebang,
figure.highlight table tbody tr td pre .symbol,
figure.highlight table tbody tr td pre .symbol .string,
figure.highlight table tbody tr td pre .diff .change,
figure.highlight table tbody tr td pre .special,
figure.highlight table tbody tr td pre .attr_selector,
figure.highlight table tbody tr td pre .important,
figure.highlight table tbody tr td pre .subst,
figure.highlight table tbody tr td pre .cdata,
figure.highlight table tbody tr td pre .clojure .title {
  color: #e8bf6a;
}
figure.highlight table tbody tr td pre .deletion {
  color: #dc322f;
}