@font-face {
    font-family: 'KarioDuplexVar';
    src: URL('fonts/Kario39C3Var-Roman.ttf') format('truetype');
    src: URL('fonts/Kario39C3VarWEB-Roman.woff') format('woff');
    src: URL('fonts/Kario39C3VarWEB-Roman.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    src: URL('fonts/OfficerSansCondWeb-Regular.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    font-weight: bold;
    font-style: italic;
    src: URL('fonts/OfficerSansCondWeb-BoldItalic.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    font-weight: bold;
    src: URL('fonts/OfficerSansCondWeb-Bold.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    font-style: italic;
    src: URL('fonts/OfficerSansCondWeb-Italic.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    src: URL('fonts/OfficerSansWeb-Regular.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    font-weight: bold;
    font-style: italic;
    src: URL('fonts/OfficerSansWeb-BoldItalic.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    font-weight: bold;
    src: URL('fonts/OfficerSansWeb-Bold.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    font-style: italic;
    src: URL('fonts/OfficerSansWeb-Italic.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-Italic.woff2') format('woff2');
}

:root {
    --color-dark: #141414;
    --color-neutral: #faf5f5;
    --color-primary: #00ff00;
    --color-secondary: #9673ff;
    --color-additional-01: #ff3719;
    --color-additional-02: #66f2ff;

    --color-primary-tint-01: #009900;
    --color-primary-tint-02: #00be00;
    --color-primary-tint-03: #00d300;
    --color-primary-tint-04: #00ea00;
    --color-primary-tint-05: #a3ff90;
    --color-primary-tint-06: #ccffbe;
    --color-primary-tint-07: #ebffe5;

    --color-secondary-tint-01: #4d2eed;
    --color-secondary-tint-02: #5c33f4;
    --color-secondary-tint-03: #7952fe;
    --color-secondary-tint-04: #b69dfe;
    --color-secondary-tint-05: #d4c4fe;
    --color-secondary-tint-06: #efe7ff;
}

@keyframes font_weight_wave {
    from {
        font-weight: 10;
    } to {
        font-weight: 100;
    }
}



html, body {
    background: var(--color-dark);
    color: var(--color-neutral);
    font-family: OfficerSans;
    margin: 0;
}
h1 {font-family: KarioDuplexVar;  font-size: 4em;   font-weight: 100; text-transform: uppercase; margin-bottom: .3em}
h2 {font-family: KarioDuplexVar;  font-size: 2em;   font-weight: 80;    color: var(--color-primary); font-kerning: none;}
h3 {font-family: OfficerSansCond; font-size: 1.5em; font-weight: light; color: var(--color-secondary)}




main {
    position: relative;
    max-width: 76em; margin: auto;
    width: calc(100% - 4em);
    padding-bottom: 16em;
}
.half, .hall {display: inline-block; width: 48%; min-width: 369px; vertical-align: top; margin: 0 1.6px;}
a {text-decoration: none; color: var(--color-neutral);}

.talkinfo {
    max-height: 4em; overflow: hidden;
    font-size: 1em; margin-bottom: 1em;
}
.talkinfo span {
    font-weight: bold;
    color: var(--color-secondary)
}

.links div:has(a) {
    padding: .3em 0;
}

.links a {
    padding: .24em .2em .16em .2em;
    font-family: KarioDuplexVar; font-size: 2em; overflow: hidden;
}

.links a:hover::after, .links a:focus::after {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBsYXktaWNvbiBsdWNpZGUtcGxheSI+PHBhdGggZD0iTTUgNWEyIDIgMCAwIDEgMy4wMDgtMS43MjhsMTEuOTk3IDYuOTk4YTIgMiAwIDAgMSAuMDAzIDMuNDU4bC0xMiA3QTIgMiAwIDAgMSA1IDE5eiIvPjwvc3ZnPg==');
}

.links div:nth-child(3) a {color: var(--color-additional-02)}
.links div:nth-child(4) a {color: var(--color-primary)}
.links div:nth-child(5) a {color: var(--color-additional-01)}

.links div a:hover, .links div a:focus {color: var(--color-dark)}
.links div:nth-child(3) a:hover, .links div:nth-child(3) a:focus {background: var(--color-additional-02)}
.links div:nth-child(4) a:hover, .links div:nth-child(4) a:focus {background: var(--color-primary)}
.links div:nth-child(5) a:hover, .links div:nth-child(5) a:focus {background: var(--color-additional-01)}


.card {
    background: var(--color-dark);
    box-shadow: 0 0 1em .5em #0F000A;
}

.testchannel {
    position: fixed; top: 0; right: 0;
    transform: rotate(-90deg) translate(-50%, 50%);
    padding: .5em;
    color: var(--color-secondary);

    &:hover {
        background: var(--color-secondary);
        color: var(--color-dark);
    }
}


#miniplayer {
    display: none;
    position: fixed; bottom: 1em; right: 1em;
    height: 12em; width: 16em;

}
#miniplayer h2, #miniplayer h3 {
    font-size: 1.4em; white-space: nowrap;
    text-align: left;
    margin: .4em 0 0 .4em;
}
#playertitle {
    font-family: OfficerSansCond;
    color: var(--color-neutral);
    overflow: hidden;
}
#buttons {text-align: center;}
#buttons button {
    display: inline-block; font-size: 1em;
    margin: 1.2em 1.4em;
    width: 5em; height: 5em;
    border: none; outline: none; padding: 0;
    border-radius: 50%;
    cursor: pointer;
}
#buttons #mute {background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXZvbHVtZS1vZmYtaWNvbiBsdWNpZGUtdm9sdW1lLW9mZiI+PHBhdGggZD0iTTE2IDlhNSA1IDAgMCAxIC45NSAyLjI5MyIvPjxwYXRoIGQ9Ik0xOS4zNjQgNS42MzZhOSA5IDAgMCAxIDEuODg5IDkuOTYiLz48cGF0aCBkPSJtMiAyIDIwIDIwIi8+PHBhdGggZD0ibTcgNy0uNTg3LjU4N0ExLjQgMS40IDAgMCAxIDUuNDE2IDhIM2ExIDEgMCAwIDAtMSAxdjZhMSAxIDAgMCAwIDEgMWgyLjQxNmExLjQgMS40IDAgMCAxIC45OTcuNDEzbDMuMzgzIDMuMzg0QS43MDUuNzA1IDAgMCAwIDExIDE5LjI5OFYxMSIvPjxwYXRoIGQ9Ik05LjgyOCA0LjE3MkEuNjg2LjY4NiAwIDAgMSAxMSA0LjY1N3YuNjg2Ii8+PC9zdmc+') center/50% no-repeat, var(--color-additional-01)}
#buttons #stop {background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNxdWFyZS1pY29uIGx1Y2lkZS1zcXVhcmUiPjxyZWN0IHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgeD0iMyIgeT0iMyIgcng9IjIiLz48L3N2Zz4=') center/50% no-repeat, var(--color-additional-01)}
#buttons #play {display: none; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBsYXktaWNvbiBsdWNpZGUtcGxheSI+PHBhdGggZD0iTTUgNWEyIDIgMCAwIDEgMy4wMDgtMS43MjhsMTEuOTk3IDYuOTk4YTIgMiAwIDAgMSAuMDAzIDMuNDU4bC0xMiA3QTIgMiAwIDAgMSA1IDE5eiIvPjwvc3ZnPg==') center/50% no-repeat, var(--color-primary)}
#buttons.stopped #mute {display: none;}
#buttons.stopped #stop {display: none;}
#buttons.stopped #play {display: inline-block;}
#buttons button:hover {opacity: 70%;}