/* Color variables */
:root {
  --light-grey: #F8F8F8;
  --grey: #868686;
  --dark-grey: #616061;
  --soft-grey: #DDDDDD;
  --blue: #1264A3;
  --green: #00B073;
  --light-blue: #B8D1E3;
  --white: #FFFFFF;
  --black: #1D1C1D;
}

html, body {
  background-color: var(--white);
  font-family: 'Noto Sans JP', 'Slack-Lato', sans-serif;
  font-size: 100%;
}

.content {
  grid-area: content;
}

span.beta {
  background-color: #E8F5FA;
  color: #1264A3;
  padding: 4px 9px;
  margin-right: 2px;
  border-radius: 16px;
  border: 1px solid #D4ECF6;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.7em;
}

/* Sidebar */
.panel {
  position: fixed;
  width: 20%;
  height: 100%;
  overflow: auto;
  top: 0;
  left: 0;
  background-color: var(--light-grey);
}

.panel .sidebar-content {
  width: 75%;
  margin: 30px auto 20px auto;
}

.panel .sidebar-content .logo {
  padding-top: 1.15em;
  position: relative;
}

.panel .sidebar-content .logo .icon img {
  width: 2.15em;
  margin-right: 6px;
}

.panel .sidebar-content .logo .name {
  font-weight: 800;
  font-size: 2em;
  vertical-align: bottom;
}

.panel .sidebar-content .logo .version {
  line-height: 1em;
  vertical-align: bottom;
}

.panel .sidebar-content .logo .version a {
  color: var(--dark-grey);
  background-color: var(--soft-grey);
  font-size: 0.5em;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  margin-left: 10px;
  
}

.panel .sidebar-content ul.sidebar-section {
  list-style: none;
  list-style-position: inside;
  padding-top: 0.9em;
  margin: 0 0 0 -0.5em;
  font-size: 0.95em;
}

.panel .sidebar-content ul.sidebar-section li {
  border-radius: 8px;
  padding: 2px 0 2px 8px;
  margin: 0.1em 0;
  color: var(--black);
}

.panel .sidebar-content ul.sidebar-section li:hover {
  background-color: #D7D7D7;
}

.panel .sidebar-content ul.sidebar-section li.madeby:hover {
  background-color: transparent;
}

.panel .sidebar-content a:hover {
  text-decoration: none;
}

.panel .sidebar-content ul.sidebar-section li.active {
  background-color: var(--blue);
  color: var(--white);
}

.panel .sidebar-content ul.sidebar-section li.title {
  font-weight: 600;
}

/* Main page */
.header {
  width: 95%;
  margin: 0 auto 0.8em auto;
  height: 5em;
  padding-top: 1.5em;
}

.header a:hover {
  text-decoration: none;
}

.header a.language-switcher {
  color: var(--grey);
  font-weight: 700;
  padding: 6px 14px 9px;
  font-size 0.9em;
}

.header a.language-switcher:hover {
  color: var(--black);
}

.wrapper {
  width: 100%;
  margin: 0 auto;
}

/* Main page content */
.section-wrapper {
  width: 90%;
  margin: 0 auto 30px auto;
  display: grid;
  grid-gap: 20px;
  grid-template-areas: 
    "head"
    "body"
    "code"
    "secondary"
    "divider"
}

.tutorial-nav {
  width: 20%;
  position: fixed;
}

.tutorial-nav ul {
  margin-left: 3em;
  padding-left: 1em;
  border-width: 4px;
  border-left-style: solid;
  border-color: #F2F2F2;
  border-image: linear-gradient(
    to bottom, 
    #FFFFFF 0%, 
    #F2F2F2 6% 92%,
    #FFFFFF 100%
  ) 1 100%;
  list-style: none;
  padding-top: 1.5em;
}

.circle {
  background: #ddd;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  float: left;
  margin: 5px 0 0 -1.6em;
}

.completed {
  background: #53b3e1;
}

.tutorial-nav ul li {
  padding-bottom: 2.5em;
}

.tutorial-nav a {
  font-weight: 700;
  font-size: 0.9em;
  color: #757575;
}

.tutorial-nav a:hover {
  color: #000;
  text-decoration: none;
}

.tutorial {
  width: 55%;
  margin: 1em 0 0 33%;
  padding-bottom: 2em;
}

.tutorial img {
  width: 85%;
  margin: 0.2em auto;
  display: block;
  box-shadow: 0 0 15px #DDDDDD;
}

.tutorial blockquote {
  margin: 0 0 0 1em;
  padding: 0 6em 0 2em;
  border-radius: 6px;
  border-left: 6px solid #DDD;
  font-size: 1em;
}

.tutorial h3 {
  padding-bottom: 1em;
}

.content .section-wrapper .highlighter-rouge {
  grid-area: code;
}

pre {
  background-color: var(--light-grey) !important;
  background-image: none;
  padding: 1.2em;
  border: 1px solid #DDDDDD;
}

pre code pre {
  padding: 0;
  font-size: 0.9em;
  line-height: 2.2em;
}

pre code span {
  padding: 0;
  margin: 0;
  height: 0;
}

table, pre tbody, pre tbody td, pre tbody td pre {
  padding: 0;
  border: 0;
  margin: 0;
  text-align: left;
}

pre tbody td.gl pre {
  color: #999988;
  padding-right: 1.6em;
  user-select: none;
}

.content .section-wrapper .section-content {
  grid-area: body;
}

.content .section-wrapper, .tutorial {
  font-size: 1.15em;
  line-height: 1.9em;
}

.content .section-wrapper h3 {
  grid-area: head;
  font-size: 1.45em;
  font-weight: 600;
}

.content .section-wrapper hr {
  grid-area: divider;
  height: 1px;
  border-top: 1px solid #DDD;
  width: 100%;
}

a:hover {
  text-decoration: underline;
}

/* Secondary content */
.secondary-wrapper {
  width: 100%;
  grid-area: secondary;
  margin: 0.6em auto 0 auto;
}

.secondary-wrapper div.highlighter-rouge {
  width: 50%;
  float: left;
  margin-top: 1em;
}

.content .section-wrapper .secondary-content {
  width: 45%;
  float: left;
  margin-right: 5%;
  margin-top: 1em;
}

.content .section-wrapper .secondary-content div.highlighter-rouge {
  width: 100%;
}

summary h4 {
  display: inline;
}

/* Responsive */
@media (min-width: 1024px) {
  .tutorial-nav ul {
    margin-left: 5em;
  }
}

@media (min-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-columns: 20% 75%;
    grid-template-areas:
      "sidebar content"
  }

  .section-wrapper {
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "head head"
      "body code"
      "secondary secondary"
      "divider divider"
  }
}

@media (max-width: 768px) {
  .panel {
    display: none;
  }

  .language-switcher {
    display: none;
  }

  .tutorial-nav {
    display: none;
  }

  .tutorial {
    width: 85%;
    margin: 1em auto;
  }

  .wrapper {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
      "content"
  }

  .section-wrapper {
    grid-template-columns: 100%;
    grid-template-areas:
      "head"
      "body"
      "code"
      "secondary"
      "divider"
  }
}


/*
 * Github theme stylesheet from: http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html
 */
 .highlight .hll { background-color: #ffffcc }
 .highlight .c { color: #999988; } /* Comment */
 .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 .highlight .k { color: #000000; font-weight: bold } /* Keyword */
 .highlight .o { color: #000000; font-weight: bold } /* Operator */
 .highlight .cm { color: #999988; } /* Comment.Multiline */
 .highlight .cp { color: #999999; font-weight: bold; } /* Comment.Preproc */
 .highlight .c1 { color: #999988; } /* Comment.Single */
 .highlight .cs { color: #999999; font-weight: bold; } /* Comment.Special */
 .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
 .highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
 .highlight .gr { color: #aa0000 } /* Generic.Error */
 .highlight .gh { color: #999999 } /* Generic.Heading */
 .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
 .highlight .go { color: #888888 } /* Generic.Output */
 .highlight .gp { color: #555555 } /* Generic.Prompt */
 .highlight .gs { font-weight: bold } /* Generic.Strong */
 .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
 .highlight .gt { color: #aa0000 } /* Generic.Traceback */
 .highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
 .highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
 .highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
 .highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
 .highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
 .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
 .highlight .m { color: #009999 } /* Literal.Number */
 .highlight .s { color: #d01040 } /* Literal.String */
 .highlight .na { color: #008080 } /* Name.Attribute */
 .highlight .nb { color: #0086B3 } /* Name.Builtin */
 .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
 .highlight .no { color: #008080 } /* Name.Constant */
 .highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
 .highlight .ni { color: #800080 } /* Name.Entity */
 .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
 .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
 .highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
 .highlight .nn { color: #555555 } /* Name.Namespace */
 .highlight .nt { color: #000080 } /* Name.Tag */
 .highlight .nv { color: #008080 } /* Name.Variable */
 .highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
 .highlight .w { color: #bbbbbb } /* Text.Whitespace */
 .highlight .mf { color: #009999 } /* Literal.Number.Float */
 .highlight .mh { color: #009999 } /* Literal.Number.Hex */
 .highlight .mi { color: #009999 } /* Literal.Number.Integer */
 .highlight .mo { color: #009999 } /* Literal.Number.Oct */
 .highlight .sb { color: #d01040 } /* Literal.String.Backtick */
 .highlight .sc { color: #d01040 } /* Literal.String.Char */
 .highlight .sd { color: #d01040 } /* Literal.String.Doc */
 .highlight .s2 { color: #d01040 } /* Literal.String.Double */
 .highlight .se { color: #d01040 } /* Literal.String.Escape */
 .highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
 .highlight .si { color: #d01040 } /* Literal.String.Interpol */
 .highlight .sx { color: #d01040 } /* Literal.String.Other */
 .highlight .sr { color: #009926 } /* Literal.String.Regex */
 .highlight .s1 { color: #d01040 } /* Literal.String.Single */
 .highlight .ss { color: #990073 } /* Literal.String.Symbol */
 .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
 .highlight .vc { color: #008080 } /* Name.Variable.Class */
 .highlight .vg { color: #008080 } /* Name.Variable.Global */
 .highlight .vi { color: #008080 } /* Name.Variable.Instance */
 .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */