/* font */

@font-face {
    font-family: Hack;
    src: url(/fnt/Hack-Regular.ttf);
}
@font-face {
    font-family: Hack;
    src: url(/fnt/Hack-Italic.ttf);
    font-style: italic;
}
@font-face {
    font-family: Hack;
    src: url(/fnt/Hack-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: Hack;
    src: url(/fnt/Hack-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}

/* colours */

:root {
    --text-1: #888;
    --text: #ddd;
    --text1: #e8e8e8;
    --background-1: #111;
    --background: #222;
    --background1: #333;
    --background2: #444;
    --background4: #666;
    --yellow: #fe3;
    --yellow-1: #c93;
    --yellow-bg: #0f0a00;
    --green: #2a4;
    --green1: #4f7;
    --green-bg: #000d01;
    --red: #a34;
    --red1: #f46;
    --red-bg: #0f0001;
    --blue: #37d;
    --blue1: #4bf;
    --blue-bg: #000a0d;
    --purple: #83b;
    --purple1: #d4f;
    --purple-bg: #0a000d;
}

/* size variables*/

:root {
    --text-page-width: 79.585ch; /* 80 characters plus a tiny bit because the unit seems to not exactly match a character */ /* never mind actually minus a tiny bit */
    --layout-padding: 1rem;
    --layout-border: 2px;
}

/* basic tags */

body {
    font-family: "Hack", monospace;
    font-size: 1em;
    line-height: 1.5;
    color: var(--text);
    --bg-scaling: 3;
    background: var(--background-1) url("/img/master-futsi-website.png") repeat 0 0/calc(182px * var(--bg-scaling)) calc(118px * var(--bg-scaling)) fixed;
    margin: 0;
    image-rendering: pixelated;
    word-wrap: break-word;
}
body > * {
    image-rendering: auto;  /* to restore regular scaling from the pixel scaling applied to body for the background image */
}
h1, h2, h3, h4, h5, h6 {
    color: var(--yellow);
    margin-top: var(--layout-padding);
    margin-bottom: var(--layout-padding);
}
h1 {
    font-size: 1.6em;
}
h2 {
    font-size: 1.4em;
}
h3 {
    font-size: 1.2em;
}
h4 {
    font-size: 1.1em;
}
h5 {
    font-size: 1em;
}
h6 {
    font-size: 1em;
}
h1::before {
    color: var(--text-1);
    content:"# ";
}
h2::before {
    color: var(--text-1);
    content:"## ";
}
h3::before {
    color: var(--text-1);
    content:"### ";
}
h4::before {
    color: var(--text-1);
    content:"#### ";
}
h5::before {
    color: var(--text-1);
    content:"##### ";
}
h6::before {
    color: var(--text-1);
    content:"###### ";
}
strong {
    color: var(--text1);
}
a:link, a:visited {
    color: var(--green);
}
a:hover, a:active {
    color: var(--green1);
}
a:active {
    position: relative;
    left: 2px;
    top: 2px;
}
a[download]:link, a[download]:visited, .download {
    color: var(--blue);
}
a[download]:hover, a[download]:active, .download {
    color: var(--blue1);
}
img {
    display: block;
}
code, pre {
    background-color: var(--purple-bg);
    border-color: var(--purple);
    color: var(--purple);
    font-size: 1rem;
    font-family: "Hack", monospace;
}
pre {
    overflow: scroll;
    margin-left: var(--layout-padding);
    margin-right: var(--layout-padding);
}
kbd {
    background-color: var(--text);
    color: var(--background);
    font-size: 1rem;
    border-radius: calc(1em / 5);
    padding: 0 1ch;
    display: inline-block;
    text-align: center;
}
var {
    background-color: var(--background2)
}

/* main area */

main > * {
    margin-left: var(--layout-padding);
    margin-right: var(--layout-padding);
}
h1 {
    border-bottom: var(--layout-border) solid var(--background-1);
    background: var(--background1);
    padding: var(--layout-padding);
    margin: 0;
}
h1 + *, hr + * {
    margin-top: var(--layout-padding);
}
main {
    background-color: var(--background);
    width: min(calc(var(--text-page-width) + (2 * var(--layout-padding)) + (2 * var(--layout-border))), calc(100% - (2 * var(--layout-border)))); /* width as set in variables (plus paddings and borders) or the full screen width (minus borders) if screen is smaller than variable */
    margin: auto;
    border: var(--layout-border) solid var(--background4);
}
hr {
    height: var(--layout-border);
    background-color: var(--background-1);
    border-width: 0;
    margin: 0;
}

/* extra classes */

.warning, .info, pre {
    border-left: var(--layout-border) solid;
    padding-left: calc(1ch - var(--layout-border));
    padding-right: 1ch;
}
pre > code {
    padding-right: 1ch;
}
.warning {
    background-color: var(--red-bg);
    border-color: var(--red1);
}
.info {
    background-color: var(--yellow-bg);
    border-color: var(--yellow-1);
}
iframe.video{

}