body {
    margin: 0;
    padding: 0;
    font-size: 16px;
}
#eb {
    background-image: url("/images/eb-grootgroot.svg");
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center center;
    margin: 0.5em auto;
    width: 70vw;
    height: 25vh;
}
#katergeil {
    padding:15% 3ch;
    font-size:16px;
}
#katergeil-top {
    display: none;
    text-align: center;
    padding:5% 3ch;
}
h1, h2 {
    font-family: monospace;
    font-size: 2.5em;
    line-height: normal;
    font-weight: normal;
    padding:0;
    margin:0;
}
h3 {
    font-family: monospace;
    font-size: 1.2em;
    line-height: normal;
    font-weight: normal;
    padding:0;
    margin:0;
}
p {
    font-size: 0.8em;
    font-family: monospace;
}
#footer {
    margin: 5em auto 0.5em auto;
}
#footer p {
    font-size:0.7em;
    text-align:center;
    font-family: Georgia sans-serif;
}

/* OVERLAY */

#opaque {
    display:none;
    width: 100vw;
    height: 100vh;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color:grey;
}
#description {
    display: none;
    width: 75vw;
    max-width: 350px;
    text-align: center;
    font-size: 16px;
    position: fixed;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 15;
    padding: 1em;
}
#close {
    font-family: courier;
    color: grey;
    font-size: 20px;
    float: right;
}
#close:hover {
    cursor: pointer;
}
.link {
    text-decoration: none;
    color: black;
}
.link:hover {
    cursor: pointer;
}
.link::before {
    content: "▶";
}
.stamp:hover {
    cursor: default;
}
.pseudo-click:hover {
    cursor: pointer;
}
.clickable:hover {
    border-width: 4px !important;
    cursor: pointer;
}
.focustext {
    border: 2px solid #a3f0f7;
    background-color: #d1fbff;
}
.exit {
    border: 2px solid #2a9146;
    background-color: #45ed72;
    border-radius: 20px;
    max-width: max-content !important;
}

/* FLOWCHART MECHANICS */

#flowchart {
    display: grid;
    grid-template-areas:
    '. . exit-meth . exit-formol . . .'
    'alcohol . to-exit1 . to-exit2 . focus .'
    'breakdown to-meth methanol to-formol formol to-dopamine focus up'
    'to-ethanol adh breakdown-meth katergeil katergeil dopamine focus up'
    'ethanol toxicity diuresis katergeil katergeil . conditioning up'
    'to-acetal toxicity to-dehydration katergeil katergeil reinforcement to-endo up'
    'acetaldehyde toxicity dehydration katergeil katergeil pleasure endorphins up'
    'to-acetate toxicity vomiting katergeil katergeil suppression . up'
    'acetate toxicity dizziness transition1 transition1 transition2 transition3 coping'
    'to-exit3 hypoglycemia ache . stress transition4 myopia .'
    'exit-acetate . . . stress . myopia .';
    grid-template-columns: fit-content(15vw) auto auto fit-content(15vw) fit-content(15vw) auto auto fit-content(15vw);
    text-align: center;
    padding: 0 0.8em;
    font-size: min(1.35vw, 16px);
}
.cell {
    position:relative;
    min-height: 8vh;
    min-width: 1em;
}
svg {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    min-height: 1em;
}
.stamp {
    z-index: 2;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 0.2em;
    font-family:monospace;
}


/* FONT-SIZE */

.start {
    font-size: 1.6em;
}
.derivative, .panic {
    font-size: 1.5em;
}
.symptom, .reaction {
    font-size: 1.4em;
}
.derivative3, .symptom2, .hormone, .derivative2, .exitup, .exitdown {
    font-size: 1.3em;
}
.symptom3, .focus, .good {
    font-size: 1.1em;
}

/* STAMP COLORS */

.start {
    border: 2px solid #7d95c9;
    background-color: #9fbcfc;
}
.derivative {
    border: 2px solid #6383c9;
    background-color: #749cf2;
}
.derivative2 {
    border: 2px solid #9184e8;
    background-color: #9e90fc;
}
.derivative3 {
    border: 2px solid #b18ee6;
    background-color: #c39cff;
}
.symptom {
    border: 2px solid #bbd180;
    background-color: #dffa98;
    border-radius: 5px;
}
.symptom2 {
    border: 2px solid #e6c960;
    background-color: #ffe175;
    border-radius: 7.5px;
}
.symptom3 {
    border: 2px dotted #dba163;
    background-color: #f7b977;
    border-radius: 10px;
    opacity: 0.8;
}
.reaction {
    border: 2px solid #c96c69;
    background-color: #fc9490;
    border-radius: 2.5px;
}
.hormone {
    border: 2px solid #d9809f;
    background-color: #f794b7;
    border-radius: 2.5px;
}
.good {
    border: 2px dotted #cc78b2;
    background-color: #f792d8;
    border-radius: 7.5px;
    opacity: 0.8;
}
.focus {
    border:0px solid #a3f0f7;
    background-color: #a3f0f7;
}
#focus {
    border:2px solid #a3f0f7;
    background-color: #d1fbff;
}
.adh {
    background-color: white;
}
.exitup {
    border-style: dotted solid solid solid;
    border-color:#45ed72;
    color: #2a9146;
    background-color: white;
    border-radius: 1px 1px 15px 15px;
}
.exitdown {
    border-style: solid solid dotted solid;
    border-color:#45ed72;
    color: #2a9146;
    background-color: white;
    border-radius: 15px 15px 1px 1px;
}
.dummy {
    visibility: hidden;
    padding: 0.2em;
    font-family:monospace;
    margin: 0 auto;
}

/* MOBILE */

#transition1mob, #transition2mob, #transition3mob, #transition4mob, #transition5mob, #to-endo-mob, #down, #down2, #down3 {
    display:none;
}
@media only screen and (max-width:775px) {
    #flowchart {
        grid-template-areas:
        '. . exit-meth exit-formol . . .'
        'alcohol . to-exit1 to-exit2 . focus .'
        'breakdown to-meth methanol formol to-dopamine focus up'
        'to-ethanol adh breakdown-meth . dopamine focus up'
        'ethanol toxicity diuresis . . conditioning up'
        'to-acetal toxicity to-dehydration . reinforcement to-endo up'
        'acetaldehyde toxicity dehydration . pleasure endorphins up'
        'to-acetate toxicity vomiting . suppression . up'
        'acetate toxicity dizziness transition1 transition2 transition3 coping'
        'to-exit3 hypoglycemia ache stress transition4 myopia .'
        'exit-acetate . . stress . myopia .';
        grid-template-columns: fit-content(15vw) auto auto 20% auto auto fit-content(15vw);
        font-size: 1.60vw;
    }
    #katergeil, #to-formol {
        display:none;
    }
    #katergeil-top {
        display: block;
    }
}
@media only screen and (max-width:500px) {
    #flowchart {
        grid-template-areas:
        '. . exit-meth exit-formol'
        'alcohol . to-exit1 to-exit2'
        'breakdown to-meth methanol formol'
        'to-ethanol adh breakdown-meth .'
        'ethanol toxicity diuresis .'
        'to-acetal toxicity to-dehydration .'
        'acetaldehyde toxicity dehydration ache'
        'to-acetate toxicity dizziness vomiting'
        'acetate hypoglycemia transition1mob transition1mob'
        'to-exit3 . transition2mob .'
        'exit-acetate . transition2mob stress'
        '. . transition3mob stress'
        'focus to-dopamine transition4mob transition4mob'
        'focus dopamine myopia transition5mob'
        'focus reinforcement pleasure coping'
        'down3 endorphins suppression down'
        'down3 to-endo-mob conditioning down'
        'down3 down2 down2 down2';
        grid-template-columns: repeat(4, 25%);
        font-size: 2.4vw;
    }
    #katergeil, #to-formol, #transition1, #transition2, #transition3, #transition4, #to-endo, #up{
        display:none;
    }
    #katergeil-top, #transition1mob, #transition2mob, #transition3mob, #transition4mob, #transition5mob, #to-endo-mob, #down, #down2, #down3 {
        display: block;
    }
    #to-dopamine {
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
    }
    #to-endo-mob {
        -moz-transform: scale(1, -1);
        -webkit-transform: scale(1, -1);
        -o-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
        transform: scale(1, -1);
    }
}
@media only screen and (max-width:350px) {
    #description {
        font-size: 14px;
    }
}

/* GRID NAMES */

#alcohol {
    grid-area: alcohol;
}
#exit-meth {
    grid-area: exit-meth;
}
#exit-formol {
    grid-area: exit-formol;
}
#breakdown {
    grid-area: breakdown;
}
#to-meth {
    grid-area: to-meth;
}
#methanol {
    grid-area: methanol;
}
#to-exit1 {
    grid-area: to-exit1;
}
#to-formol {
    grid-area: to-formol;
}
#formol {
    grid-area: formol;
}
#to-exit2 {
    grid-area: to-exit2;
}
#to-ethanol {
    grid-area: to-ethanol;
}
#ethanol {
    grid-area: ethanol;
}
#to-acetal {
    grid-area: to-acetal;
}
#acetaldehyde {
    grid-area: acetaldehyde;
}
#to-acetate {
    grid-area: to-acetate;
}
#acetate {
    grid-area: acetate;
}
#to-exit3 {
    grid-area: to-exit3;
}
#exit-acetate {
    grid-area: exit-acetate;
}
#adh {
    grid-area: adh;
}
#breakdown-meth {
    grid-area: breakdown-meth;
}
#toxicity {
    grid-area: toxicity;
}
#diuresis {
    grid-area: diuresis;
}
#to-dehydration {
    grid-area: to-dehydration;
}
#dehydration {
    grid-area: dehydration;
}
#hypoglycemia {
    grid-area: hypoglycemia;
}
#vomiting {
    grid-area: vomiting;
}
#dizziness {
    grid-area: dizziness;
}
#ache {
    grid-area: ache;
}
#stress {
    grid-area:stress;
}
#transition1 {
    grid-area:transition1;
}
#transition2 {
    grid-area:transition2;
}
#transition3 {
    grid-area: transition3;
}
#transition4 {
    grid-area:transition4;
}
#myopia {
    grid-area:myopia;
}
#coping {
    grid-area: coping;
}
#up {
    grid-area: up;
}
#conditioning {
    grid-area: conditioning;
}
#endorphins {
    grid-area: endorphins;
}
#to-endo {
    grid-area: to-endo;
}
#endogenous {
    grid-area: endogenous;
}
#exogenous {
    grid-area:exogenous;
}
#endo-to-exo {
    grid-area:endo-to-exo;
}
#to-dopamine {
    grid-area: to-dopamine;
}
#dopamine {
    grid-area: dopamine;
}
#pleasure {
    grid-area: pleasure;
}
#suppression {
    grid-area:suppression;
}
#katergeil {
    grid-area: katergeil;
}
#reinforcement {
    grid-area: reinforcement;
}
#transition1mob {
    grid-area: transition1mob;
}
#transition2mob {
    grid-area: transition2mob;
}
#transition3mob {
    grid-area: transition3mob;
}
#transition4mob {
    grid-area: transition4mob;
}
#transition5mob {
    grid-area: transition5mob;
}
#to-endo-mob {
    grid-area: to-endo-mob;
}
#down {
    grid-area: down;
}
#down2 {
    grid-area: down2;
}
#down3 {
    grid-area: down3;
}
#focus {
    grid-area: focus;
}