@import url('https://fonts.googleapis.com/css2?family=Enriqueta:wght@400;500;600;700&family=Oldenburg&family=Vast+Shadow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*
╔══════════════════════════════════════════════════╗
║ MORGANA COUNCIL THEME -- 2024 CANONICON UPDATE ║
║ ------------------------------------------------ ║
║ ORIGINAL BY ETOISLE, with edits by YELLOWISLOL ║
║ 2024 UPDATE VERSION BY SCUTOID + BUBBLINGBEACH ║
║ ------------------------------------------------ ║
║ CSS for use with the Black Highlighter Theme ║
║ from the SCP Wiki, by Woedenaz and ║
║ Croquembouche. Import or [[include]] the theme ║
║ before this code to create the full theme. ║
╚══════════════════════════════════════════════════╣
│ Black Highlighter is available at: ║
→│https://scpwiki.com/theme:black-highlighter-theme║
└─────────────────────────────────────────────────╜
*/
:root {
--logo-image: url("http://scutoidbox.wikidot.com/local--files/theme:morgana-council/the_morgan.png");
--header-title: "The Morgana Council";
--header-subtitle: "est. 1984";
--header-shine-gradient: linear-gradient(to right, transparent 0, rgba(255,210,71) 5%, rgba(250,185,92,1) 16%, rgba(255,255,255,1) 17%, rgba(255,255,255,1) 33%, rgba(250,185,92,1) 42%, rgba(220,103,91,1) 65%, rgba(220,103,91,1) 76%, rgba(255,160,234,1) 93%, transparent 100%);
--header-height-on-mobile: 10rem;
/* Fonts */
--title-font: 'Enriqueta', sans-serif;
--header-font: 'Enriqueta', sans-serif;
--UI-font: 'Poppins', sans-serif;
/* --body-font: 'Poppins', sans-serif; */
/* Colors */
--white-monochrome: 209, 198, 190; /* changed */
--pale-gray-monochrome: 229, 205, 223; /* changed */
--light-pale-gray-monochrome: 229, 205, 223; /* changed */
--very-light-gray-monochrome: 196, 135, 181; /* changed */
--light-gray-monochrome: 140, 69, 131; /* changed */
--gray-monochrome: 56, 28, 84; /* changed */
--dark-gray-monochrome: 29, 16, 61; /* changed */
--black-monochrome: 7, 4, 24; /* changed */
--pale-accent: 186, 87, 219; /* changed */
--bright-accent: 228, 162, 43; /* changed */
--medium-accent: 200, 99, 28; /* changed */
--dark-accent: 196, 72, 17; /* changed */
--alt-accent: 221, 102, 17;
--visited-link-color: 131, 87, 219;
--swatch-prinary-darkest: var(--swatch-primary);
--swatch-tertiary-color: var(--light-gray-monochrome);
--footer-message: "Is your risk worth taking?";
--wallpaper-mask: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22windows-1252%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20width%3D%22106.667%22%20height%3D%22154.667%22%3E%3Cpath%20d%3D%22M72.547%201158.57H5.074V-6.465h67.473V1158.57M119.027%20710.25v-58.977l126.95%20154.438L363.43%20654.77v61.476L246.477%20865.688%20119.027%20710.25%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3Cpath%20d%3D%22M119.027%20951.652V790.715l125.45%20153.441L363.43%20792.715v166.933L247.477%201108.09l-128.45-156.438M763.27%201158.57h-63.473l63.473-80.97ZM472.387%201158.57h-67.473V-6.465h67.473V1158.57M518.867%20995.133v-58.977L645.816%201090.6%20763.27%20939.656v61.474l-116.954%20149.44-127.449-155.437M763.27%20657.27%20647.316%20805.711%20518.867%20649.273V488.336l125.449%20153.441L763.27%20490.336V657.27M518.867%201158.57v-82.97l67.973%2082.97z%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3Cpath%20d%3D%22M763.27%20413.867%20646.316%20563.309%20518.867%20407.867v-58.972l126.949%20154.437L763.27%20352.391v61.476M363.43%20128.98%20246.477%20278.422l-127.45-155.438V64.008l126.95%20154.437L363.43%2067.504v61.476%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3Cpath%20d%3D%22M363.43%20205.449v166.934L247.477%20520.824l-128.45-156.437V203.449l125.45%20153.442L363.43%20205.449M518.867%2071.504V-6.465h67.973l57.476%2070.473%2055.481-70.473h63.473V79.5L647.316%20227.941%20518.867%2071.504%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3C%2Fsvg%3E);
--wallpaper-mask-size: 2.3rem;
/* ui buttons */
--ui-button-bg: var(--bright-accent);
--ui-button-txt: var(--black-monochrome);
--ui-button-hover-bg: var(--medium-accent);
--ui-button-hover-outline: var(--dark-accent);
/* sidebar buttons */
--toggle-button-bg: rgb(var(--bright-accent));
--toggle-border-color: rgb(var(--medium-accent));
--toggle-border-width: 0.15rem;
--toggle-icon-color: rgb(var(--black-monochrome));
}
}
/* Header */
#container-wrap #header::before {
background-size: auto 8rem;
opacity: 0.3;
mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.5));
-webkit-mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.5));
}
/* Header Wallpaper */
#skrollr-body {
height: var(--header-height-on-desktop);
width: 100vw;
background: linear-gradient(to bottom, rgb(var(--light-gray-monochrome)), transparent), linear-gradient(to bottom, rgb(var(--black-monochrome), 0.7), transparent);
}
/* Rounded Corners */
body {
background: rgb(var(--swatch-topmenu-bg-color))
}
#content-wrap {
background: rgb(var(--swatch-background));
border-radius: 0.5rem 0.5rem 0 0;
box-shadow: 0 0.5rem 0 rgb(var(--light-gray-monochrome)) inset, 0 0.6rem 5px rgb(var(--white-monochrome), 0.8) inset, 0 0.9rem 0 rgb(var(--medium-accent)) inset;
}
/* Border */
#header::before {
background-size: auto 9rem;
}
#header {
width: calc(100vw - 2rem);
max-width: unset;
--login-dropdown-bg-image: linear-gradient(to bottom, rgb(var(--light-gray-monochrome)), rgb(var(--gray-monochrome)));
}
#header #top-bar {
max-width: unset;
width: 100%;
--topmenu-category-color: var(--swatch-text-secondary-color), 0.8;
--topmenu-hover-border-color: var(--bright-accent);
--mobile-topmenu-sidebar-button-color: var(--bright-accent);
--dropdown-border-color: var(--bright-accent), 0.2;
}
.top-bar {
margin: 0 auto;
}
#header div.mobile-top-bar {
width: 100vw;
max-width: unset;
margin-right: -2rem;
}
@media only screen and (max-width: 56.25rem) {
#header {
width: 100vw;
}
}
#main-content {
background-image: linear-gradient(to bottom, rgb(var(--light-gray-monochrome)) 5rem, transparent 100%);
margin-top: 0.5rem;
background-size: 0.5rem 100vh;
background-repeat: no-repeat;
padding: 2rem 2rem;
/* ui icons */
--ui-icon-color: var(--bright-accent);
--ui-icon-bg: var(--medium-accent);
--ui-icon-hover-bg: var(--dark-accent);
/* tabs content */
--tabs-content-border-color: var(--swatch-tertiary-color), 0.3
/* toc */
--toc-body-bg-color: var(--swatch-background);
--toc-directory-lines-color: var(--swatch-tertiary-color);
/* tags */
--pagetags-title-bg: var(--swatch-primary);
--pagetags-text-color: var(--swatch-primary);
--pagetags-text-hover-color: var(--swatch-background);
--pagetags-text-hover-bg-color: var(--bright-accent);
}
#header::after {
content: "";
width: 100%;
height: 0.4rem;
position: absolute;
left: 0;
top: calc(100% + 0.5rem);
display: block;
background-image: var(--header-shine-gradient);
background-size: 95% 0.4rem;
background-repeat: no-repeat;
background-position: center;
mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.3));
transform: skew(-15deg, 0);
}
/* Title */
#page-title, .meta-title {
margin-left: -1.5rem;
width: fit-content;
background: rgb(var(--light-gray-monochrome));
padding: 1rem 2rem;
color: rgb(var(--swatch-background));
border-radius: 0 0.5rem 0.5rem 0;
margin-bottom: 0.25;
position: relative;
}
#page-title::after, .meta-title::after {
display: none;
}
#page-title::before, .meta-title::before {
content: "";
display: block;
background: linear-gradient(to bottom, rgb(var(--light-gray-monochrome)) 70%, transparent 100%);
width: 0.5rem;
height: calc(100% + 10rem);
position: absolute;
top: -2rem;
right: 100%;
mask-image: linear-gradient(to bottom, transparent, black 2rem)
}
.borderblock {
color: rgb(var(--white-monochrome));
background: rgb(var(--dark-gray-monochrome));
border: 2px solid rgb(var(--bright-accent));
padding: 0.01rem 1rem;
margin: 0.5rem 0;
}
.dark-borderblock {
color: rgb(var(--white-monochrome));
background: rgb(var(--black-monochrome));
border: 2px solid rgb(var(--bright-accent));
padding: 0.01rem 1rem;
margin: 0.5rem 0;
}
.meta-title {
margin-left: -2.5rem; /* changed because it's in the #page-content which has padding */
}
/* Content */
#page-content {
background: rgb(var(--gray-monochrome), 0.3);
border-radius: 0.5rem;
padding: 0.5rem 1rem;
margin-top: 0.5rem;
}
/* Footer */
#footer {
--footer-bg-color: var(--swatch-primary-darkest), 0.7;
--footer-text-color: var(--swatch-text-secondary-color), 0.8;
--footer-link-hover-color: var(--swatch-background);
--footer-link-hover-bg-color: var(--bright-accent);
}
/* Lincense Area */
#license-area {
--license-bg-color: var(--swatch-primary-darkest);
--license-link-hover-color: var(--swatch-text-secondary-color);
--license-link-hover-bg-color: var(--swatch-primary);
}