@font-face {
    font-family: "dejavu";
    src: url('DejaVuSans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "dejavu-mono";
    src: url('DejaVuSansMono-webfont.woff') format('woff'),
         url('DejaVuSansMono-webfont.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

:root {
    --main-blue: #0000c8;
    --main-red: #640000;
    --main-purple: #800050;
    --main-green: #006432;
    --main-yellow: #5f5f00;
    --foreground-grey: #999;

    --primary-radius: 6px;

    font-family: "dejavu";
}

*::selection {
    background-color: #c47676;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "dejavu-mono";
}

h1::before {
    content: "# ";
}

h1 {
    color: var(--main-green);
    font-size: 30pt;
}

h2::before {
    color: var(--main-yellow);
    content: "def ";
}

h2 {
    margin-top: 3rem;
}

h2::after {
    content: "():";
    opacity: 35%;
}

a {
    transition: text-shadow 0.3s;
    color: #00f;
    text-decoration: none;
}

a:visited {
    color: #a905c0;
}

a:link:hover {
    text-shadow: #26049e 5px 4px 11px;
}

a:visited:hover {
    text-shadow: #5a015d 5px 4px 11px;
}

a:focus {
    text-shadow: #26049e 5px 4px 11px;
}

body {
    margin: 0;
    background: #393939 center center url("grid.png");
}

body > div {
    border-left: 1px solid #787878;
    border-top: 1px solid #787878;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

div {
    background-color: #686868;
}

select {
    padding: 3px 10px;
    color: #fff;
    background: linear-gradient(#505050, #373737);
    border: 1px solid #000;
    border-radius: var(--primary-radius);
}

select:open {
    color:#b6b6b6;
    background: linear-gradient(#373737, #505050);
}

button {
    background: linear-gradient(#a3a3a3, #8b8b8b);
    border: 1px solid #000;
    border-radius: var(--primary-radius);
    min-width: 8rem;
    text-align: start;
}

button:hover {
    background: linear-gradient(#b2b2b2, #999);
}

button:active {
    background: linear-gradient(#565656, #717171);
    color: #fff;
}

p > img {
    width: 100%;
    border-radius: var(--primary-radius);
}

h2 ~ p, h2 ~ ul, h2 ~ span {
    margin-left: 2rem;
    margin-right: 2rem;
}

hr {
    margin: 3rem 0.5rem;
    text-align: center;
    height: 0;
    overflow: visible;
}

hr::after {
    content: "■";
    position: relative;
    top: -16px;
    padding: 4px;
    background: var(--foreground-grey);
    color: black;
}

.nav {
    display: flex;
    gap: 1rem;
}

.nav > * {
    font-size: 9pt;
    margin: 0;
}

.navlink {
    color: #000;
}

.navlink:visited {
    color: #000;
}

.navlink:link:hover {
    text-shadow: #111 5px 4px 11px;
}

.navlink:visited:hover {
    text-shadow: #111 5px 4px 11px;
}

.stats {
    margin-left:auto;
    margin-right: 1rem;
}

.stats > p {
    display: inline;
}

.stats > p::after {
    content: " |";
}

.stats > p:last-child::after {
    content: "";
}

.centered {
    width: 90vw;
    max-width: 960px;
    padding: 1rem;
    margin: 0 auto;
}

.main {
    background-color: var(--foreground-grey);
    min-height: 80vh;
}

.footer {
    height: 100%;
}

.kl-language {
    font-family: "dejavu-mono";
    display: block;
    margin-left: 2rem;
    margin-right: 2rem;
    padding: 0.5rem 1rem;
    color: #fff;
    background-color: #1a1b26;
    border: 1px solid #ddd;
    border-radius: var(--primary-radius);
}

.kl-call {
    color: #709ae8;
}

.kl-number {
    color: #e56132;
}

.kl-operator {
    color: #af7ebd;
}

.hidden {
    display: inline;
    position: absolute;
    height: 1px;
    font-size: 1px;
    color: #0000;
    overflow: hidden;
}