a {
    color: #364d6c;
}
use path#line {
    stroke: #009966;
}

.nav-list .nav-list-item .nav-list-expander {
    color: #364d6c;
}

section {
    width : 80%;
    margin : auto;
    padding-top : 70px;
}
.center {text-align: center;}

.row {display: flex;}
.row__center { justify-content: space-around;}
.row__between {justify-content: space-between;}
.row__left { justify-content: flex-start;}
.indent {padding-left: 20px;}
.right {text-align: right}
.grey { background-color: #ffffff;}
.col-md-3 { width: 30%;}
.col-md-4 { width: 23%;}
.col-md-2 { width: 49%;}

.grid2 {
    display : grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 50px;
}


.gb {
    font-weight: bold;
}

.highlighter-rouge {
    margin-top : 0!important;
}

span.tag:before {
    content: "<";
}

span.tag:after {
    content: ">";
}

p.rem:before {
    content: "Remark: ";
    color : rgb(209, 84, 82);
}
div.sem:before {
    content: "Semantic";
    background-color : #54d154;
    display: block;
    color : white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.25;
    font-size: 12px !important;
    text-align: right;
    margin-bottom: 12px!important;
    padding: 3px;
    margin : -12px;
}
div.sem {
    background-color:#f5f6fa;
    padding: 12px;
}
h4.sem, h4.example, h4.syntax {
    font-weight: bold;
    background-color: #eee;
    text-align: right;
    margin-bottom: 0!important;
    padding: 3px;
}


h4.syntax {
    background-color :  #EB7052;
    color : white;
}

h4.example {
    color:white;
    background-color: #5299EB;;
}

pre.highlight {
    line-height: 1.3;
}

.highlight .c1 {
    color: #93a1a1;
}

.highlight .n, .highlight .go  {
    color: #586e75;
}

@media only screen and (max-width: 700px){
    .grid2 {
        display: block;
    }
}


@media (min-width: 66.5rem) {
    .side-bar {
        width: 300px;
    }

    .main {
        margin-left: 300px;
    }
}

.main {
    padding-top : 50px;
}

figcaption {
    text-align:center;
}

img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 2px auto;
}

img.modeling {
    width : 40%;
    height: auto;
    max-height: none;
}

header {
    background-color : #364d6c;
    color : white;
    display : flex;
    padding : 16px;
    position : fixed;
    z-index: 20;
    width: 100%;
}
.side-bar {
    padding-top : 70px;

    background-color: #ffffff;
}
header a:not([class]) {
    color : white;
    text-decoration: none;
    padding : 0px 20px;
    background-image: none;
    font-weight: bold;
}

header a:not([class]):hover {
    color : darkgrey;
}

header div {
    margin-left: auto;
}

header img {
    width: 30px;
}

div.logo {
    display : flex;
    justify-content: center;
    align-items: center;
}

div.logo a, div.logo a:hover, header a, header a:hover {
    background-image: none!important;
}
div.logo img {
    width : 30px;
    margin : 10px 50px 40px 50px;
}

div.logo img {
    width : 120px;
}


html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 30px;
}
footer {
    position: absolute;
    bottom: 0;
    padding-top: 5px;
    width: 100%;

    /* Set the fixed height of the footer here */
    height: 30px;
    background-color: #eeebee;

    font-size: 90%;
    text-align: center;
    margin : 0;
}

@media (min-width: 50rem) {
    .main {
        max-width: 900px;
    }
}

nav ul a, .main-content ul a {
    text-transform: capitalize;
}

.table-wrapper {
    width: 95%!important;
    margin : 0 auto;
}
.table-wrapper th {
    background-color: #658dea !important;
    color : white;
    padding: 4px 10px   ;
}

.table-wrapper th font {
    font-size:100%!important;
}


.separate {
    border-bottom: 1px solid lightgrey;
    margin-bottom: 10px;
}

td {
  min-width: 20px;
}

@media print {
    h1 {
        margin-top : -1cm;
    }
    .side-bar, header, #main-header, nav {
        display: none;
    }

}

video {
    display: block;
    margin: 0 auto;
    width: 80%;
    min-width: 320px;
}

.site-nav{
    padding-top: 1rem!important;
}