:root {
    --font-color: rgb(0, 0, 0);
    --link-color: rgb(61, 45, 237);
    --link-hover-color: rgb(172, 95, 216);
    --link-active-color: rgb(228, 109, 214);
}

@font-face {
    font-family: "Domine";
    src: url("/fonts/Domine-Regular.ttf") format("truetype");
    font-display: swap;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: rgb(227, 242, 216);
    font-family: "Domine";
    font-size: larger;
    color: var(--font-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (width <= 800px) {
    body {
        font-size: medium;
    }
}

h1::before, h1::after {
    content: "✷";
    padding: 10px;
}

h2::before, h2::after {
    content: "✦";
    padding: 10px;
}

p, div:has(h1), div:has(h2), svg, hr, img {
    max-width: min(1000px, 100%);
    margin: auto;
}

p {
    text-indent: 2em;
    line-height: 1.5;
}

code {
    white-space: nowrap;
    font-size: larger;
}

em code {
    font-style: normal;
}

hr {
    width: min(1000px, 100%);
    height: 1px;
}

/* Tables */

div:has(table) {
    max-width: min(1200px, 100%);
    overflow-x: auto;
    margin: auto;
}

table {
    border-spacing: 0;
}

th {
    border-bottom: 1px solid black;
}

td, th {
    padding: 10px;
}

td:not(:last-child), th:not(:last-child) {
    border-right: 1px solid black;
}

/* Links */

a, a svg {
    text-decoration: underline;
    color: var(--link-color);
}

a:has(svg) {
    white-space: nowrap;
}

svg.icon {
    width: 0.8em;
    height: 0.8em;
}

a:is(:hover, :focus), a:is(:hover, :focus) svg {
    color: var(--link-hover-color);
    text-decoration: none;
    outline: none;
}

a:active, a:active svg {
    color: var(--link-active-color);
    outline: none;
}

.backlink:target, .footnote:target {
    animation: flash_link 1s linear;
}

/* Editor */

.editor {
    background-color: white;
    width: min(1200px, 100%);
    margin: auto;
    outline: 1px solid black;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cm-editor {
    padding: 5px;
    padding-bottom: 0;
    width: min(1200px, 100%);
}

.editor:has(.cm-focused) {
    outline: 2px solid black;
}

.cm-focused {
    outline: none !important;
}

.keyword {
    color:rgb(60, 15, 208);
    font-weight: bold;
}

.number {
    color: rgb(61, 160, 70);
}

.comment {
    color: rgb(123, 122, 122);
}

.type {
    font-weight: bold;
}

.cm-lintRange-info {
    background-image: none !important;
}

.cm-panels {
    width: 100% !important;
    position: unset !important;
}

/* Compiler status line */

.compiler_status {
    flex: 1;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    margin: 5px;
    background-color: rgb(213, 247, 222);
}

.compiler_status.loading {
    background-color: rgb(213, 230, 247);
}

.compiler_status.error {
    background-color: rgb(247, 213, 213);
}

.loader {
    display: inline-block;
    border: none;
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
}

.loader.loading {
    animation: spin720 2s ease-in-out infinite;
    border: 0.1em solid currentColor;
    border-left-color: transparent;
    border-right-color: transparent;
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
    @keyframes spin720 {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(-360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes flash_link {
        0%   { background-color: transparent; }
        10%   { background-color: rgb(252, 252, 101); }
        100% { background-color: transparent }
    }
}