/* comic-relief-regular - latin */
@font-face {
    font-family: 'Comic Relief';
    src: url('../fonts/font_comic-relief.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
}

/* Determination Mono */
@font-face {
    font-family: 'Determination Mono';
    src: url('../fonts/determination-mono.ttf') format('truetype');
}

/* UT Comic Sans */
@font-face {
    font-family: 'Comic Sans';
    src: url('../fonts/font_sansUT.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: Comic Relief, Arial;
    color: #454545;
    font-size: 16px;
    margin: 40px auto;
    max-width: 650px;
    padding: 0;
    line-height: 1.4;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

h1,
h2,
h3 {
    color: white;
    line-height: 1.2;
}

a {
    color: #07a;
}

a:visited {
    color: #941352;
}

ul li img {
    height: 1em;
}

td {
    border: 1px solid #555;
    border-radius: 2px;
}

button {
    background-color: black;
    border: 1px solid #555;
    border-radius: 7.5px;
}

button.cont-inv {
    cursor: pointer;
    border-radius: 2px;
    position: fixed;
    right: 10px;
    font-size: .8em;
    border: 0;
    padding: 2px 5px;
}

span.citneed {
    vertical-align: top;
    font-size: .7em;
    padding-left: .3em;
}

small {
    font-size: .4em;
}

span.visited {
    color: #941352;
}

span.visited-maroon {
    color: #85144b;
}

button.cont-inv,

div.fancyPositioning div.picture-left {
    float: left;
    width: 40%;
    overflow: hidden;
    margin-right: 1em;
}

div.fancyPositioning div.picture-left img {
    width: 100%;
}

div.fancyPositioning div.picture-left figure {
    margin: 10px;
}

div.fancyPositioning div.picture-left figure figcaption {
    font-size: .7em;
}

div.fancyPositioning div.tleft {
    float: left;
    width: 55%;
}

div.fancyPositioning div.tleft p:first-child {
    margin-top: 0;
}

div.fancyPositioning:after {
    display: block;
    content: "";
    clear: both;
}

@media {
    html { background-color: #000; }
    html body { color: #d9d9d9; }
    html label[for=invmode] { color: #fff; background-color: #000; }
    html label[for=contrast] { color: #fff; background-color: #000; }
    html blockquote { color: #d3c9be; }
    html blockquote:before { color: #b8b8b8; }
    html a { color: #00a2e7; }
    html a:visited { color: #ca1a70; }
    html span.wr { color: #d24637; }
    html span.mfw { color: #b00000; }

    /* Inversion edge case */
    html html { background-color: #fefefe; }
}