Project Phantasma Theme

/* Theme for Project Phantasma */
/* based on Black Highlighter Theme from SCP Wiki */
 
/* ==== THEME IMPORT === */
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");
 
/* ==== FONT IMPORT ==== */
/* roboto slab */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* roboto mono */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
 
:root {
/* ===STANDARD THEME COLORS=== */
    /* white */
    --white-monochrome: 255, 255, 255;
    /* v light gray for blockquotes and stuff */
    --pale-gray-monochrome: 244, 244, 251;
    /* very light pale gray for misc. use */
    --light-pale-gray-monochrome: 244, 244, 251;
    /* very light accent gray for misc. use */
    --very-light-gray-monochrome: 215, 215, 221;
    /* light accent gray for login status */
    --light-gray-monochrome: 160, 160, 169;
    /* gray */
    --gray-monochrome: 42, 42, 50;
    /* dark accent gray for sidebar background */
    --dark-gray-monochrome: 25, 25, 31;
    /* black */
    --black-monochrome: 0, 0, 0;
    /* subdued theme color */
    --pale-accent: 90, 90, 130;
    /* vivid theme color the "default" accent color */
    --bright-accent: 15, 15, 20;
    /* theme color */
    --medium-accent: 80, 80, 90;
    /* darker theme color */
    --dark-accent: 10, 10, 20;
    /* alternate accent color for newpage links */
    --alt-accent: 221, 102, 17;
 
/* ===HEADER=== */
    --header-title: "Project Phantasma";
    --header-subtitle: "The Protectors of Humanity";
    --logo-image: url("http://scutoidbox.wikidot.com/local--files/project-phantasma-theme/phantasm.png");
 
/* ===TYPEFACES=== */
    --body-font: 'Roboto', Inter, Verdana, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --UI-font: 'Roboto', PTRootUI, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantrell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --header-font: 'Roboto Slab', Inter, "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono-font: 'Roboto Mono', Recursive, Consolas, Monaco, monospace;
 
/* ===HEADER=== */
    --diagonal-stripes: repeating-linear-gradient(180deg, hsl(0deg 0% 100% / 0), hsl(0deg 0% 100% / 0) 0.25vh, rgb(88 88 88 / 0.1) 0.35vh, rgb(88 88 88 / 0.2) 0.5vh);
}
 
#header h2 span::before {
    display: inline-block;
    margin-top: -1px;
    opacity: 0.8;
    text-transform: uppercase;
}