@charset "UTF-8";

@font-face {
    font-family: 'overpass';
    src: url('../src/font/overpass/overpass-mono-bold.eot');
    src: url('../src/font/overpass/overpass-mono-bold.eot?#iefix') format('embedded-opentype'),
    url('../src/font/overpass/overpass-mono-bold.woff2') format('woff2'),
    url('../src/font/overpass/overpass-mono-bold.woff') format('woff'),
    url('../src/font/overpass/overpass-mono-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

header, .indexicon {
    background: #000;
    padding: 0.6em;

    background: linear-gradient(
            to bottom,
            #111,
            #111 50%,
            #333 50%,
            #333
    );
    background-size: 100% 4px;
    animation: gradientMove 200ms ease infinite;
}


header h1 {
    margin: 10px 0 10px 10px;
    text-transform: uppercase;
    font-family: overpass, times, arial;
    font-weight: normal;
    font-style: normal;
    font-size: 4em;
}

header h1, .indexicon svg {
    color: #fff;
    text-shadow: 3px 2px 2px rgba(251, 12, 12, 1), 0px -1px 3px rgba(12, 250, 80, .5), -3px 0px 2px rgba(52, 80, 242, 1);
    animation: chromaticMove 4500ms ease infinite, pulse ease 200ms infinite;
}

h2, .indexlabel {
    text-transform: uppercase;
    font-family: overpass, times, arial;
    font-weight: normal;
    font-style: normal;
    color: #333333;
}

@keyframes gradientMove {
    0% {
        background-size: 100% 4px
    }
    50% {
        background-size: 100% 2px
    }
    100% {
        background-size: 100% 4px
    }
}

@keyframes pulse {
    0% {
        opacity: .9;
        transform: skewX(.5deg);
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: .9;
    }
    75% {
        opacity: 1;
        transform: skewX(.5deg);
    }
    100% {
        opacity: .9;
    }
}

@keyframes chromaticMove {
    0% {
        text-shadow: 3px 2px 2px rgba(251, 12, 12, 1), 0px -1px 3px rgba(12, 250, 80, .5), 0px 0px -2px rgba(52, 80, 252, 1);
    }
    50% {
        text-shadow: 3px 2px 2px rgba(251, 12, 12, 1), 0px -1px 3px rgba(12, 250, 80, .5), -3px 2px 3px rgba(52, 80, 252, 1);
    }
    100% {
        text-shadow: 3px 2px 2px rgba(251, 12, 12, 1), 0px -1px 3px rgba(12, 250, 80, .5), 2px -1px 2px rgba(52, 80, 252, 1);
    }
}

.inputnote {
    display: none;
}

.labnote {
    display: inline-block;
    padding: 2pt 5pt;
    background-color: #999999;
    font-size: 12pt;
    font-weight: 700;
    line-height: 14px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    text-transform: none;
    border: 1px solid rgba(0, 0, 0, .2);
    background-origin: border-box;
}

.inputnote:checked + .labnote0 {
    background-color: #CCCCCC;
}

.inputnote:checked + .labnote1 {
    background-color: #d32c46;
}

.inputnote:checked + .labnote2 {
    background-color: #f9a124;
}

.inputnote:checked + .labnote3 {
    background-color: #e8d827;
}

.inputnote:checked + .labnote4 {
    background-color: #82bb42;
}

.indexicon {
    text-align: center;
    width: 56px;
    padding: 14px;
}

.indexlabel {
    margin-top: 24px;
    font-size: 20pt;
}