$prim1_clr: #0F2C3E;
$prim2_clr: #A4B0B8;
$prim3_clr: #849098;
$sec1_clr: #E6E7E5;
$sec2_clr: #F4F4F4;
$acc_clr: #DEAA22;

$bg1: #E6E7E5;
$bg2: #F4F4F4;
$bg3: #333333;

$normalfont: "Ubuntu", Verdana, sans-serif;
$narrowfont: "Ubuntu Condensed", Verdana, sans-serif;
$monofont: Consolas, "DejaVu Sans Mono", Monaco, "Courier New", Courier, monospace;


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/**************** Fonts ****************/

/* latin */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    /*font-display: swap; does not work well with canvas? */
    src: url(Ubuntu_latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Ubuntu Condensed';
    font-style: normal;
    font-weight: 400;
    /*font-display: swap;*/
    src: url(UbuntuCondensed_latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    src: url(SpaceMono-Regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* FontAwesome 5 Free, only the solid version */
@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 900;
    /*font-display: swap; 'block' cause falling back makes no sense - but works bad with canvas? */
    src: url(fa-solid-900.woff2) format('woff2');
}

.fas {
    font-family: 'FontAwesome';
    font-weight: 900;
    font-style: normal;
    /* attempt to improve on OS X
    font-smooth: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    */
}

/**************** Main layout ****************/

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

main, header, footer {
    position: static;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    margin: 0;
}
main .content, header .content, footer .content {
    position: static;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    margin: 0;
}

main .content {
    position: absolute;
    top: 0px; bottom: 0; left: 0; right: 0;
    padding: 1em; margin: 0;  /* override centering for static position */
}
@media screen and (min-width: 1000px) {
    main .content { /* width-auto */
        left: calc(25% - 250px); right: calc(25% - 250px); width: calc(500px + 50%);
    }
    main .content.width-1000 {
        left: calc(50% - 500px); right: calc(50% - 500px); width: 1000px;
    }
    main .content.width-full,
    main .content.width-1500 {
        left: 0; right: 0; width: 100vw;
    }
}
@media screen and (min-width: 1500px) {
    main .content.width-1500 {
        left: calc(50% - 750px); right: calc(50% - 750px); width: 1500px;
    }
}


/**************** Base styling ****************/

body {
    background: $bg2;
    color: $prim1_clr;
    font-family: $normalfont;
    font-weight: normal;
    font-size: 110%;
}

.acc_color { color: $acc_clr; }
.normalfont { font-family: $normalfont; }
.narrowfont { font-family: $narrowfont; }

code, .monospace, .monofont { font-family: $monofont; }

code {
    font-size: 90%;
    color: #444;
    background: $sec2_clr;
    padding: 1px 5px;
    white-space: nowrap;
    border: solid 1px #e1e4e5;
}
pre > code {
    font-size: 80%;
    display: block;
    white-space: pre;
    padding: 1em;
    line-height: 140%;
}

p {
    line-height: 140%;
}

/**************** Links ****************/

a:link, a:visited, a:active {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid $acc_clr;
}
p a:link, p a:visited, p a:active, li a:link, li a:visited, li a:active {
    text-decoration: none;
}
a:hover, p a:hover {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid $acc_clr;
}

header a, footer a, a.link-icon {
    border: none !important;  /* disable for specific cases */
}

/**************** Headers ****************/

h1, h2, h3, h4 {
    color: $prim3_clr;
}
h1 {
    color: $prim1_clr;
}
h1 { font-size: 220%; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }
h2 > a:link, h2 > a:visited, h2 > a:active, h3 > a:link, h3 > a:visited, h3 > a:active {
    color: inherit;
}
h2 > a:hover, h3 > a:hover {
    text-decoration: none;
}
h2 {
    font-family: $monofont;
}

hr {
    height: 1px;
    background: #ccc;
    border: none;
}

/**************** Buttons appear in the app, and e.g. /account ****************/

button, a.button {
    display: inline-block;
    background: #eee;
    color: $prim1_clr;
    padding: 0.3em 0.4em;
    border-radius: 4px;
    border: 1px solid #bbb;
    transition: background 0.2s;
}
button:hover, a.button:hover {
    text-decoration: none;
    background: #f5f5f5;
}
button:disabled, button:disabled:hover {
    background: #ddd;
    color: #888;
}
button.whitebutton {
    border: none;
    color: $prim1_clr;
    background: #fff;
    padding: 0.5em 0.6em;
    margin: 4px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.1s;
}
button.whitebutton:hover { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); }
button.whitebutton:disabled { color: #aaa; }
button.whitebutton:disabled:hover { background: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); }
