:root {
    --main-color: var(--c-gray-100, #000);
    --main-bg-color: var(--c-yellow-500, #ffc927);
    --warning-color: var(--c-magenta-500, #ff2727);
    --accent-color: var(--c-yellow-400, #88171b);
    --accent-dark-color: var(--c-yellow-800, #784c44);
    --accent-bg-color: var(--c-gray-900, #fff);
    --decent-bg-color: var(--c-gray-600, #423b3a);
    --button-bg-color: var(--c-teal-700, linear-gradient(180deg, #fff 0px, #f6f5f4 1px, #edebe9 99%, #edebe9 100%));
    --button-bg-hover-color: var(--c-teal-500, linear-gradient(180deg, #fff 0px, #f8f8f7 1px, #f8f8f7 99%, #f7f6f5 100%));
    --button-bg-active-color: var(--c-magenta-400, #d6d1cd);
    --link-color: var(--c-yellow-400, #338);
    --link-hover-color: var(--c-yellow-300, rgb(95, 95, 177));
    --modal-bg-color: var(--c-teal-400, #423b3a);
  }

* { margin: 0px; padding: 0px; /*transition: all 0.314156s ease-out 0.0s;*/ }
html, body { width: 100%; min-height: 100%; min-height: 100vh; font-size: 12px; }
.centering, body, section { display: flex; justify-content: top; align-items: center; flex-direction: column; }
.hidden { display: none !important; height: 0; width: 0; }

.vertical-flex { display: flex; flex-flow: row wrap; }
.vertical-flex > div { margin: 1rem; width: 10rem !important; flex-grow: 1; }

body {
    align-items: initial;
    font-family: "Tinos";
    color: var(--main-color);
    background: var(--accent-bg-color);
    background-image: url('ferris_party.svg');
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-position: bottom;
}

header { display: flex; flex-flow: row wrap; justify-content: space-between; background-color: var(--main-bg-color); }
header > * { margin: 0.6rem 1rem; }

#logo { display: flex; flex-flow: row wrap; align-items: baseline; font-size: 2rem; }
#logo > a { display: block; margin: 0px 0.2rem; padding: 0px; color: var(--main-color); text-decoration: none; }
#logo > a:hover { text-decoration: underline; }
#logo img { margin: 0px; max-height: 2rem; }

/*.menu { background: url('img/Eingang_markiert.jpg'); }*/
menu { flex-flow: row wrap; justify-content: space-around; }
menu a, #user-icon a { flex-grow: 1; display: inline-block; min-width: 112px; margin: 0.1rem; padding: 0.7rem; white-space: nowrap; text-align: center; border: 2px solid var(--accent-dark-color); background: var(--accent-color); color: var(--accent-bg-color); }
menu a:hover, #user-icon a:hover { background: var(--accent-dark-color); }

#user-icon a img, .identicon { border-radius: 50%; margin: 0; width: 1em; height: 1em; vertical-align: bottom; }


.main h1 img { margin: 0px 0.1em; max-height: 1em; }

.flex_rows { display: flex; flex-direction: row; }
.flex_rows > * { margin-left: 6px; }

section { min-height: 42vh; padding: 7px; }

h1 { margin: 12px; padding: 6px; font-weight: 600; font-size: 1.6rem; text-align: center; }
h2 { margin: 10px; padding: 6px; font-weight: 600; font-size: 1.41rem; }
h3 { margin: 6px; padding: 6px; font-weight: 600; font-size: 1.2rem; }

p, ul, ol, .main div { margin-bottom: 0.2rem; width: 100%; }

.main.index p { margin-bottom: 1em; }

table { margin-bottom: 2rem;}
table tbody tr { border-top: 1px solid var(--main-color); }
table tbody tr:hover { background-color: var(--decent-bg-color); cursor: pointer; }
table th, table td { padding: 16px; }

ul, ol { list-style: disc; margin-left: 2rem; width: calc(100% - 2rem); }
ol { list-style: decimal; }
highlight { padding: 12px 24px; background-color: var(--decent-bg-color); }

iframe { margin: 6px; border: 1px solid black; width: 100%; }

img { margin: 16px 0px; max-width: 100%; }

a { color: var(--link-color); padding: 0.7rem 0px; }
a:hover { color: var(--link-hover-color); }

b, strong { font-weight: 600; }

sub { font-size: 0.6em; }

.flex {
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.flex .row {
    display: flex;
    flex-flow: row;
    justify-content: center;
}
.flex .row cargo { flex-grow: 1; }

#modal-explanation { position: absolute; top: 10vh; left: 10vw; right: 10vw; max-width: 30rem;
    opacity: 0.95; border-radius: 2rem; background: var(--modal-bg-color); padding: 1.5rem; }
#snake-assignement { display: inline; }
#snake-assignement img, #snake-assignement svg { margin: 0px; min-height: 1em; max-height: 2em; }

.warning { color: var(--warning-color); font-weight: 600; }
.center-text { text-align: center; }

canvas { outline: 1px solid var(--main-bg-color); max-width: 100%; max-height: 80vh; /*flex-grow: 1;*/ }

select { font-size: 1rem; }

#settings_toggle img { max-height: 2em; }
#settings_toggle:hover { border-radius: 0.6em; background: var(--button-bg-color); }
#settings_toggle:active { border-radius: 0.9em; background: var(--button-bg-active-color); }

/* D-Pad controls */
#input_controls.dpad div {
    max-width: 6rem;
}
button {
    font-family: 'Tinos';
    margin: 0.2em; font-weight: 600; font-size: 1.8rem;
    border: 4px solid #cdc7c2;
    border-bottom-color: #bfb8b1;
    padding: 0.1em 0.4em;
    border-radius: 0.1em;
    background: var(--button-bg-color);
    color: var(--main-color);
}
button:focus {
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, var(--main-bg-color), var(--accent-color));
    /*border-color: var(--accent-color);*/
}
button:hover {
    background: var(--button-bg-hover-color);
}
button:active {
    background: var(--button-bg-active-color);
}
button:disabled {
    background: var(--accent-dark-color);
}

footer { margin-top: 2rem; font-size: 0.8rem; /* color: var(--accent-color); */ }

body.wide-layout { flex-direction: row; }
body.wide-layout header { max-width: 5rem;}
body.wide-layout a {
    /* Rotate from top left corner (not default) */
    transform-origin: 0 1rem;
    transform: rotate(-90deg);
}
body.wide-layout header a.no-rotate{ transform: unset; }
body.wide-layout .main > div.two-column { flex-direction: row; }
body.wide-layout .main > div.two-column .two-column-inner { flex-direction: column; }
body.wide-layout .main > div.two-column button { min-width: 19vw; }
body.wide-layout .main > div.two-column .two-column-inner { min-width: 14vw; text-align: left;}
body.wide-layout .main > div.two-column .two-column-inner > div { margin: 1rem; }

.hide-when-small { display: none !important; }

@font-face {
  font-family: 'Oxygen Mono';
  src: url('oxygen-mono-regular.woff'), url('oxygen-mono-regular.ttf'), local('Oxygen Mono');
}

@font-face {
  font-family: 'Tinos';
  src: url('Tinos-Regular.ttf'), local('Tinos');
}

@media (min-width: 512px) {
    html, body { font-size: 16px; }
}

@media (min-width: 700px) {
    html, body { font-size: 23px; }
    section { padding: 0.5rem 1rem; min-height: 36vh; }
    img, .menu div { max-width: 700px; }
    p { margin-bottom: 0.4rem; }
}

@media (min-width: 1020px) {
    html, body { font-size: 32px; }
    /*header { flex-flow: column nowrap; }
    header > * { max-width: 720px; margin: 0.6rem auto; }*/
    section { padding: 1rem 2rem; min-height: 42vh; }
    .hide-when-small { display: unset; }
}