* {
    box-sizing: border-box;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

:root {
    font-family: monospace;

    --light: white;
    --dark: black;

    background: var(--dark);

    font-size: 16px;

    touch-action: none;
}

html, body {
    overflow: hidden;

    margin: 0; padding: 0;
    width: 100%; height: 100%;
}

#screen {
    position: absolute;
    width: 100%; height: 100%;

    opacity: 0%;
    transition: opacity 1s ease-in-out;

    background-color: var(--dark);
    pointer-events: none;
}

#title-board {
    position: absolute;
    width: 100%; height: 100%;

    opacity: 0%;
    transition: opacity 1s ease-in-out;

    background-color: var(--dark);
    pointer-events: none;

    z-index: 10000;
}

#title {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);

    color: var(--light);
    font-size: 64px;
    text-align: center;

    
    user-select: contain;
}

#debug.window {
    user-select: none;

    width: 640px;
}

#debug .window-title {
    width: calc(640px - 32px);
}

#debug .window-body {
    display: flex; flex-direction: row;
    padding: 1em;
    gap: .5em;
    overflow: hidden;
}

#debug button {
    font-size: inherit;
}

#debug select {
    flex: 1;

    font-family: inherit;
    font-size: inherit;
    background: transparent;
    color: inherit;
}

p.quote {
    font-style: italic;
}

.credits.window {
    height: unset;
}

.credits .window-close {
    display: none;
}

.credits .window-title {
    width: unset;
}

.credits .window-body {
    overflow: hidden;
}

button {
    border: solid var(--dark) 1px;
    background: var(--light);
    color: var(--dark);
    font-family: inherit;

    cursor: pointer;
}

button:active {
    filter:invert();
}

.window {
    position: absolute;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;

    width: 320px; height: 320px;
    
    border: solid var(--light) 1px;
    background: var(--light);

    box-shadow: 0 0 0 1px black;

    z-index: 0;
}

[hidden] { visibility: hidden; }

.flash {
    filter: invert();
}

.window-title {
    display: block;

    width: calc(320px - 32px); height: 32px;
    padding: 0 8px;
    font-weight: bold;
    line-height: 32px;

    background: var(--light); color: var(--dark);

    cursor: move;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.window-close {
    position: absolute;
    right: 4px; top: 4px;

    width: 24px; height: 24px; 
}

.window-body {
    flex: 1;

    overflow-y: scroll;

    background: var(--dark);
    color: var(--light);
}

.img-tint {
    display: flex;
    background-color: var(--light);
    margin: 16px;
}

.img-tint img {
    mix-blend-mode: multiply;
}

.window-body img {
    width: 100%;
}

.window-body h1 {
    margin: 24px;
    font-size: unset;
    text-align: center;
}

.window-body p {
    margin: 16px;
    text-align: justify;
}

.window-body ul {
    margin: 16px;
    margin-inline-start: 0;
}

.window-body a {
    background: var(--dark);
    color: var(--light);
}

.window-body a:hover {
    background: var(--light);
    color: var(--dark);
}

.glow {
    animation-name: glow;
    animation-direction: alternate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes glow {
    0%   { filter: brightness(10%); }
    100% { filter: brightness(35%) }
}

.attention {
    animation-name: attention;
    animation-direction: alternate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


@keyframes attention {
    0%   { filter: brightness(50%); }
    100% { filter: brightness(150%); }
}