@font-face {
    font-family: "headerFont";
    src: url(/2026/static/fonts/PressStart2P-Regular.ttf);
}
@font-face {
    font-family: "textFont";
    src: url(/2026/static/fonts/Jersey15-Regular.ttf);
}

:root {
    /* Colors only from the palette (palette.css, generated from design/palette.txt) */
    --primaryColor: var(--black);
    --secondaryColor: var(--red);
    --solvedColor: var(--green);
    --infoColor: var(--blue);

    --fenceColor: var(--secondaryColor);
    --soilColor: var(--brown);

    --backgroundColor: #222222; /* behind the background image */
    --textColor: var(--grey-light);
    --specialTextColor: var(--secondaryColor);

    /* Every size except texts is a whole number of art pixels, so images and fences share one pixel grid.
       Texts written in pixel art (pen signs, canvas toolbar) use the header font (Press Start 2P, 8 font pixels per em)
       at --artTextSize: one font pixel is one art pixel. Page texts are smaller than the grid would allow:
       headers have a whole number of screen pixels per font pixel (2 on phones, 3 on computers). */
    --pixel: 3px;
    --artTextSize: calc(8 * var(--pixel));
    --headerSize: 16px;
    --gap: calc(8 * var(--pixel));
    --fenceWidth: calc(4 * var(--pixel));

    font-family: "textFont", sans-serif;
    font-size: calc(7 * var(--pixel));
}
@media (min-width: 900px) and (min-height: 600px) {
    :root {
        --pixel: 4px; /* computers, also a window of half a standard screen; everything grows together */
        --headerSize: 24px;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    color: var(--textColor);
    background-color: var(--backgroundColor);
    background-image: url("/static/susi_background.webp");
}

img {
    max-width: 100%;
    image-rendering: pixelated;
}

/* Fenced content */
.fence {
    margin: var(--fenceWidth);
    padding: var(--gap);
    border: var(--fenceWidth) solid var(--fenceColor);
    overflow-wrap: anywhere;
}
.fence { /* posts in the corners: 12x12 fence image, cut into 4 pixel slices */
    border-image: url(/2026/static/images/fence-red.png) 4 / var(--fenceWidth) repeat;
    image-rendering: pixelated;
}
.fence.solved {
    --fenceColor: var(--solvedColor);
    border-image-source: url(/2026/static/images/fence-green.png);
}
#problem, #problem img {
    image-rendering: auto; /* pictures in problems are not pixel art */
}
@media (max-width: 969px) {
    main.fence { /* on phones the left and right side of the fence touch the screen edges */
        margin-left: 0;
        margin-right: 0;
    }
}

#siteHeader {
    margin: var(--gap);
    text-align: center;
    scroll-snap-align: start;
}
#siteHeader h1 {
    margin: 0;
}

#aboveFence, #belowFence {
    margin: var(--gap) calc(2 * var(--fenceWidth));
}
#aboveFence {
    text-align: center;
}

/* Back button and page title: button above the title on mobile, on the left of it on PC */
#backButton {
    display: block;
    width: 100%;
    margin: 0;
}
@media (min-width: 970px) {
    #titleRow {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* keeps the title in the middle */
        align-items: center;
        gap: var(--gap);
    }
    #backButton {
        width: fit-content;
    }
}

/* Message from ?message=...&color=... */
#message {
    position: relative;
    margin: var(--gap) 0;
    padding: calc(var(--gap) / 2) calc(2 * var(--gap));
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
#messageClose { /* only a hint, clicking anywhere on the message closes it */
    position: absolute;
    top: calc(var(--gap) / 4);
    right: calc(var(--gap) / 2);
}
#message.success {
    background-color: var(--solvedColor);
    color: black;
}
#message.info {
    background-color: var(--infoColor);
    color: white;
}
#message.error {
    background-color: var(--secondaryColor);
    color: white;
}

/* Texts */
h1, h2, h3, h4, h5, h6 {
    font-family: "headerFont", monospace;
    font-weight: normal;
    line-height: 1.5;
    color: var(--specialTextColor);
}
h1, h2, h3, h4, h5, h6 {
    font-size: var(--headerSize); /* one size for all headers */
}
a, strong, b {
    color: var(--specialTextColor);
}
a {
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: underline;
}

/* Forms and buttons */
input, textarea, button, .button {
    display: inline-block;
    margin: calc(var(--gap) / 2) 0;
    padding: calc(var(--gap) / 2);
    max-width: 100%;

    font-family: inherit;
    font-size: 1em;
    color: white;
    text-decoration: none;

    background-color: var(--primaryColor);
    border: calc(2 * var(--pixel)) solid var(--fenceColor);
    border-image: url(/2026/static/images/frame-red.png) 2 / calc(2 * var(--pixel)) repeat; /* like the fences, posts in the corners */
    image-rendering: pixelated;
    outline: none;
}
input[type=submit], input[type=button], button, .button {
    cursor: pointer;
}
input[type=submit]:hover, input[type=submit]:focus,
input[type=button]:hover, input[type=button]:focus,
button:hover, button:focus, .button:hover, .button:focus {
    color: var(--specialTextColor);
    text-decoration: none;
}
input:focus {
    border-image-source: url(/2026/static/images/frame-white.png);
}
textarea.saved {
    border-image-source: url(/2026/static/images/frame-green.png);
}

/* Hint and solution */
details {
    margin: var(--gap) 0;
}
summary {
    list-style: none;
    cursor: pointer;
}
summary::-webkit-details-marker {
    display: none;
}
summary > * {
    display: inline;
}

/* Wide tables scroll inside their box, never the whole page */
.tableWrapper {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-color: var(--fenceColor) var(--primaryColor);
}
.fence table {
    overflow-wrap: normal; /* tables scroll in their wrapper instead of breaking words letter by letter */
}

@media (min-width: 970px) {
    .twoColumn {
        display: flex;
        justify-content: space-around;
        align-items: baseline;
        gap: var(--gap);
    }
    .twoColumn .half {
        width: 50%;
    }
}

/* Pixel art not drawn yet: labelled boxes */
.placeholder {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(255, 255, 255, 0.3);
    border: var(--pixel) dashed white;
    color: white;
    text-align: center;
}