@charset "utf-8";

@font-face {
    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Code';
    src: url('fonts/FiraCode-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Code';
    src: url('fonts/FiraCode-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
    background: url('back.jpg') no-repeat center center;
    min-height: 100%;
    background-size: cover;
}

body {
    /* background-color: rgb(220,220,220); */
    font-family: 'Fira Sans', sans-serif;
    padding: 1em;
    padding-top: 0;
    max-width: 50em; 
    margin: auto;
    font-size: 110%;
    min-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1 {
    color: #000000;
    font-size: 28px;
}

h2 {
    border-bottom: 1px solid #CCCCCC;
    color: #000000;
    font-size: 24px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 14px;
}

h6 {
    color: #777777;
    background-color: inherit;
    font-size: 14px;
}

hr {
    height: 1px;
    border: 0;
    color: #CCCCCC;
    background-color: #CCCCCC;
}

a:focus { 
    outline: 1px dotted; 
}

a:visited {  
    color: #7F31AA;
}

a:hover, a:focus { 
    color: #d3a459; 
    text-decoration: underline; 
}

.active {
    background-color: rgb(239, 255, 0);
    color: #000000;
}

.active:hover, .active:visited, .active:active {
				    text-decoration: none;
				    color: #000000;
				}

p, blockquote, ul, ol, dl, li, table, pre {
    margin: 15px 0;
}

p {
    text-align: justify;
}

code, pre {
    font-family: 'Fira Code', monospace;
}

code, pre, .svg {
    border-radius: 3px;
    background-color: #F8F8F8;
    color: inherit;
}

code {
    border: 1px solid #CCCCCC;
    margin: 0 2px;
    padding: 0 5px;
    font-size: 0.8em;
}

pre {
    border: 1px solid #CCCCCC;
    font-size: 0.8em;
    line-height: 1.25em;
    overflow: auto;
    padding: 6px 10px;
}

.svg {
    border: 1px solid #CCCCCC;
    overflow: auto;
    text-align : center;
    background-color: white;
    padding: 2px;
}

.svg > img {
    width: 400px;
}

pre > code {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: inherit;
}

.big > .key, .ocaml > .key {
    font-weight: bold;
    color: #FF5050;
}

.big > .key2, .ocaml > .string {
    color: #FF9933;
}

.big > .comment {
    color: #19A347;
}

.big > .name, .ocaml > .mod {
    color: #0066FF;
}

.big > .arg, .active .arg {
    color: #E502EC;
}

a {
    color: #4183C4;
    background-color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a[href^="http"]:not(nav a)::after {
    /* Zero-width no-break space (UAX #14 class BA): a line break is
       forbidden immediately before it, so the icon can never be left
       alone at the start of the next line. `display: inline` (not
       inline-block) keeps the joiner in the line-break flow; the icon
       is painted as the background of the joiner's right padding. */
    content: "\FEFF";
    display: inline;
    padding-left: 0.15em;  /* gap between the link text and the icon */
    padding-right: 0.55em; /* area that holds the icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 0.55em 0.55em;
}

.section {
    padding: 1.3em;
    background-color: rgba(238, 238, 238, 0.80);
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 3px;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, .65);
}


#menu {
    padding: 1em 0 1em 16px;
    font-weight: bold;
    font-size: 110%;
}

#menu > span {
    padding-left: 0.8em;
    padding-right: 0.8em;
    color: black;
}

#menu > a:visited {  
    color: #4183C4;
}

#menu {
    color: #d3a459; 
}

#menu > a:hover, #menu > a:focus { 
    color: #d3a459; 
    text-decoration: underline; 
}

#graph0 > polygon {
    fill: none;
    stroke-width: 0;
}

ul ul {
    font-size: 90%;
}

/* Modal windows */

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    overflow-y: auto;
}

.modal:target {
    opacity: 1;
    pointer-events: auto;
}

.modal > div {
    width: 75%;
    position: relative;
    margin: 10% auto;
    padding: 38px 10px 10px 10px;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, .5);
    border-radius: 3px;
    background-color: #eee;
}

/* .close:after { */
/*    content: "\2715"; */
/* } */

.close {
    color: #9B9B9B;
    position: absolute;
    right: 10px;
    top: 10px;
    text-decoration: none;
}

.close:hover, .close:visited, .close:active {
    text-decoration: none;
    color: #9B9B9B;
}

.close:hover {
    color: #525252;
}

section:nth-child(2) p {
    margin-top: 0;
}

span.lhs:after {
   content: "Left-hand side";
}

span.rhs:after {
   content: "Right-hand side";
}

#back1, #back1:hover, #back1:visited, #back1:active {
    text-decoration: none;
    color: #000000;
}

#ts1 {
    height: auto;
    -webkit-transition: height 400ms ease-in;
    -moz-transition: height 400ms ease-in;
    transition: height 400ms ease-in;
}