:root {
    --animation-duration: 500ms;
    --animation-transition: 200ms;
    --animation-load-delay: 200ms;
    --animation-step-delay: 50ms;

    --border-thickness: 1px;

    --background-tertiary: hsl(0, 0%, 0%);
    --background-secondary: hsl(0, 0%, 16%);
    --background-primary: hsl(0, 0%, 32%);
    --background-highlight: hsl(0, 0%, 80%);
    --background-translucent: hsla(0, 0%, 0%, 0.3);

    --font-color-accent: hsl(0, 50%, 80%);
    --font-color-primary: hsl(0, 0%, 95%);
    --font-color-secondary: hsl(0, 0%, 65%);

    --effect-glass-corner-thickness: 1px;
    --effect-glass-corner-offset: -16px;
    --effect-glass-corner-margin: 16px;
    --effect-glass-corner-color: hsl(0, 0%, 30%);
    --effect-glass-tint: hsla(0, 0%, 100%, 0.075);
    --effect-glass-blur: 4px;
}

::-webkit-scrollbar {
    width: 0;
}

html,
body {
    margin: 0;
    background-color: var(--background-tertiary);
    padding: 0;
}

p,
a,
pre,
code,
span,
input,
textarea,
label,
button {
    display: block;
    margin: 0;
    border: none;
    background-color: transparent;
    padding: 0;
    color: var(--font-color-primary);
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    line-height: 1em;
    font-family: 'Terminus', monospace;
}

input::placeholder {
    color: var(--font-color-secondary);
}

/* Global Layout */
span.layout-tooltip {
    border: var(--border-thickness) solid var(--background-primary);
    background-color: var(--background-tertiary);
    padding: 4px 8px;
}

div.layout-wrapper {
    display: grid;
    width: 100%;
    height: 100%;
}

div.layout-background {
    position: fixed;
    width: 100vw;
    height: 100vh;
}

div.layout-foreground {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: auto;
    margin-top: 16px;
    width: 100%;
    max-width: 1024px;
    max-height: 100vh;
}

.layout-scrolling {
    max-height: calc(100vh - var(--effect-glass-corner-margin) * 4);
    overflow-x: hidden;
    overflow-y: scroll;
}

nav.layout-sidebar {
    box-sizing: border-box;
    padding: 16px;
    width: 300px;
}

main.layout-content {
    box-sizing: border-box;
    padding: 16px;
    width: 600px;
}

/* Global Effects */
.animation-blink {
    animation: kf-blink 1s infinite step-start;
}

@keyframes kf-blink {
    50% {
        opacity: 0;
    }
}

.animation-scroll-in {
    animation: kf-scroll-in 1s forwards linear;
    box-sizing: border-box;
    max-width: fit-content;
    overflow: hidden;
    text-wrap-mode: nowrap;
}

@keyframes kf-scroll-in {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.animation-fade-in {
    animation: kf-fade-in 500ms forwards linear;
}

@keyframes kf-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animation-fall-in {
    opacity: 0;
    animation: kf-fall-in var(--animation-transition) ease forwards;
}

@keyframes kf-fall-in {
    from {
        transform: scale(1.05);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animation-caution {
    position: relative;
    overflow: visible;
}

.animation-caution::before {
    position: absolute;
    transform: translate(16px, 16px);
    clip-path: polygon(
        calc(100% - 12px) 0,
        100% 0,
        100% 100%,
        0 100%,
        0 calc(100% - 12px),
        calc(100% - 12px) calc(100% - 12px)
    );
    filter: opacity(0.33);
    animation: kf-caution 1200s infinite linear;
    box-sizing: border-box;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        var(--background-primary) 0,
        var(--background-primary) 8px,
        black 8px,
        black 16px
    );
    content: '';
}

@keyframes kf-caution {
    0% {
        background-position-y: 0px;
    }
    100% {
        background-position-y: 7200px;
    }
}