* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 48em) {
  :root {
    font-size: calc(1rem + ((1vw - 0.48rem) * 0.6944));
    min-height: 0vw;
  }
}
@media (min-width: 120em) {
  :root {
    font-size: 1.5rem;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}
body {
  color: #333;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  line-height: 1.45;
  background-color: #343f44;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.172L6.172 0h5.656L0 11.828V6.172zm40 5.656L28.172 0h5.656L40 6.172v5.656zM6.172 12l12-12h3.656l12 12h-5.656L20 3.828 11.828 12H6.172zm12 0L20 10.172 21.828 12h-3.656z' fill='%23f8fafc' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}
a, a:visited { color: #ba3925; }
rt { font-size: 0.2rem; }

/**
 * Page Frame
 */
.page-outer { border: 0.15rem solid #343f44; }
@supports (display: grid) {
  .page-outer {
    border-color: #343f44;
    border-width: 0.5rem 0;
  }
  @media (min-height: 24em) {
    .page-outer {
      border-width: 0;
      padding-top: 0.5rem;
    }
    .page-outer:before,
    .page-outer:after {
      background-color: #343f44;
      content: "";
      height: 5px;
      height: 0.5em;
      left: 0;
      z-index: 10;
    }
    .page-outer:before {
      position: fixed;
      right: 0;
      top: 0;
    }
    .page-outer:after {
      bottom: -1px;
      display: block;
      position: -webkit-sticky;
      position: sticky;
      width: 100%
    }
  }
  @media (min-height: 24em) and (min-width: 30em) {
    .page-outer {
        border-width: 0 0.5em
    }
  }
}

/**
 * Main Header
 */
#header {
  margin: 1rem 0;
  padding: 0 2rem;
}
#header .content {
  width: 65rem;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}
#header h1 {
  flex-grow:1;
  margin:1.15rem 0 0 2rem;
  letter-spacing:0.2rem;
  color:#fff;
  font-size:0.8rem;
  font-family:Roboto, sans-serif;
  text-transform:uppercase;
}
#header img {
  margin-top:10px;
  background-color:#fff;
  width:50px;
  height:50px;
  padding:3px;
  flex-grow:1;
  border-radius:5px;
}
#header nav {
  flex-grow:3;
  text-align:right;
  margin-top:1rem;
}

/**
 * Main Footer
 */
#footer {  color:#efefef; }
#footer .content {
  width:65em;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
}
#footer p {
  padding-top:1.5em;
  font-size:0.75em;
}
#footer nav { margin-top:1.6em; }
#footer nav ul { text-align:right; }
#footer nav li,
#footer nav li a {
  color:#efefef;
}
#footer nav li a { text-decoration:none; }
#footer nav li a:hover { color:#ba3925; }
#footer img {
  margin:1em 0;
  width:50px;
  height:50px;
  background-color:#fff;
  padding:3px;
  border-radius:5px;
}

/**
 * Main Content
 */
#content { background-color:#fff; }

/**
 * Homepage
 */
#main footer {
  border-top:2px solid #eee;
  margin:0 !important;
  padding:0 !important;
}
#main footer nav {
  display:flex;
  justify-content:center;
}
#main footer nav a {
  flex-basis: 100%;
  padding:2em 2em;
  text-decoration:none;
}
#main footer nav a:hover {
  background-color:#f8f8f8;
}
#main footer nav a:first-child {
  text-align:right;
  border-right:2px solid #eee;
}
#main footer .prev-text,
#main footer .next-text {
  display:block;
  font-size:0.8em;
  font-weight:bold;
  color:#333;
}
#main footer .arrow {
  font-size:5em;
  line-height:1em;
}

/**
 * Post Content List
 */
#posts {
  width:65em;
  margin:2em auto;
}
.archive-post {
  width:45em;
  margin:2em auto;
}
.collection-title {
  width:45em;
  margin:2em auto;
}
h2.archive-year {
  font-size: 1.6em;
  font-family: Roboto, sans-serif;
  width: 28em;
  margin:0 auto 1em;
}
nav ul {
  margin:0 0;
  padding:0px;
}
nav li {
  display:inline;
  font-family:Roboto, sans-serif;
  text-transform:uppercase;
  font-size:0.8em;
  font-weight:bold;
  list-style: none;
  margin-right: 1em;
  letter-spacing:2px;
  color:#fff;
}
nav li.active {
  border-bottom:3px solid #fecd35;
}
nav li a {
  color: #fff;
  text-decoration:none;
}
nav li a:hover {
  color: #fecd35;
  text-decoration:none;
}

/**
 * Post: Regular
 */
article.post header,
#archive header {
  text-align:center;
  margin:-0.5em auto 2em;
  background-color:#edf4f8;
}
article.post h2,
#archive h2.page-heading {
  margin:0 auto !important;
  padding-top:1.333em;
  padding-bottom:1.333em;
  font-family:Roboto, sans-serif;
  font-size:2em;
}
#archive p.desc {
  width:45em;
  margin:0 auto !important;
}
.archive-post-time {
  margin-right:1em;
  margin-bottom:4em;
  color:#fff;
  background-color:#394146;
  border-radius:0.25em;
  padding:0.15em 0.8em;
  font-size:0.85em;
  font-family:Roboto, sans-serif;
}

/**
 * Post: Musings
 */
article.post-musings header {
  margin:2em 0;
  background:none !important;
}
article.post-musings h2 {
  padding:0em !important;
}
article.post-musings .post-meta { text-align:center; }
article.post-musings .post-category {
  margin:3em auto 0;
  text-align:center;
  text-transform:uppercase;
  font-weight:bold;
  font-size:0.8em;
  font-family:Roboto, sans-serif;
}
article.post-musings .post-date {
  text-align:center;
  color:#666;
  font-size:0.8em;
  margin-bottom:2em;
}
article.post-musings > header { text-align:center; }
article.post-musings footer {
  border-top:2px solid #eee;
  margin:0 !important;
  padding:0 !important;
}
article.post-musings footer nav {
  display:flex;
  justify-content:center;
}
article.post-musings footer nav a {
  flex-basis: 100%;
  padding:2em 2em;
  text-decoration:none;
  border-bottom:0.25rem solid #343f44;
}
article.post-musings footer nav a:hover {
  background-color:#f8f8f8;
  border-bottom:0.25rem solid #fecd35;
}
article.post-musings footer nav a:first-child {
  text-align:right;
  border-right:2px solid #eee;
}
article.post-musings footer .desc {
  display:block;
  font-size:0.8em;
  font-weight:bold;
  color:#333;
}
article.post-musings footer .arrow {
  font-size:5em;
  line-height:1em;
}
article.post-musings footer .post-title {
  text-align:center;
  padding-bottom:2em;
}

/**
 * Post Content
 */
.post-content a,
.post-content a:visited {
  color: #ba3925;
}
.post-content p,
.post-content ul,
.post-content ol,
.post-content table {
  width: 35em;
  margin:0 auto 2em;
}
.post-content p {
  margin-bottom: 1.3em;
}
.post-content pre {
  margin-top:-1em;
  background-color:#eee;
}
.post-content pre > code {
  display:block;
  width:50%;
  margin:0 auto;
  padding:2em 0;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  margin: 1.414em 0 0.5em;
  font-weight: inherit;
  line-height: 1.2;
}
.post-content h2 {
  font-size: 2.369em;
}
.post-content h3 {
  font-size: 1.6em;
  font-family: Roboto, sans-serif;
  width: 28em;
  margin:0 auto 1em;
  color:#ba3925;
}
.post-content h4 {
  font-size:1.333em;
  font-family:Roboto, sans-serif;
  width:29em;
  margin:0 auto 1em;
  border-left:5px solid #ba3925;
  padding-left:1em;
}
.post-content h5 {
  font-size:1em;
  font-family:Roboto, sans-serif;
  width:35em;
  margin:0 auto 1em;
}

ul.post-categories {
  display: inline;
  list-style: none;
  margin:3em 0 0;
  padding:0;
}
ul.post-categories li {
  display: inline;
  text-transform:uppercase;
  font-weight:bold;
  font-size:0.8em;
  font-family:Roboto, sans-serif;
}
ul.post-categories a { text-decoration:none; }
ul.post-categories a:visited { color:#ba3925 !important; }
ul.post-categories a:hover { text-decoration:underline; }
ul.post-categories li:after { content: " · "; }
ul.post-categories li:last-child:after { content: ""; }

/**
 * Post Summary
 */
article.post-summary { margin-bottom:2em; }
article.post-summary > header {
  margin-bottom:2em;
  background:0 none;
}
article.post-summary > header > h2 { font-size:1.2em; }

/**
 * Images
 */
.fullSized {
  width:50em;
  margin: 0 auto 1.5em;
}
.fullSized img, .centered img {
  display: block;
  border-radius: 10px;
  max-width: 100%;
}
figure.centered { margin-bottom: 1.5em; }
.centered img { margin:0 auto; }
figure.framed img { border:0.5em solid #eee; }

/**
 * Series: Daiya no Ace
 */
.series-daiya-no-ace-act-ii table,
.series-daiya-no-ace-act-ii th,
.series-daiya-no-ace-act-ii td {
  border:3px solid #ddd;
  border-collapse: collapse;
  font-family: Roboto, sans-serif;
}
.series-daiya-no-ace-act-ii th { background-color:#eee; }
.series-daiya-no-ace-act-ii td { text-align:center; }
.series-daiya-no-ace-act-ii small {
  line-height:1.35em;
  display:block;
  padding:0.8em;
  background-color:#efefef;
  font-family: Roboto, sans-serif;
  border-radius: 10px;
  text-align:center;
}