/* lightmode */
:root {
    --green: #47ba47;
    --orange: #f3bf44;
    --red: #e32929;

    --white: #FFF;
    --off-white: #F0F0F0;
    --lightgray: lightgray;
    --gray: gray;
    --black: black;

    --iconsize: 8vw;
}

/* darkmode */
body.dark {
    --green: #47ba47;
    --orange: #f3bf44;
    --red: #e32929;

    --white: #1e1e1e;
    --off-white: #3d3d3d;
    --lightgray: #313537;
    --gray: darkgray;
    --black: #e8e6e3;

    --iconsize: 8vw;
}

body {
    color: var(--black);
}

* {
    font-family: sans-serif;
    font-weight: lighter;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
}

header, div.body, footer {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--white);
    flex-grow: 0;
}

header, footer {
    z-index: 1;
    box-shadow: 0 0 2rem var(--lightgray);
}

header > h2, .node, .arrow {
    color: var(--gray);
}

div.body > * {
    text-align: center;
    flex: auto;
}



div.body {
    display: flex;
    flex-direction: row;
    background-color: var( --off-white );
    flex-grow: 5;
    align-items: stretch;
}

h1 {
    font-size: 3em;
    margin-bottom: 0;
}

h1 > .serverid {
    font-family: monospace;
    font-weight: lighter;
    font-size: .4em;
}

footer {
    display: flex;
    flex-direction: row;
    flex-grow: .5;
}

header > *, footer > * {
    padding-left: 1rem;
}

footer > * {
    flex-grow: 1;
}

.node {
    position: relative;
}

.node > span {
    padding: 2rem;
}

.node .icon > svg {
    width: var(--iconsize);
    height: var(--iconsize);
}

.arrow {
}

.arrow > svg {
    width: var(--iconsize);
    height: var(--iconsize);
}

.statusicon > svg {
    width: calc( var(--iconsize) / 2 );
    height: calc( var(--iconsize) / 2 );
    background-color: var(--white);
    border-radius: 50%;
}

.node span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.body > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.node h4 {
    color: var(--black);
}

.node .nodename {
    font-size: 1.5em;
}

.node .nodestatus {
    font-size: 1.25em;
}

.statusicon {
    margin-top: -1.5em;
}

.node.working .statusicon, .node.working .nodestatus {
    color: var(--green);
}

.node.error .statusicon, .node.error .nodestatus {
    color: var(--red);
}

/* der scheiss pfeil auf die error node */
.node.error::after {
    content: "";
    width: 0;
    height: 0;
    border: 1.5em var( --white ) solid;
    border-bottom-color: transparent;
    border-right-color: transparent;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    transform:  rotate(45deg);
    position: absolute;
    bottom: -1.5rem;
    z-index: 2;
}

.animation {
    position: absolute;
    display: inline;
    height: 20em;
    top: 0em;
    left: -70%;
    z-index: 99;
}

.animation canvas {
    height: 100%;
}

#video {
    display: none;
}


/* mobile */
@media (pointer:coarse) {
    header h1 {
        font-size: 7rem;
        display: flex;
        flex-direction: column;
    }

    header .serverid {
        padding-top: 2rem;
        font-size: 3rem;
    }

    header h2 {
        font-size: 5rem;
    }

    div.body {
        flex-direction: column;
    }

    .body .arrow {
        display: none;
    }

    .body > .node {
        align-items: flex-start;
        margin: 1em 0 1em 0;
        align-items: stretch;
    }

    .node > span {
        flex-direction: row;
        font-size: 4rem;
        text-align: left;
        flex-wrap: wrap;
        justify-content: left;

        border-bottom: 2px solid var(--lightgray);
    }

    .node:nth-last-child(2) > span {
        border-bottom: none;
    }

    .node > span > h4 {
        width: 100%;
        margin: 0;
        font-size: 3rem;
    }

    .node .nodename {
        font-size: 4rem;
        padding-right: 2rem;
    }
    
    .node .nodestatus {
        font-size: 4rem;
    }
    
    .node .icon, .node .statusicon {
        display: none;
    }

    .node::after {
        display: none;
    }

    footer {
        font-size: 3rem;
        flex-direction: column;
    }

    span.animation {
        display: none
    }
}