@charset "utf-8";
/*
theme Name: Litium Home Page
Author: litium
Description: original theme
version： 1.0.0
*/

/* 全体配置の設定 header,footer,contents,sidebar */
.header-inner, .footer-inner, .container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
}

/* コンテナー flex方法はPC・タブレット・スマホで変動 */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* コンテンツ基本設定 */
body {
    font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    color: #585858;
}

p , h1 ,h2, h3{
  width: 100%;
}

img {
  height: auto;
}

img[src$=".svg"] {
  width: 60%;
  height: auto;
}

a {
  text-decoration: none;
}

header, footer{
  background-color: #585858;
}

.wp-video {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

rt {
  text-align: center; /* 文字列のセンタリング */
  color: #a67a21; /* 文字色指定 */
}

/* 広告 */
.kiji .kiji-amazon-ads {
  margin:10px 16px;
  text-align: center;
}

/* サイトタイトル*/
.site-title {
    text-align: center;
  }
  .site-title h1 {
    margin: 0px;
  }
  .site-title h1 a {
    color: #D8D8D8;
}

/* ヘッダーメニュー */
.header-nav ul {
  display:flex;
  list-style: none;
}
.header-nav li a {
  display: block;
  padding: 15px 5px;
  color: #fff;
  font-size: 18px;
  text-align:center;
}

/* コンテンツ */
.contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: baseline; 
  background-color: #fff;
  border-radius: 5px;
  border: solid 2px #D8D8D8;
  padding: 10px;
  text-align: left;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.contents-index {
  width: 100%;
}

.description-text {
  width: 100%;
  margin-bottom: 16px;
}

.description-text h1 {
  font-size: 24px;
  margin: 0;
}

/* パンくずリスト */
.pankuzu {
  display: block;
  width: 100%;
}

.breadcrumb {
  margin-left:0;
  margin-bottom:10px;
  padding: 0;
}

.breadcrumb ul{
  display: flex;
  list-style: none;
  padding:0;
}

.breadcrumb li{
  display: inline;
}

.breadcrumb li:after{
    font-family: "Font Awesome 5 Free";
    content: '\f101';
    font-weight: 600;
    padding: 0 5px;
    margin: 0 5px;
    font-size: 16px;
    color: #8186a0;
  }
  .breadcrumb li:last-child:after{
    content: '';
  }
  .breadcrumb li a {
      color: #273376;
      font-size: 16px;
  }
  .breadcrumb li:first-child a:before{
    font-family: "Font Awesome 5 Free";
    content: '\f015';
    font-weight: 600;
    font-size: 16px;
    margin: 0 5px 0 0;
  }
  .breadcrumb li a:hover {
      text-decoration-color: #A9BCF5;
}

/* フッターメニュー */
  .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .footer-nav li {
    width: 50%;
    text-align: center;
  }
  .footer-nav li a {
    display: block;
    padding: 15px 0;
    font-size: 18px;
    color: #fff;
  }
  .footer-nav li a:hover {
    opacity: .6;
  }
  /*コピーライト*/
  #copyright p {
    font-size: 14px;
    margin: 0;
    padding: 5px 0;
    text-align: center;
    color: #fff;
    }
  #copyright p a {
    color: #fff;
  }
  #copyright p a:hover {
    opacity: .6;
  }

/* フロントページ */
.page h1 {
  font-size: 24px;
  margin: 0;
  }

/* 記事リスト */
.get-posts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.kiji-space {
    background-color: #fff;
    position: relative;
    border-left: solid 6px #A9BCF5;
    border-top: solid 1px #E6E6E6;
    border-right: solid 1px #E6E6E6;
    border-bottom: solid 1px #E6E6E6;
    margin-bottom: 15px;
    }
    .kiji-space a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .kiji-list {
      padding: 10px;
    }
    .kiji-list img {
      float: left;
    }
    .kiji-list h2 {
      color: #6E6E6E;
      line-height: 1.2;
      margin: 0;
      font-size: 16px;
    }
    .kiji-list h3 {
      color: #6E6E6E;
      line-height: 1.2;
      margin-top: 0;
      margin-bottom: 5px;
      font-size: 16px;
        }
    .kiji-list .text {
      width: auto;
    }
    .kiji-list-date {
      position: absolute;
      font-size: 14px;
      color: #666;
      right: 10px;
      bottom: 3px;
    }
    .kiji-list p {
      font-size: 10px;
      margin: 10px 0 0;
    }
.page .kiji-list h3 {
  margin: 0;
  font-size: 14px;
}

/* 投稿内容 */
.kiji {
  font-size: 16px;
  top: 0;
  }
.kiji-info {
  text-align: right;
}
.kiji-tags {
  display: flex;
  flex-wrap : wrap;
  flex-direction :row;
}
.kiji-tags li {
  list-style: none;
  border-radius: 5px;
  background-color: #E6E6E6;
  margin: 20px 16px 20px 0;
}
.kiji-tags li a {
  padding: 5px 10px;
  color: #585858;
  font-size: 12px;
  font-weight: bold;
}
.kiji-tags li a:hover {
  color: #5C8EF0;
}
.kiji-date {
  font-weight: bold;
}
.kiji-img {
  /*width: 100%;*/
  margin: 0;
  padding-top: 15px;
  text-align: center;
}
.kiji-text {
  margin-top: 0;
  margin-bottom: 10px;
  text-align: left;
  /* white-space: pre-line; */
}

.kiji h1 {
  font-size: 24px;
  margin: 0 0 16px 0;
}
.kiji h2 {
  font-size: 20px;
  margin:60px 0 30px 0;
  padding: 10px 0 10px 10px;
  border-left: solid 5px #A9BCF5;
}
.kiji h3 {
  font-size: 16px;
  margin: 50px 0 20px 0;
  padding: 0;
}
.kiji ul {
  padding: 0 0 0 40px;
  margin-left: 16px;
  margin-right: 16px;
}
.kiji ol {
  padding: 0 0 0 40px;
  margin-left: 16px;
  margin-right: 16px;
}
.kiji a {
  color: #04B4AE;
}

/* ページネーション */
.pagination {
  margin: 40px 0 30px;
  text-align: center;
}
.pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination li {
  display: inline-block;
  width: auto;
}
.pagination li a, .pagination li > span {
  font-size: .9em;
  display: block;
  width: 30px;
  margin: 0 1px;
  padding: 5px 0;
  color: #000;
  border: solid 1px #ccc;
  border-radius: 3px;
}
.pagination li > span {
  color: #fff;
  background-color: #464646;
}
.pagination li a:hover {
  color: #fff;
  background-color: #464646;
}
.pagination li .dots {
  width: 15px;
  padding: 0;
  color: #000;
  border-color: transparent;
  background-color: transparent;
}

/* サイドバー */
.sidebar-wrapper {
  background-color: #fff;
  margin: 0 0 25px 0;
}
.sidebar-wrapper h4 {
  text-align: left;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 5px 20px;
  color: #fff;
  background-color: #A9BCF5;
}

/*検索*/
.screen-reader-text{
  display:none;
}

/* カテゴリ */
.widget_categories ul {
  padding: 0;
  list-style: none;
}
.widget_categories li {
  margin: 2px;
  padding: 5px 10px;
  font-size: 15px;
}
.widget_categories li a {
  color: #585858;
  font-weight: bold;
}
.widget_categories li a:hover{
  color: #5C8EF0;
}
/* プロフィール */
.textwidget p {
  margin: 0;
}
/* 直近の投稿 */
#recent-posts-2 ul {
  list-style: none;
  padding: 0;
}
#recent-posts-2 li {
  margin:10px 0;
}
#recent-posts-2 a {
  color: #585858;
  font-size: 12px;
}
.post-date {
  color: #585858;
  font-size: 12px;
}
#recent-posts-2 a:hover {
  color: #5C8EF0;
}
/* アーカイブ */
.widget_archive ul {
  padding: 0;
  list-style: none;
}
.widget_archive li {
  margin: 2px;
  padding: 5px 10px;
  font-size: 15px;
}
.widget_archive li a {
  color: #585858;
  font-weight: bold;
}
.widget_archive li a:hover{
  color: #5C8EF0;
}

/* タグ */
.tagcloud {
  display: flex;
  flex-wrap : wrap;
}
.tagcloud a {
  font-size: 10px!important;
  color: #585858;
  margin: 6px 4px;
  font-weight: bold;
}
.tagcloud a:hover{
  color: #5C8EF0;
}

/* Add Quick Tags */
.pink {
  color: #FA58D0;
}
.line-pink {
    background: linear-gradient(transparent 50%, #F6CEEC 50%);
  }
.blue {
  color: #2E64FE;
}
.skyblue {
  color: skyblue;
}
.line-skyblue {
  background: linear-gradient(transparent 50%, #E0F2F7 50%);
}
.yellow {
  color:yellow;
}
.line-yellow {
  background: linear-gradient(transparent 50%, #FEFDBD 50%);
}
.gray {
  color:gray;
}
.green {
  color: #04B4AE;
}
.muscat {
  color: #ACFA58;
}
.red {
  color: red;
}
.orange {
  color: orange;
}
.th {
font-weight: normal;
}
blockquote {
    position: relative;
    padding: 10px 10px 10px 65px;
    margin: 20px 16px;
    font-size: 13px;
    box-sizing: border-box;
    /* font-style: italic; */
    /* color: #464646; */
    background: #fff4db;
}
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 15px;
    width: 36px;
    /* height: 24px; */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    vertical-align: middle;
    text-align: center;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    color: #FFF;
    font-size: 15px;
    line-height: 36px;
    background: #ffd596;
    border-radius: 50%;
    font-weight: 900;
}/*
blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}
blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}*/
.ads-size {
  height: auto;
  text-align: left;
}
pre, code {
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 13px;
}
.code-line, .code-scroll{
  color: #F2F2F2;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.6;
  background-color:#0B2F3A;
  white-space: pre;
}
.code-file-line, .code-file-scroll {
  position:relative;
  font-size: 13px;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  border-radius: 3px;
  line-height: 1.6;
  background-color: #E6E6E6;
  white-space: pre;
}
.code-file-name {
  display: block;
  border-top-left-radius: 3px;
  position: absolute;
  font-size: 13px;
  font-style: italic;
  top: 0;
  left: 0;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #E6E6E6;
  border-bottom: solid;
  border-width: 2px;
  border-color: #A4A4A4;
}
.code-directory {
  color: #F2F2F2;
  border-radius: 3px;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 13px;
  line-height: 1.6;
  background-color:#1C1C1C;
  white-space: pre;
}
table {
  border-collapse: collapse;
  margin: 0;
}
table th ,table td {
  border:solid 1px #D8D8D8;
  padding: 5px;
  font-size: 14px;
}

/*全体*/
.hidden_box {
    display: flex;
    align-items:center;
    flex-direction: row-reverse;
    margin: 0 1em;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 10px 10px;
    font-weight: bold;
    border: solid 2px #efefef;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: auto;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 0;
    height: auto;
    opacity: 1;
}

/*twitter facebook のボタン*/
.social_button {
  margin : 10px 0 0 0;
  display:flex;
}
.twitter_button{
  margin-right:15px;
}

/* スマホ用のメニューボタン */
.header-inner {
  position: relative;
}
#navbutton {
  position: absolute;
  top: 50%;
  right: 10px;
  padding: 8px 12px;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 1px #aaa;
  border-radius: 5px;
  background-color: #fff;
}
#navbutton:hover {
  background-color: #ddd;
}
#navbutton:focus {
  outline: none;
}
#navbutton i {
  font-size: 2em;
  color: #585858;
}

/* パソコン用画面（大） */
@media (min-width: 1124px) {

  .container {
  justify-content: flex-start;
  width: 1112px;
  }

  .site-title h1 {
    font-size: 28px;
    padding: 10px 0;
  }

  .header-nav {
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 10px;
  }
  .header-nav ul {
    justify-content: center;
    padding: 0;
    margin: 0;
  }
  .header-nav li {
    width: 100px;
    margin: 0 10px;
  }
  .header-nav li a {
    font-size: 18px;
    padding: 0;
    border-bottom: solid 1px #585858;
    transition: border 0.5s;
  }
  .header-nav li a:hover {
    border-bottom: solid 1px #fff;
  }
  #navbutton {
    display: none;
}
/* PC版フッター */
.footer-inner {
  padding-top: 5px;
  }
  .footer-nav li {
    width: 80px;
    margin: 0 10px;
  }
/* PC版コンテンツ */
.contents {
  width: 830px;
  margin-right: 12px;
}
/* PC版サイドバー */
#sidebar {
  width: 240px;
  }
/* 記事リスト */
.kiji-space {
    box-sizing: border-box;
    height: 100px;
    width: 395px;
}
.kiji-space:hover{
  box-shadow: 0 4px #BDBDBD;
  transform: translateY(2px);
}
  .kiji-list img {
    width: 80px;
    height: 80px;
  }
  .kiji-list .text {
    margin-left: 100px;
}

/* 記事 h2 */
.kiji h2 {
  width: auto;
}

/* 記事 code */
.code-scroll, .code-line, .code-file-line, .code-file-scroll, .code-directory {
  width: 785px;
  padding: 10px;
}
.code-scroll, .code-file-scroll {
  overflow-x: scroll;
}
pre {
  width: 806px;
  margin: 0;
}

code {
  width: 793px;
  margin: 0;
}

}

/* パソコン画面（小） */
@media (min-width: 850px) and (max-width: 1124px)  {
  .header-inner, .container {
    width: 830px;
  }
  /* Pタブレット用コンテンツ */
  .contents {
    width: 100%;
    }

  .site-title h1 {
    font-size: 28px;
    padding: 10px 0;
  }

  /* タブレット用ヘッタ―ナビ*/
  .header-nav {
      margin-right: auto;
      margin-left: auto;
      padding-bottom: 10px;
    }
    .header-nav ul {
      justify-content: center;
      padding: 0;
      margin: 0;
    }
    .header-nav li {
      width: 100px;
      margin: 0 10px;
    }
    .header-nav li a {
      font-size: 18px;
      padding: 0;
      border-bottom: solid 1px #585858;
      transition: border 0.5s;
    }
    .header-nav li a:hover {
      border-bottom: solid 1px #fff;
    }
    #navbutton {
      display: none;
  }
  /* タブレット用フッター */
  .footer-inner {
    padding-top: 5px;
    }
    .footer-nav li {
      width: 80px;
      margin: 0 10px;
    }
  /* タブレット用サイドバー */
  #sidebar {
    width: 100%;
  }
  .sidebar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .sidebar-wrapper {
    /* width: 49%; */
    width: 100%;
  }
  
  /* 記事リスト */
  .kiji-space {
    box-sizing: border-box;
    height: 100px;
    width: 395px;
  }
  .kiji-space:hover{
  box-shadow: 0 4px #BDBDBD;
  transform: translateY(2px);
  }
  .kiji-list img {
    width: 80px;
    height: 80px;
  }
  .kiji-list .text {
    margin-left: 100px;
  }
  
  /* タブレット用記事 */
  .kiji {
    padding: 0 0 40px 0;
  }
  
  /* 記事 h2 */
  .kiji h2 {
    width: 540px;
  }
  
  /* 記事 code */
  .code-scroll, .code-line, .code-file-line, .code-file-scroll, .code-directory {
    width: 785px;
    padding: 10px;
  }
  .code-scroll, .code-file-scroll {
    overflow-x: scroll;
  }
  pre {
    width: 806px;
    margin: 0;
  }

  code {
    width: 793px;
    margin: 0;
  }
  
}

/* タブレット用画面 */
@media (min-width: 600px) and (max-width: 850px)  {
.header-inner, .container {
  width: 600px;
}
/* Pタブレット用コンテンツ */
.contents {
  width: 100%;
  }
/* サイトタイトル*/
.site-title h1 {
  padding: 15px 0;
}

/* タブレット用ヘッタ―ナビ*/
.header-nav {
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 10px;
  }
  .header-nav ul {
    justify-content: center;
    padding: 0;
    margin: 0;
  }
  .header-nav li {
    width: auto;
    margin: 0 10px;
  }
  .header-nav li a {
    font-size: 18px;
    padding: 0;
    border-bottom: solid 1px #585858;
    transition: border 0.5s;
  }
  .header-nav li a:hover {
    border-bottom: solid 1px #fff;
  }
  #navbutton {
    display: none;
}
/* タブレット用フッター */
.footer-inner {
  padding-top: 5px;
  }
  .footer-nav li {
    width: 80px;
    margin: 0 10px;
  }
/* タブレット用サイドバー */
#sidebar {
  width: 100%;
}
.sidebar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.sidebar-wrapper {
  /* width: 49%; */
  width: 100%;
}

/* タブレット用記事リスト */
.kiji-space {
    box-sizing: border-box;
    height: 100px;
    width: 280px;
    margin: 10px 0px;
  }
  .kiji-space:hover{
    box-shadow: 0 4px #BDBDBD;
    transform: translateY(2px);
  }
  .kiji-list img {
    width: 80px;
    height: 80px;
  }
  .kiji-list .text {
    margin-left: 85px;
  }
  .kiji-list .text h2 {
    margin: 0;
    font-size: 14px;
  }

  /* タブレット用記事 */
.kiji {
  padding: 0 0 40px 0;
}

/* 記事 h2 */
.kiji h2 {
  width: 540px;
}

/* 記事 code */
.code-scroll, .code-line, .code-file-line, .code-file-scroll, .code-directory {
  width: 556px;
  padding: 10px;
  overflow-x: scroll;
}
pre {
  width: 576px;
  margin: 0;
}
code {
  width: 563px;
  margin: 0;
}

}

/* スマートフォン用画面（大） */
@media  (min-width: 480px) and (max-width: 600px) {
.header-inner, .container {
  width: 480px;
}
/* スマートフォン用コンテンツ */
.contents {
  width: 100%;
}
/* スマホヘッダー */
#header-nav {
  display: none;
  }
  .header-nav {
    max-width: 100%;
    border-top: solid 1px #ddd;
    box-sizing: border-box;
  }
  .header-nav ul {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }
  .header-nav li {
    display: inline-block;
    text-align: center;
    width: 30%;
  }
  .header-nav li a {
    font-size: 1em;
  }
  .header-nav li a:hover {
    opacity: .6;
  }
/* スマホ[hi]タイトル */
.site-title {
  text-align: left;
}
.site-title h1 {
  padding: 16px 0;
}
.site-title h1 a {
  font-size: 20px;
  color: #D8D8D8;
}

/* スマホ用サイドバー */
#sidebar {
    width: 100%;
  }
  .sidebar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .sidebar-wrapper {
    width: 100%;
  }

  /* スマホ用記事リスト */
  .get-posts {
    width: 100%;
  }
  .kiji-space {
      box-sizing: border-box;
      width: 100%;
      height: 90px;
      margin-bottom: 8px;
    }
    .kiji-list img {
      width: 64px;
      height: 64px;
    }
    .kiji-list .text {
      margin-left: 70px;
    }
/* スマホフッター */
.footer-nav li a {
  padding: 10px 5px;
}

/* 記事 h2 */
.kiji h2 {
  width: 420px;
}
/* 記事 code */
.code-scroll, .code-line, .code-file-line, .code-file-scroll, .code-directory {
  width: 436px;
  padding: 10px;
  overflow-x: scroll;
}
pre {
  width: 456px;
  margin: 0;
}
code {
  width: 443px;
  margin: 0;
}


}


/* スマートフォン用画面（小） */
@media (max-width: 480px) {
/* スマホ（小）コンテナー padding */
.header-inner, .container  {
  padding: 1%;
}
.container {
  justify-content: space-around;
}
.contents {
  width: 100%;
  border: none;
}
.kiji-text {
  width: 350px;
}

/* スマホ（小）パンくず */
.breadcrumb {
  margin:10px 0;
}
/* スマホ（小）ヘッダー */
#header-nav {
  display: none;
  }
  .header-nav {
    max-width: 100%;
    border-top: solid 1px #ddd;
    box-sizing: border-box;
  }
  .header-nav ul {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }
  .header-nav li {
    display: inline-block;
    text-align: center;
    width: 30%;
  }
  .header-nav li a {
    font-size: 1em;
  }
  .header-nav li a:hover {
    opacity: .6;
  }
/* スマホ（小）タイトル */
.site-title {
    text-align: left;
    margin: 10px 16px;
  }
  .site-title h1 a {
    font-size: 16px;
    color: #D8D8D8;
  }

  /* 記事 h2 */
  .kiji h2 {
    width: 95%;
  }
/* スマホ（小）用サイドバー */
#sidebar {
    width: 100%;
  }
  .sidebar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .sidebar-wrapper {
    width: 100%;
  }
#text-2 {
  display: none;
}
  /* スマホ（小）記事リスト */
  .get-posts {
    width: 100%;
  }
  .kiji-space {
      box-sizing: border-box;
      width: 98%;
      height: 90px;
      margin: 1% 1%;
    }
    .kiji-list img {
      width: 50px;
      height: 50px;
    }
    .kiji-list .text {
      margin-left: 65px;
    }
/* スマホ（小）フッター */
.footer-nav li a {
  padding: 10px 5px;
}

/* 記事 code */
.code-scroll, .code-line, .code-file-line, .code-file-scroll, .code-directory {
  width: 90%;
  padding: 5%;
  overflow-x: scroll;
}

pre {
  width: 100%;
  margin: 0;
}
code {
  width: 96%;
  margin: 0;
}

}