/* Global style */
:root {
    --klereherrie-logo:#00FFDD;
    --klereherrie-background-1:#00B4E8;
    --klereherrie-background-2:#0025FF;
}
body {
    font: 1em sans-serif;
    color: White;
    background: radial-gradient(var(--klereherrie-background-1),var(--klereherrie-background-2)) no-repeat center;
    background-size: cover;
    margin:0;
    min-height:calc(100vh - 50px);
    width:100%;
}
a {
    color:white;
}
header {
    width: 100%;
    text-align: center;
    vertical-align:middle;
    font: 5em sans-serif;
    color: var(--klereherrie-logo);
}
main {
    width:calc(100% - 20px);
    margin:auto;
    margin-bottom:50px;
    padding:10px;
    text-align: center;
}
footer {
    position: fixed;
    bottom:0;
    width:100%;
    text-align:center;
    height:50px;
    line-height:50px;
    background-color: var(--klereherrie-background-2);

}
nav {
    background: var(--klereherrie-background-2);
    text-align: center;
}
nav > a {
    margin: .2em .5em;
    font:2em sans-serif;
    color: var(--klereherrie-logo);
    text-decoration:none;
    display:inline-block;
    transition: color .2s linear;
}
nav > a:hover {
    color: White;
}
input[type="submit"] {
    height: 2em;
}
input[type="text"] {
    height: 1.5em;
    width: 15em;
}
iframe {
    border: 0;
    min-width: 50%;
    height: 20em;
}
a.button {
    cursor: pointer;
}

/* Mobile optimization */
@media (orientation: portrait) {
    body {
        font: 3vw sans-serif;
    }
    nav > a {
        margin: 5px;
        font:5vw sans-serif;
    }
    footer {
        position: fixed;
        bottom:0;
        width:100%;
        text-align:center;
        height:50px;
        line-height:50px;
        background-color: var(--klereherrie-background-2);
    
    }
    input[type="submit"] {
        height:4vw;
        font: 3vw sans-serif;
    }
    input[type="text"] {
        height:3vw;
        width:30vw;
        font: 3vw sans-serif;
    }
    iframe {
        border: 0;
        width: 100%;
        height: 400px;
    }
}

/* Media Catalog */
div#media-catalog > div {
    display:inline-block;
    vertical-align:top;
    margin:1em;
    width: 15em;
}
div#media-catalog > div > span {
    display:block;
    text-align:left;
}
div#media-catalog > div h2 {
    display:block;
    text-align:left;
}
.media-head > span {
    display: inline-block;
    vertical-align: top;
}
audio {
    height: 1.5em;
}

/* Mixer */
#mixer {
    display: table;
    margin: 1em auto;
}
.channel {
    display: table-row;
}
.channel > * {
    display: table-cell;
    margin: auto .5em;
}