/* vim: set ts=4 sw=4 sts=4 et ai: */
@Font-face {
    font-family: Chunk;
    src: url('/static/Chunkfive-webfont.woff');
}
@Font-face {
    font-family: Lexend;
    src: url('/static/Lexend-Regular.ttf');
    font-weight: 400;
}
@Font-face {
    font-family: Lexend;
    src: url('/static/Lexend-Bold.ttf');
    font-weight: 700;
}
* {
    margin: 0; padding: 0;
}
body {
    font-family: Chunk, sans-serif;
    background: #8e00dd url('/static/scanlines.png');
    box-shadow: inset 0 0 196px -80px black;
    overflow-y: hidden;
}
html, body {
    height: 100%;
}
body:not(.sensible) > div {
    width: 100%;
    position: absolute;
    top: 45%;
}
body > div > h2 {
    text-align: center;
    color: #FFF;
    font-weight: normal;
    font-size: 64px;
    text-shadow: 0 0 6px #000;
}


*::selection {
    background: #ff0022;
}
*::-moz-selection {
    background: #ff0022;
}

button::selection {
    background: none;
}
button::-moz-selection {
    background: none;
}

button.epilepsy {
    position: absolute;
    top: 16px; left: 16px;
    /* width: 128px; height: 24px; */
    width: 128px; height: 36px;
    font-height: 16px;
    font-weight: bold;
    background: #eee none;
    border: 1px solid #000;
    opacity: 0.7;
    filter: alpha(opacity=70); /* ie wargharghagrgh */
    border-radius: 6px;
}
button.epilepsy:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); /* ie */
}
button.epilepsy:focus {
    outline: 0;
    opacity: 0.9;
    filter: alpha(opacity=90); /* ie */
}
button.epilepsy:active {
    opacity: 1;
    filter: alpha(opacity=100); /* ie */
}
button.epilepsy::-moz-focus-inner { /* moz/ff/gecko */
    border: 0;
}
button.epilepsy:not(.pressed) > .off { display: none; }
button.epilepsy.pressed > .on { display: none; }

a.social {
    position: absolute;
    bottom: 10px;
    text-indent: -9999px;
    background-image: url("/static/social.png");
    width: 46px; height: 46px;
    opacity: 0.6;
    filter: alpha(opacity=60); /* ie */
}
a.social:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* ie */
}
a.social[title=Facebook] {
    background-position: 0 0;
    /* right: 234px; */
    right: 178px;
}
a.social[title=Twitter] {
    background-position: -46px 0;
    /* right: 178px; */
    right: 122px;
}
a.social[title="Google+"] {
    background-position: -92px 0;
    /* right: 122px; */
}
a.social[title=Instagram] {
    background-position: -138px 0;
    right: 66px
}
a.social[title=LinkedIn] {
    background-position: -184px 0;
    right: 10px;
}
aside {
    position: absolute;
    bottom: 20px;
    left: -180px;
    transform: rotate(45deg);
    color: #fff;
    background-color: #dd7d00;
    padding: 3px 200px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    opacity: 0.6;
    cursor: default;
}
aside:hover { opacity: 1; }

/* general */
body.sensible {
    font-family: Lexend, sans-serif;
    padding: 32px 24px;
    --primary-color: #e8e6e3;
    --negative-color: #222;
    color: var(--primary-color);
}
div.container {
    border: 1px solid #88f;
    border-radius: 8px;
    background-color: var(--negative-color);
    margin: 0 auto;
    padding: 24px;
    max-width: 800px;
    width: 90vw;
}
.sensible h1 {
    text-align: center;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: .5em;
    margin-bottom: 1em;
}
.sensible ul {
    display: flex;
    flex-flow: row wrap;
}
.sensible ul > li {
    flex-grow: 1;
    flex-shrink: 1;
    list-style: none;
    padding: 8px;
    margin: 0 24px 24px;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    width: 40%;
}
.sensible ul h3 {
    text-align: center;
    padding: .5em 0;
}
.sensible ul ul li {
    border: 0 none;
    width: auto;
    text-align: center;
    color: var(--negative-color);
    background-color: var(--primary-color);
    width: 8%;
    margin: 0 1%;
    padding: .5em 0;
    font-size: 10px;
}
.sensible ul ul li em {
    font-size: 26px;
    font-style: normal;
    text-shadow: black 0px 0px 2px;
}
.sensible p {
    margin: 1em 0;
}