/*@font-face {
    font-family: Lettersketch;
    src: url(font/Lettersketch.ttf);
}

@font-face {
    font-family: Global;
    src: url(font/Global.ttf);
}*/

@font-face {
    font-family: Super Boom;
    src: url(font/SuperBoom.ttf);
}

html {
    background-color: aliceblue;
}

main {
    color:#222;
    width:70%;
    margin-left: auto;
    margin-right: auto;
    font-family: Helvetica;
}

.status_success {
    color: LimeGreen;
}

.status_error {
    color: FireBrick;
}

.titlepage {
    display: block;
    box-sizing: border-box;
    height: 100vh;
}

.hilfe {
    width: 50vw;
}

.arrowbox {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.arrow {
    border: solid #222;
    border-width: 0 1vw 1vw 0;
    display: inline-block;
    padding: 1vw;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.col {
    box-sizing: border-box;
    margin: 0;
    width: 33%;
    padding: 1em;
}

.col img {
    box-sizing: border-box;
    width: 100%;
    height: 13em;
    padding: .8em;
    border-style: solid;
    border-color: gainsboro;
    border-width: .4em;
    border-radius: .5em;
    background-color: ghostwhite;
}

.col img:hover {
    border-color: deepskyblue;
}

.col p {
    text-align: right;
}

#TOC li {
    list-style: none;
}

#TOC ul ul {
    padding-left: 1em;
    padding-bottom: .5em;
}

#TOC a {
    color: #222;
}

#TOC a:not(:hover) {
    text-decoration: none;
}

img {
    max-width: 100%;
}

@media only screen and (max-width: 1000px) {
    main {
        width: 100%;
    }
    
    .col {
        width: 100%;
        padding: 0;
    }
    
    .titlepage {
        height:100%;
    }
    
    .arrowbox {
        display:none;
    }
    
    .hilfe {
        width:100%;
    }
}