.terminal {
    color-scheme: dark;

    --bg: #050805;
    --bg-header: rgb(5 8 5 / 0.92);
    --surface: #081108;
    --text: #d8ffd8;
    --link: #7dff7a;
    --muted: #78a878;
    --border: #245c24;
    --accent: #32ff32;
    --accent-hover: #9cff9c;
    --accent-text: black;
    --accent-hover-text: black;

    --danger: #ff5f5f;
    --danger-hover: #ff8585;
    --danger-text: black;
    --danger-hover-text: black;
    --danger-disabled: #7f3f3f;

    --input-bg: #020502;
    --input-text: var(--text);
    --input-border: #2f7f2f;
    --input-error-border: var(--danger);
    --input-readonly-bg: #0a140a;
    --input-readonly-text: var(--muted);

    --striped-row-odd-background: #0e2a0e;
    --striped-row-odd-text: var(--text);
    --striped-row-even-background: var(--bg);
    --striped-row-even-text: var(--text);

    --auth-google-bg: transparent;
    --auth-google-text: var(--text);
    --auth-google-border: var(--accent);

    --auth-apple-bg: transparent;
    --auth-apple-text: var(--accent);
    --auth-apple-border: var(--accent);

    --auth-facebook-bg: transparent;
    --auth-facebook-text: var(--accent);
    --auth-facebook-border: var(--accent);

    --auth-github-bg: transparent;
    --auth-github-text: var(--accent);
    --auth-github-border: var(--accent);

    --radius: 2px;
}

.terminal body {
    font-family:
        "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    text-shadow: 0 0 6px rgb(50 255 50 / 0.25);
}

.terminal .site-header {
    backdrop-filter: none;
}

.terminal .brand-root::before {
    content: "$ ";
    color: var(--accent);
}

.terminal .brand-divider {
    color: var(--accent);
}

.terminal .button,
.terminal .status-pill,
.terminal .card,
.terminal .panel,
.terminal .about,
.terminal input,
.terminal select,
.terminal textarea {
    border-radius: var(--radius);
    box-shadow: none;
}

.terminal .button {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.terminal .button.primary {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.terminal .button.primary:hover {
    background: rgb(50 255 50 / 0.12);
    color: var(--text);
}

.terminal .button:hover {
    transform: none;
    border-color: var(--accent);
}

.terminal input,
.terminal select,
.terminal textarea {
    caret-color: var(--accent);
    font-family: inherit;
}

.terminal ::selection {
    background: var(--accent);
    color: var(--accent-text);
}

.terminal img {
    filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(3);
}

.terminal .image-black {
    filter: invert(100%) grayscale(100%) sepia(100%) hue-rotate(90deg)
        saturate(3);
}