/* ##### MARK: - Basic setup */
* {
    margin: 0;
    padding: 0;
    border: none;
}

html {
    height: 100%;
    width: 100%;

    font-family: 'San Franciso', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
    margin-top: 3em;
    /* Strange height scrollng? -> -3px */
    height: calc(100% - 3em);
    width: 100%;

    /*
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    */
}

hr {
    margin: 1em 0;
    border-bottom: 1px solid #CCC;
}

h1, h2, h3, h4 {
    color: #222;
}


/* ##### MARK: - Tags */
.mainWrapper {
    height: 100%;
    display: flex;
    flex-wrap: wrap;

    overflow: hidden;
}


/* ##### MARK: - Header */
#mainHeader{
    position: fixed;
    left: 0;
    right: 0;
    top:  0;

    z-index: 100;

    height: 3em;
    padding: 0em 0.75em;

    border-bottom-style: solid;
    border-bottom-color: #CCC;
    border-bottom-width: 1px;
}

#mainHeader a, .copyrightHint {
    text-decoration: none;
    color: #666;
}
#mainHeader a:hover {
    color: #222;
}

.titleWrapper {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: no-wrap;
    justify-content: center;
    align-items: center;
}

.titleWrapper > img {
    height: 1.5em;
    margin: -0.25em 0.75em;
}

.headline {
    font-size: 1.25em;
    font-weight: bold;
}

.flexBetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transparentBackground {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    -moz-backdrop-filter: blur(10px) saturate(150%);
    -o-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
}

/* ##### MARK: - Canvas setup */
.canvasWrapper {
    position: relative;
    background-color: #FFF;
    margin: 0;
}
.canvasWrapper > span,
.canvasWrapper > .overlapPrevious {
    position: absolute;
}
.canvasWrapper > .overlapPrevious {
    top: 0;
    left: 0;
    background-color: none;
}
.canvasWrapper > .cwTop {
    top: 0.5em;
    pointer-events: none;
}
.canvasWrapper > .cwBottom {
    bottom: 0.5em;
}
.canvasWrapper > .cwLeft {
    left: 0.5em;
}
.canvasWrapper > .cwRight {
    right: 0.5em;
}

.cwLeft.cwTop {
    background-color: #F5F5F5;

    background: rgba(245, 245, 245, 0.7);
    -webkit-backdrop-filter: blur(5px) saturate(150%);
    -moz-backdrop-filter: blur(5px) saturate(150%);
    -o-backdrop-filter: blur(5px) saturate(150%);
    backdrop-filter: blur(5px) saturate(150%);

    color: #666;
    top: 0;
    left: 0;
    padding: 0.5em;
    border: 1px solid #DDD;
    border-left: none;
    border-top: none;
}