/* font */

body {
    font-family: 'Roboto', sans-serif;
    font-display: auto;
}
code {
    font-family: 'Roboto Mono', monospace;
    font-display: auto;
    font-weight: bold;
}
.hiddenlang {
    display: none;
}
th {
    text-align: left;
}
a[href^="#footnote_"] {
    vertical-align: super;
    font-size: 10px;
    line-height: 0;
}
q {
    font-style: italic;
}
q:before, q:after {
    content: "";
}

/* color */
/*
  theme color: 0099-Y60R #db5620
  back color:  0010-Y60R #fbeee8
  back color2: 9010-Y60R #150803 Used only in the splash screen so far.
*/

body {
    color: #333333; /* 8000-N */
    background-color: #ffffff;
}
h1 {
    color: #db5620; /* 0099-Y60R */
}
h1.big > span.sub {
    color: #b65c11; /* 2080-Y45R */
}
body > nav {
    background-color: #fbeee8; /* 0010-Y60R */
}
h2, h2 > code {
    color: #db5620; /* 0099-Y60R */
}
h3 {
    color: #b65c11; /* 2080-Y45R */
}
h3 > code {
    color: #9f510f; /* 3070-Y45R */
}
h4 {
    color: #b65c11; /* 2080-Y45R */
}
h4 > code {
    color: #9f510f; /* 3070-Y45R */
}
body > nav h1 {
    color: #d54125; /* 0099-Y70R */
}
body > nav h2 {
    color: #d54125; /* 0099-Y70R */
    /*color: #b14c16; /* 2080-Y55R */
}
body > nav h3 {
    color: #b14c16; /* 2080-Y55R */
}
/*body > nav h1,
body > nav h2,
body > nav h3,
body > nav h4 {
    color: #ffffff;
}*/
a:link {
    color: #464877; /* 1090-R60B */
}
a:visited {
    color: #464877; /* 1090-R60B */
}
a:hover, a:active {
    color: #c54c1b /* 1090-Y60R */
}
body > nav h1 a {
    color: #d54125 !important; /* 0099-Y70R */
}
a[href="#"], a.active {
    cursor: default;
    text-decoration: none;
}
a[href="#"] {
    color: #999999 !important;
}
a.active {
    color: #666666 !important;
    font-weight: bold;
}

div.toc > div {
    background-color: #fbeee8; /* 0010-Y60R */
    border-radius: 8px;
}
pre {
    background-color: #f3f3f3; /* 0500-N */
    color: #333333; /* 8000-N */
    border-color: #cccccc; /* 2000-N */
    border-radius: 8px;
}
table code {
    background-color: transparent;
    border-color: transparent;
}
h1 code, h2 code, h3 code, h4 code {
    border-width: 0 2px;
    position: relative;
    z-index: -1;
}
pre code {
    background-color: transparent;
    border-style: none;
    margin: 0;
}
code span.comment {
    color: #8e5809; /* 4060-Y30R */
}
p.screenshot img {
    background-color: #000;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}
p.thumbnail img {
    background-color: #000;
    border-style: solid;
    border-width: 1px;
    border-color: #333333;
    box-sizing: border-box;
}
iframe {
    border-style: solid;
    border-width: 1px;
    border-color: #333333;
    box-sizing: border-box;
}
.twitter-tweet iframe {
    border-style: none;
}
iframe[src^="https://www.youtube.com/embed/"] {
    border-style: none;
}
p.meta {
    color: #666;
    text-align: right;
}
figcaption {
    text-align: center;
}
td, th {
    background-color: #ffffff;
}
tr:nth-child(even) td, tr:nth-child(even) th {
    background-color: #f3f3f3; /* 0500-N */
}

/* image */
body > nav a[href^="http://"]:after,
body > nav a[href^="https://"]:after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;

    background-image: url(../images/external.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;

    margin-left: 4px;
    position: relative;
    top: 4px;
}

/* margin */

main {
    padding-top: 24px;
}
article {
    margin-bottom: 48px;
}
footer {
    margin-bottom: 24px;
}
h1 {
    margin-top: 24px;
    margin-bottom: 24px;
}
h1.big {
    margin-top: 0;
    margin-bottom: 48px;
}
h2 {
    margin-top: 48px;
    margin-bottom: 24px;
}
h3 {
    margin-top: 24px;
    margin-bottom: 24px;
}
h4, h5, h6 {
    margin-top: 24px;
    margin-bottom: 24px;
}
p, ul, ol, nav.tags {
    margin-top: 0;
    margin-bottom: 24px;
}
figcaption {
    margin-top: 0;
    margin-bottom: 24px;
}
nav.path {
    margin-top: 0;
    margin-bottom: -24px;
}
pre {
    padding: 7px 18px 10px 18px;
    margin: 0 0 7px 0;
    overflow-x: auto;
}
figure {
    margin: 0;
}
div.grid-container > div {
    padding: 0;
}
div.toc > div {
    padding: 7px 18px 10px 18px;
    margin-bottom: 7px;
    overflow-x: auto;
}
div.toc > div ul {
    top: 0;
    margin-bottom: 0;
    width: 100%;
}
ul ul, ul ol, ol ul, ol ol {
    margin-bottom: 0px;
    position: relative;
    top: 0;
}
.toc ul:first-child {
    margin-left: 0;
}
.toc ul {
    list-style-type: none;
}
body > nav h1 {
    margin-top: 24px;
    margin-bottom: 13px;
}
body > nav h2 {
    margin-top: 0;
    margin-bottom: 24px;
}
body > nav h3 {
    margin-top: 0;
    margin-bottom: 0;
}

body > nav li img {
    margin-left: 12px;
    vertical-align: middle;
    width: 18px;
    height: 18px;
}
body > nav {
    padding: 24px;
}

ul, ol {
    padding-left: 0;
}
article ul, article ol {
    margin-left: 48px;
    width: calc(100% - 48px);
}
ul ul, ul ol, ol ul, ol ol {
    margin-left: 24px;
    width: calc(100% - 24px);
}
article div.grid-container ul, article div.grid-container ol {
    margin-left: 24px;
    width: calc(100% - 24px);
}
body > nav ul, nav.tags > ul, nav.path > ul {
    margin-left: 0;
}
table {
    margin-bottom: 24px;
}
td, th {
    vertical-align: top;
    padding: 0 6px;
}

/* font size */

p, pre, ul, ol, figcaption, table {
    font-size: 16px;
    line-height: 24px;
}
p, ul, ol, figcaption, table {
    position: relative;
    top: 6px;
}
code {
    font-size: 13px;
    line-height: 24px;
}

h1, h1 > code {
    font-size: 28px;
    font-weight: bold;
}
h1 {
    line-height: 48px;
    position: relative;
    top: -10px;
}
h1.big {
    font-size: 70px;
    top: 16px;
}
h1.big > span.sub {
    font-size: 20px;
    font-weight: normal;
}

h2, h2 > code {
    font-size: 22px;
    font-weight: bold;
}
h2 {
    line-height: 24px;
    position: relative;
    top: 4px;
}

h3, h3 > code {
    font-size: 18px;
    font-weight: bold;
}
h3 {
    line-height: 24px;
    position: relative;
    top: 5px;
}

h4, h4 > code {
    font-size: 16px;
    font-weight: bold;
}
h4 {
    line-height: 24px;
    position: relative;
    top: 6px;
}

body > nav h1 {
    font-size: 28px;
    font-weight: bold;
    line-height: 24px;

    position: relative;
    top: -8px;
}
body > nav h2 {
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;

    position: relative;
    top: 5px;
}
body > nav h3 {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;

    position: relative;
    top: 6px;
}
div.grid-container > div pre code {
    font-size: 12px;
    line-height: 24px;
    -moz-tab-size: 4;
    tab-size: 4;
}

/* flex */

body {
    display: flex;
}
body > nav {
    width: 168px;
    height: calc(var(--vh, 1vh) * 100 - 24px - 24px);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow-y: auto;
    z-index: 2;

    flex-grow: 0;
}
main {
    display: flex;
    flex-direction: column;

    flex-grow: 1;
    align-items: center;
}
article {
    display: flex;
    flex-direction: column;
}
article, footer {
    width: calc(4 * 168px + 3 * 24px);
    max-width: calc(100vw - 2 * 24px);
}
footer {
    text-align: right;
    overflow-y: hidden;
}
body > iframe {
    /* iframes are added by embedding Twitter. */
    display: none;
}

/* grid */

div.grid-container {
    display: grid;
    grid-template-columns: repeat(4, calc((100% - 3 * 24px) / 4));
    grid-gap: 0 24px;
}
div.grid-item-1 {
    grid-column-start: span 1;
}
div.grid-item-2 {
    grid-column-start: span 2;
}
div.grid-item-3 {
    grid-column-start: span 3;
}
div.grid-item-4 {
    grid-column-start: span 4;
}

/* table */

table {
    border-collapse: collapse;
}

/* display */

p, nav.tags, nav.path,
h1, h2, h3, h4, h5, h6,
body > nav ul, body > nav ol {
    width: 100%;
}
pre {
    display: block;
    width: calc(100% - 2 * 18px);
}
h1.big > span.sub {
    display: inline-block;
    width: 100%;
}
body > nav ul {
    list-style-type: none;
}
body > nav h1 a {
    text-decoration: none;
}
nav.tags > ul > li {
    display: inline;
    margin-left: 24px;
    font-weight: bold;
}
nav.tags > ul > li:first-child {
    margin-left: 0;
}
nav.tags > ul > li a {
    font-weight: normal;
}

nav.path > ul > li {
    display: inline;
    margin-left: 0;
    margin-right: 0;
}
nav.path > ul > li:after {
    content: '>';
    margin-left: 12px;
    margin-right: 12px;
}

p.img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
p.img img, p.img video {
    max-width: 100%;
    height: auto;
}
p.img.thumbnail img, p.img iframe, iframe[src^="https://www.youtube.com/embed/"] {
    max-width: 100%;
}

/* logo */

h1.big > span.main:before {
    content: "";
    display: inline-block;
    width: 80px;
    height: 80px;

    background-image: url(../images/favicon.ico);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;

    margin-left: -5px;
    position: relative;
    top: 9px;
}

body > nav h1:before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;

    background-image: url(../images/favicon.ico);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;

    margin-left: -2px;
    position: relative;
    top: 4px;
}

/* responsive */

input#sidemenu {
    display: none;
    z-index: 3;

    position: fixed;
    top: 8px;
    left: 8px;
}
input#sidemenu ~ label.sidemenubutton {
    display: none;

    cursor: pointer;

    position: fixed;
    top: 8px;
    left: 8px;

    background-image: url(../images/menu.svg);
    background-position: left center;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;

    transition: background-image 0.2s ease;

    z-index: 3;
}
input#sidemenu:checked ~ label.sidemenubutton {
    background-image: url(../images/menu.svg);
}
input#sidemenu ~ label.sidemenucover {
    display: none;
    visibility: hidden;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background-color: #333333;
    opacity: 0;
    transition: visibility 0s linear 0.2s, opacity 0.2s ease;

    z-index: 2;
}
input#sidemenu:checked ~ label.sidemenucover {
    display: inline-block;

    visibility: visible;
    opacity: 0.5;
    transition-delay: 0s;
}

@media only screen and (max-width: calc(5 * 168px + 7 * 24px)) {
    input#sidemenu ~ label.sidemenubutton {
        display: inline-block;
    }
    input#sidemenu ~ label.sidemenucover {
        display: inline-block;
    }

    body > nav {
        position: fixed;
        left: calc(-1 * (168px + 2 * 24px));

        transition: left 0.2s ease;
    }
    input#sidemenu:checked ~ nav {
        left: 0;
    }
}

@media only screen and (max-width: calc(4 * 168px + 5 * 24px)) {
    div.grid-container {
        grid-template-columns: repeat(3, calc((100% - 2 * 24px) / 3));
    }
    div.grid-item-2 {
        grid-column-start: span 3;
    }
    div.grid-item-4 {
        grid-column-start: span 3;
    }

    pre code {
        font-size: 12px;
        line-height: 24px;
        -moz-tab-size: 4;
        tab-size: 4;
    }
    article ul, article ol {
        margin-left: 24px;
        width: calc(100% - 24px);
    }
}
@media only screen and (max-width: calc(3 * 168px + 4 * 24px)) {
    div.grid-container {
        grid-template-columns: repeat(2, calc((100% - 24px) / 2));
    }
    div.grid-item-2 {
        grid-column-start: span 2;
    }
    div.grid-item-3 {
        grid-column-start: span 2;
    }
    div.grid-item-4 {
        grid-column-start: span 2;
    }
}
@media only screen and (max-width: calc(2 * 168px + 3 * 24px)) {
    div.grid-container {
        grid-template-columns: repeat(1, 100%);
    }
    div.grid-item-2 {
        grid-column-start: span 1;
    }
    div.grid-item-3 {
        grid-column-start: span 1;
    }
    div.grid-item-4 {
        grid-column-start: span 1;
    }
    h1.big {
        margin-bottom: 38px;
    }
    h1.big > span.sub {
        font-size: 18px;
    }
}
@media only screen and (max-width: 350px) {
    h1.big {
        font-size: 63px;
        margin-bottom: 20px;
        margin-top: 8px;
    }
    h1.big > span.sub {
        font-size: 16px;
    }
    h1.big > span.main:before {
        width: 72px;
        height: 72px;
    }
}

/* toplinks (for the top page) */
ul.toplinks {
    list-style-type: none;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
ul.toplinks li {
    dipslay: inline-block;
}
ul.toplinks li img {
    position: relative;
    top: 3px;
    margin-right: 6px;
    opacity: 0.7;
}

/* test image */

/*body > nav, main {
    background-image: url('baseline.svg');
    background-attachment: local;
}
div.grid-container > div, pre, footer {
    opacity: .5;
}*/