@font-face {
    font-family : "inconsolata";
    src         : url("static/font/inconsolata.woff");
}

:root {
    --black  : #202020;
    --white  : #FFFFFF;
    --red    : #FF6868;
    --green  : #CBFFA9;
    --orange : #FFD6A5;
    --yellow : #FFFEC4;
    --gray   : #A9A9A9;
    --gray-light : #E9E9E9;

    --accent             : var(--red);
    --link-color         : var(--red);
    --table-header-bg    : var(--red);
    --table-even-bg      : var(--gray-light);
    --code-comment-color : var(--gray);
    --code-indentation   : "  ";
    --code-line-hl-color : var(--green);

    --padding-xs :  4px;
    --padding-s  :  8px;
    --padding-m  : 16px;
}

*, html, header, main, footer {
    /* ... */
}

.widescreen {
    display: block;
}

.smallscreen {
    display: none;
}

html {
    height : 100%;
}

body {
    min-height: 100%;
}

body, header, main, footer {
    display : flex;
}

body {
    display        : flex;
    flex-direction : column;
    color          : var(--black);
    background     : var(--white);
    font-family    : sans-serif;
    line-height    : 1.75;
    margin         : 0;
}

pre code {
    font-family : "inconsolata", monospace;
}

h1 {
    margin-bottom : 0;
}

h2 {
    margin-bottom : 0;
}

h3 {
    margin-bottom : 0;
}

h3.list_link {
    margin-top    : 0;
    margin-bottom : 0;
}

h4.list_link {
    margin-top    : 0;
    margin-bottom : 0;
}

ul.navigator {
    margin       : 0;
    padding-left : 0;
    list-style   : none;
}

ul.navigator li.nav-link {
    display: inline;
}

ul.navigator li.nav-link + li.nav-link:before {
    content: "\003E\00a0";
}

time {
    font-weight      : bold;
}

.exercise-tag, .exnum {
    text-align       : center;
    font-weight      : bold;
    color            : var(--white);
    border           : 1px solid var(--red);
    background-color : var(--red);
    border-radius    : 3px;
    padding          : 2px 2px 0px 2px;
}

pre {
    overflow-x: auto;
}

pre span::before {
    content: var(--code-indentation) "  ";
}

pre span span::before {
    content: "";
}

.listing {
    counter-reset: linenumber;
}

.listing pre code span.line::before {
    counter-increment : linenumber;
    content           : " " counter(linenumber) var(--code-indentation);
    color             : var(--code-comment-color);
}

.listing pre code span.line:nth-child(n + 10)::before {
    content           : counter(linenumber) var(--code-indentation);
}

.listing pre code span span {
    counter-increment : linenumber 0;
}

.comment-section {
    margin-top : 64px;
}

header, main, footer {
    flex-direction : row;
}

header nav {
    /* background      : var(--yellow); */
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 40%;
    padding-bottom  : var(--padding-xs);
}

header nav ul {
    /* background : var(--green); */
    display         : flex;
    flex            : 1;
    margin          : 0;
    padding         : 0;
    list-style-type : none;
}

header nav ul a {
    margin-right    : var(--padding-m);
}

.header__left   , .main__left   , .footer__left    ,
.header__center , .main__center , .footer__center  ,
.header__right  , .main__right  , .footer__right {
    display        : flex;
    flex-direction : column;
    width          : 100%;
}

.header__left  , .main__left  , .footer__left    ,
.header__right , .main__right , .footer__right {
    width : 100%;
}

.header__left, .main__left, .footer__left {
    /* background : var(--green); */
}

.header__center, .main__center, .footer__center {
    /* background : var(--red); */
    min-width   : 700px;
}

.header__right, .main__right, .footer__right {
    /* background : var(--yellow); */
}

.header__center {
    flex-direction  : column;
    justify-content : space-between;
    border-bottom   : 1px solid var(--gray);
}

main {
    flex-grow : 1;
    height    : 100%;
}

.main__center {
    text-align: justify;
}

.main__center ul {
    margin       : 0;
    padding-left : 0;
    list-style   : none;
}

.main__center img {
    max-width     : 100%;
    margin-top    : 2rem;
    margin-bottom : 1rem;
}

.main__center table {
    text-align : center;
    margin : var(--padding-m) 0 var(--padding-m) 0;
    border-spacing : 0;
    border : 1px var(--gray-light) solid;
}

.main__center table th {
    padding : var(--padding-s) var(--padding-m);
    background : var(--table-header-bg);
}

.main__center table tr:nth-child(odd) {
    background : var(--table-even-bg);
}

.main__center table.fixedcol {
    table-layout: fixed;
}

.main__center table.min {
    width : 50%;
}

.main__center table.mid {
    width : 75%;
}

.main__center table.max {
    width : 100%;
}

footer {
    /* ... */
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration : underline;
}

code {
      font-size : 1.0rem;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    header nav {
        width          : 100%;
    }

    header nav ul {
        flex           : none;
    }

    .header__center, .main__center, .footer__center {
        /* background : var(--red); */
        min-width      : 90%;
        padding-bottom : var(--padding-m);
    }

    .header__center {
        display        : flex;
        width          : 100%;
        flex-direction : column;
        align-items    : center;
    }

    .header__center h1 {
        text-align : center;
    }

    .widescreen {
        display: none;
    }

    .smallscreen {
        display: block;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    /* ... */
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    /* ... */
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* ... */
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /* ... */
}