/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* fonts */
@font-face {
    font-family: 'ft88serif';
    src: url('fonts/FT88-Serif.woff2') format('woff2'),
         url('fonts/FT88-Serif.woff') format('woff'),
         url('fonts/FT88-Serif.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ft88gothique';
    src: url('fonts/FT88-Gothique.woff2') format('woff2'),
         url('fonts/FT88-Gothique.woff') format('woff'),
         url('fonts/FT88-Gothique.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'basteleur';
    src: url('../fonts/Basteleur-Bold.woff2') format('woff2'),
         url('../fonts/Basteleur-Bold.woff') format('woff'),
         url('../fonts/Basteleur-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'basteleur';
    src: url('../fonts/Basteleur-Moonlight.woff2') format('woff2'),
         url('../fonts/Basteleur-Moonlight.woff') format('woff'),
         url('../fonts/Basteleur-Moonlight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'alfabet';
    src: url('../fonts/alfabet-Regular.woff2') format('woff2'),
         url('../fonts/alfabet-Regular.woff') format('woff'),
         url('../fonts/alfabet-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'happytimes';
    src: url('../fonts/happy-times-NG_regular_master_web.woff2') format('woff2'),
         url('../fonts/happy-times-NG_regular_master_web.woff') format('woff'),
         url('../fonts/happy-times-NG_regular_master_web.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'happytimes';
    src: url('../fonts/happy-times-NG_italic_master_web.woff2') format('woff2'),
         url('../fonts/happy-times-NG_italic_master_web.woff') format('woff'),
         url('../fonts/happy-times-NG_italic_master_web.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'happytimes';
    src: url('../fonts/happy-times-NG_bold_master_web.woff2') format('woff2'),
         url('../fonts/happy-times-NG_bold_master_web.woff') format('woff'),
         url('../fonts/happy-times-NG_bold_master_web.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'boecklins';
    src: url('../fonts/boecklins_universe.woff2') format('woff2'),
         url('../fonts/boecklins_universe.woff') format('woff'),
         url('../fonts/boecklins_universe.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'vagra';
    src: url('../fonts/vagra-regular.woff2') format('woff2'),
         url('../fonts/vagra-regular.woff') format('woff'),
         url('../fonts/vagra-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'vagra';
    src: url('../fonts/vagra-pixel.woff2') format('woff2'),
         url('../fonts/vagra-pixel.woff') format('woff'),
         url('../fonts/vagra-pixel.otf') format('opentype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'vagra';
    src: url('../fonts/vagra-pixel-large.woff2') format('woff2'),
         url('../fonts/vagra-pixel-large.woff') format('woff'),
         url('../fonts/vagra-pixel-large.otf') format('opentype');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: 'struggle';
    src: url('../fonts/struggle-regular.woff2') format('woff2'),
         url('../fonts/struggle-regular.woff') format('woff'),
         url('../fonts/struggle-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'struggle';
    src: url('../fonts/struggle-rotalics.woff2') format('woff2'),
         url('../fonts/struggle-rotalics.woff') format('woff'),
         url('../fonts/struggle-rotalics.otf') format('opentype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'bonk';
    src: url('../fonts/bonk-regular.woff2') format('woff2'),
         url('../fonts/bonk-regular.woff') format('woff'),
         url('../fonts/bonk-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bonk';
    src: url('../fonts/bonk-slanted.woff2') format('woff2'),
         url('../fonts/bonk-slanted.woff') format('woff'),
         url('../fonts/bonk-slanted.otf') format('opentype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'A MONO';
    src: url('../fonts/AMONOVF.woff2') format('woff2-variations'),
         url('../fonts/AMONOVF.woff2') format('woff2') tech('variations'),
         url('../fonts/AMONOVF.woff') format('woff-variations')
         url('../fonts/AMONOVF.woff2') format('woff') tech('variations'),
         url('../fonts/AMONOVF.ttf') format('truetype-variations'),
         url('../fonts/AMONOVF.woff2') format('truetype') tech('variations');
    font-weight: 400 900;
    font-style: normal;
    font-synthesis: none;
}

@font-face {
    font-family: 'toren';
    src: url('../fonts/Toren-Proportional.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'toren';
    src: url('../fonts/Toren-Rotalic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'toren';
    src: url('../fonts/Toren-Mono.otf') format('opentype');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'authentic';
    src: url('../fonts/AUTHENTICSans-90.woff') format('woff2'),
         url('../fonts/AUTHENTICSans-90.woff') format('woff'),
         url('../fonts/AUTHENTICSans-90.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'authentic';
    src: url('../fonts/AUTHENTICSans-Condensed-90.woff2') format('woff2'),
         url('../fonts/AUTHENTICSans-Condensed-90.woff') format('woff'),
         url('../fonts/AUTHENTICSans-Condensed-90.otf') format('opentype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'compagnon';
    src: url('../fonts/Compagnon-Roman.woff2') format('woff2'),
         url('../fonts/Compagnon-Roman.woff') format('woff'),
         url('../fonts/Compagnon-Roman.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'compagnon';
    src: url('../fonts/Compagnon-Bold.woff2') format('woff2'),
         url('../fonts/Compagnon-Bold.woff') format('woff'),
         url('../fonts/Compagnon-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'latin';
    src: url('../fonts/lmroman10-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'latin';
    src: url('../fonts/lmroman10-italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'latin';
    src: url('../fonts/lmroman10-bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'madleen';
    src: url('../fonts/madleen-regular.woff2') format('woff2'),
         url('../fonts/madleen-regular.woff') format('woff'),
         url('../fonts/madleen-regular.otf') format('opentype');
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;

}

@font-face {
    font-family: 'madleen';
    src: url('../fonts/madleen-semiwide.woff2') format('woff2'),
         url('../fonts/madleen-semiwide.woff') format('woff'),
         url('../fonts/madleen-semiwide.otf') format('opentype');
    font-weight: normal;
    font-stretch: semi-expanded;
    font-style: normal;

}

@font-face {
    font-family: 'madleen';
    src: url('../fonts/madleen-wide.woff2') format('woff2'),
         url('../fonts/madleen-wide.woff') format('woff'),
         url('../fonts/madleen-wide.otf') format('opentype');
    font-weight: normal;
    font-stretch: expanded;
    font-style: normal;

}

@font-face {
    font-family: 'madleen';
    src: url('../fonts/madleen-slanted.woff2') format('woff2'),
         url('../fonts/madleen-slanted.woff') format('woff'),
         url('../fonts/madleen-slanted.otf') format('opentype');
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;

}

@font-face {
    font-family: 'madleen';
    src: url('../fonts/madleen-semiwideslanted.woff2') format('woff2'),
         url('../fonts/madleen-semiwideslanted.woff') format('woff'),
         url('../fonts/madleen-semiwideslanted.otf') format('opentype');
    font-weight: normal;
    font-stretch: semi-expanded;
    font-style: italic;

}

@font-face {
    font-family: 'madleen';
    src: url('../fonts/madleen-wideslanted.woff2') format('woff2'),
         url('../fonts/madleen-wideslanted.woff') format('woff'),
         url('../fonts/madleen-wideslanted.otf') format('opentype');
    font-weight: normal;
    font-stretch: expanded;
    font-style: italic;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-regular.woff2') format('woff2'),
         url('../fonts/madleentext-regular.woff') format('woff'),
         url('../fonts/madleentext-regular.otf') format('opentype');
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-semiwide.woff2') format('woff2'),
         url('../fonts/madleentext-semiwide.woff') format('woff'),
         url('../fonts/madleentext-semiwide.otf') format('opentype');
    font-weight: normal;
    font-stretch: semi-expanded;
    font-style: normal;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-wide.woff2') format('woff2'),
         url('../fonts/madleentext-wide.woff') format('woff'),
         url('../fonts/madleentext-wide.otf') format('opentype');
    font-weight: normal;
    font-stretch: expanded;
    font-style: normal;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-slanted.woff2') format('woff2'),
         url('../fonts/madleentext-slanted.woff') format('woff'),
         url('../fonts/madleentext-slanted.otf') format('opentype');
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-semiwideslanted.woff2') format('woff2'),
         url('../fonts/madleentext-semiwideslanted.woff') format('woff'),
         url('../fonts/madleentext-semiwideslanted.otf') format('opentype');
    font-weight: normal;
    font-stretch: semi-expanded;
    font-style: italic;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-wideslanted.woff2') format('woff2'),
         url('../fonts/madleentext-wideslanted.woff') format('woff'),
         url('../fonts/madleentext-wideslanted.otf') format('opentype');
    font-weight: normal;
    font-stretch: expanded;
    font-style: italic;

}

@font-face {
    font-family: 'fixelpont';
    src: url('../fonts/fixelPont-regular.woff2') format('woff2'),
         url('../fonts/fixelPont-regular.woff') format('woff'),
         url('../fonts/fixelPont-regular.otf') format('opentype');
    font-weight: normal;

}

@font-face {
    font-family: 'fixelpont';
    src: url('../fonts/fixelPont-rounded.woff2') format('woff2'),
         url('../fonts/fixelPont-rounded.woff') format('woff'),
         url('../fonts/fixelPont-rounded.otf') format('opentype');
    font-weight: bold;

}

/* style */
body {
    overflow-x: hidden;
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    font-family: madleentext;
    font-stretch: normal;
    text-align: center;
    margin: 50px 0;
    font-size: 1.2em;
    line-height: 1.2;
}

p, ul {
    margin-top: 1em;
    margin-bottom: 1em;
}

h1 {
  font-family: madleen;
  font-weight: normal;
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}

a {
    overflow-wrap: break-word;
}

a, a:visited {
  color: inherit;
  text-decoration: none;
}

a:focus {
    color: var(--hlcolor);
    outline: none;
}

a:hover {
  color: var(--hlcolor);
  font-style: italic;
}

a:active {
    color: var(--hlcolor);
    font-style: italic;
}

em {
    font-style: italic;
}

b, strong {
    font-weight: bold;
    font-synthesis: none;
}

.start {
    max-width: 400px;
    margin: 0 auto;
}

style {
    font-size: 8pt;
}

#menut, #menub {
    text-align: center;
    position: fixed;
    margin: 0;
    width: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

#menut {
    top: 10px;
}

#menub {
    bottom: 10px;
}


/*specific stuff*/

#info-list {
    list-style: none;
    padding: 0;
}

#info-list li {
    display: inline;
}

#info-list li:not(:last-child):after {
    content: " | "
}

@media only screen and (max-width: 480px) {
    body {
        font-size: 1em;
    }