/*
 * gkb.sh style sheet
 *
 * Color palette:
 * #283d79 (Primary)
 * #567cdd (Primary bright)
 *
 * #bbd0ff (White ish blue)
 * #bfccea (White ish grey)
 *
 * Shades from light to darks
 * #394873
 * #283351
 * #151d30
 * #0f1523
 * #090c14
 * #080a12
 */

html {
    background: fixed repeat url("/assets/img/bg.png"), #0f1523;
}

body {
    color: #bfccea;
    font-family: "Courier Prime Sans", serif;
    font-size: 20px;
}

hr {
    border: 1px solid #394873;
    border-top: 0px;
    box-shadow: 1px 1px 0 0 black;
}

h1, h2, h3, h4, h5, h6 {
    color: #bbd0ff;
}

header {
    text-align: center;
}

a {
    color: #bbd0ff;
}
    a:hover {
        background-color: #bbd0ff;
        color: #090c14;
    }

span[title] {
    text-decoration: underline dotted;
}

main {
    margin-left: 240px;
    max-width: 800px;
}

footer {
    font-size: 0.8em;
    text-align: center;
}

blockquote {
    font-style: italic;
}

::selection {
    background-color: #283351;
    color: #bbd0ff;
}

.sidebar {
    padding: 10px;
    position: fixed;
    margin: 0 19px;
    left: 0;
    top: -10px;
    height: 100%;
    width: 180px;
    background-color: #090c14;
    border: 1px solid #394873;
    box-shadow: inset 1px 0 0 0 black, 5px 0 8px -5px black;

}

#logo {
    width: 180px;
    height: 180px;
    background: url("/assets/img/avali.png");
    background-size: 200%;

}

#logo-floof {
    width: 180px;
    height: 180px;
    background: url("/assets/img/floof.png");
    background-size: 300%;
}

/*
#logo-floof:hover {
    background-position-x: 50%;
}
*/

#logo-floof:active {
    background-position-x: 100%;
}