/* Colours and fonts */

body {
    font-family:
        "Source Sans Pro","Trebuchet MS","Lucida Grande",
        "Bitstream Vera Sans","Helvetica Neue","sans-serif";

    background-color: white;
    color: #293c4b;
}

h1, h2 {
    background-color: #60b5cc;
    color: white;
}

a { color: #60b5cc; }

tt,code {
    background-color: #2d2d2d;
    color: #66cccc;
}

code em { color: #f33; }
code i { color: #0f0; }


/* Document structure */

* {
    box-sizing: border-box;
}

html,body {
    padding: 0vh;
    margin: 0vh;
}

body {
    font-size: 5vh;
}

section,header {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 5vh 4vw;
    break-after: always
}

header div {
    text-align: center;
    font-size: 90%;
}

h1,h2
{
    padding: 1vh;
    text-align: center;
}

h1 {
    margin-top: 15vh;
    margin-bottom: 15vh;
    font-size: 180%;
}

h2 {
    font-size: 150%;
    margin-bottom: 2vh;
}

a {
    text-decoration: inherit;
}

p {
    margin-bottom: 2vh;
    margin-top: 1vh;
}

section > ul {
    margin-left: 8vw;
    margin-top: 2vh;
}

section > ul ul {
    margin-top: 2vh;
}

li {
    margin-bottom: 1vh;
}

li ul li {
    font-size: 80%;
}

tt,code {
    white-space: pre;
    font-size: 70%;
    overflow: auto;
}

tt {
    border-radius: 0.3vw;
    padding: 0.8vw;
}

code {
    display: block;
    border-radius: 0.5vw;
    padding: 1.4vw;
}

code em,i {
    font-style: normal;
}

div.cc {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    font-size: 10px;
    height: 31px;
}

div.cc img {
    float: right;
    width: 88px;
    height: 31px;
    border-width: 0px;
    height: 31px;
    margin-left: 1vh;
}

.moreinfo {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    font-size: 4vh;
    width: 80%;
    margin: auto;
}

.moreinfo h3 {
    text-align: right;
    font-weight: 500;
    margin-right: 1vw;
}

.moreinfo > div {
    display: flex;
    flex-direction: column;
    align-items: left;
    font-size: 90%;
}