MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

Documentation

This wiki is using the theming template from the default loadout. This template is intended to minimize the work required to create a custom colored version of the standard Vector skin, while maximizing the various nooks and crannies that those colors reach, all while keeping everything legible and matching.

Please be aware of the customization policy when modifying the theme.

Themes

The ThemeToggle extension is installed, and allows multiple themes to be used. In the actual stylesheet below this documentation, you'll find two huge rules at the top, each containing lots of CSS color variables. They look like this:

:root,
/* Begin light styles, delete from here to "end light styles" if you don't want your wiki to support any light themes (remove from [[Mediawiki:Theme-definitions]] too, or ask wiki.gg staff for help doing this) */
/* FYI: .view- will affect any theme marked |kind=light, */
/* individual themes are prefixed with .theme- instead   */
.view-light {
	/**********************
	* Probably edit these * [ LIGHT VIEW ]
	***********************/
    --wiki-body-background-color: #F6F6F6;
    --wiki-body-background-image: url(/images/8/80/Site-background.jpg);
    /* and so on */
}

.view-dark {
	/**********************
	* Probably edit these * [ DARK VIEW ]
	***********************/
    --wiki-body-background-color: #171717;
    --wiki-body-background-image: url(/images/c/c4/Site-background-dark.jpg);
    /* and so on */
}

These are the standard light and dark themes, defined in Mediawiki:Theme-definitions. Important: if you want your wiki to only support a single theme, edit that page and remove the line you don't want (don't remove both). The :root selector is a fallback, meaning that in case something happens and ThemeToggle fails to work, the following theme will still mostly work. If you have multiple themes, you can move the :root rule to whichever you'd consider the "default" theme.

Non-color variables

Variable name	Notes
--wiki-body-background-image	This is the image path to the wiki's background image. Usually this is uploaded to File:Site-background.jpg, File:Site-background-light.jpg, and/or File:Site-background-dark.jpg. While there's not a hard file size limit, it is recommended that this not exceed 250 KB. File size can be reduced by resizing (anything over 2560x1440p is excessive), converting to a jpg, and compressed using sites like TinyPNG.
--wiki-body-background-position	The background-position of the background image. Usually this is set to `top center`.
--wiki-body-background-size	The background-size of the background image. Usually this is set to `cover`.
--wiki-body-background-repeat	The background-repeat of the background image. Usually this is set to `no-repeat`.
--wiki-body-background-attachment	The background-attachment of the background image. Usually this is set to `fixed`.
--wiki-body-font-family	The font family of most of the wiki, such as the sidebar, navigation, and content text. Usually this is sans-serif. If modifying this, use a simple font that is easy to read. See `--wiki-heading-font-family` if you want to incorporate a more decorative font into the theme.
--wiki-heading-font-family	The font family of headings, such as the page title and section headings. This font is usually displayed in a larger size, so it's safer to use a more decorative font than `--wiki-body-font-family`, but still try to keep it legible.
--wiki-sidebar-heading-font-family	The font family of sidebar headings. In contrast to `--wiki-heading-font-family`, this is usually displayed in a smaller size, so keep it simple and easy to read.
--wiki-sidebar-border-radius	The border-radius of the sidebar. If `--wiki-sidebar-portal-spacing` is set to 0, then only the top and bottom corners of the sidebar as a whole will be affected, otherwise every portal will have all its corners affected. Units must be specified even if this is set to 0.
--wiki-sidebar-portal-spacing	The space between each portal in the sidebar. Units must be specified even if this is set to 0.
--wiki-content-border-width	The thickness of the border around the content area.
--wiki-sidebar-border-width	The thickness of the border around the sidebar portals.
--wiki-content-background-opacity	The opacity of the main content area, to let the wiki's background image show through. Please keep this high, usually above 90%, or it can make reading text difficult.
--wiki-sidebar-background-opacity	The background opacity of the sidebar. Usually this inherits `--wiki-content-background-opacity`.
--wiki-icon-general-filter	A filter applied to many icons to make them visible on dark themes. Usually this is just `invert(100%)` on dark themes and blank on light themes.
--wiki-icon-to-link-filter	A filter that converts many icons into the same color as `--wiki-content-link-color`. This can be generated by plugging that into https://mrpie5.gitlab.io/css-filter-generator/.

List of all colors with contrast checking

The table below shows all the colors currently in use, as well as notes on how to use them. The last column shows which colors are expected to show up as text against other colors. With the exception of --wiki-content-text-mix-color-95, all text in the last column should be clearly legible. If it is not, you may need to adjust one of the referenced colors in your color palette.

Keep in mind that changes to the opacity variables in the section above will cause the content and sidebar background colors to mix with the body background color/image, so the contrasts below may not be perfectly accurate.

Variable name	Notes	Test contrast against these variables
--wiki-body-background-color	The background color behind the background image. This usually only shows up if the background image doesn't load, doesn't fill the screen, or has some transparency. This color should be similar to the overall color of the background image, or the top-left corner if it is made up of many different colors. In the former case, https://matkl.github.io/average-color/ is helpful.	--wiki-body-dynamic-color --wiki-body-dynamic-color--secondary
--wiki-body-dynamic-color	This is expected to contrast sharply with the body-background-color, for cases when text needs to be displayed against it. Usually this is #000 on light themes and #fff on dark themes.	--wiki-body-background-color --wiki-body-dynamic-color--inverted --wiki-body-dynamic-color--secondary--inverted
--wiki-body-dynamic-color--inverted	The inverse of `--wiki-body-dynamic-color`. This should optimally have almost no contrast with the body-background-color.	--wiki-body-dynamic-color --wiki-body-dynamic-color--secondary
--wiki-body-dynamic-color--secondary	A slightly different version of body-dynamic-color. Usually this is #333 on light themes and #ccc on dark themes.	--wiki-body-background-color --wiki-body-dynamic-color--inverted --wiki-body-dynamic-color--secondary--inverted
--wiki-body-dynamic-color--secondary--inverted	The inverse of `--wiki-body-dynamic-color--secondary`.	--wiki-body-dynamic-color --wiki-body-dynamic-color--secondary
--wiki-content-background-color	The background color of the main content area.	--wiki-content-text-color --wiki-content-link-color --wiki-content-link-color--visited --wiki-content-link-color--hover --wiki-content-redlink-color --wiki-content-text-mix-color --wiki-content-dynamic-color --wiki-content-dynamic-color--secondary --wiki-content-heading-color --wiki-accent-color --wiki-neutral-color --wiki-success-color --wiki-alert-color
--wiki-content-background-color--secondary	A secondary content background to highlight certain things. Usually this is `--wiki-content-background-color` with saturation and/or value reduced or increased by about 10%, but you're free to make it whatever you want provided the contrast checks to the right still pass.	--wiki-content-text-color --wiki-content-link-color --wiki-content-link-color--visited --wiki-content-link-color--hover --wiki-content-redlink-color --wiki-content-text-mix-color --wiki-content-dynamic-color --wiki-content-dynamic-color--secondary --wiki-content-heading-color --wiki-accent-color --wiki-neutral-color --wiki-success-color --wiki-alert-color
--wiki-content-border-color	Border color for the main content area and elements within it.	N/A
--wiki-content-text-color	Text color for the main content area.	--wiki-content-background-color --wiki-content-background-color--secondary
--wiki-content-link-color	Links within the content area. Please do not make this red, as red links on wikis traditionally denote pages that don't exist.	--wiki-content-link-label-color
--wiki-content-link-label-color	This is used when placing text on an element with the link color as a background, such as a button.	--wiki-content-link-color
--wiki-content-link-color--visited	The color of visited links. This is optional, and usually inherits `--wiki-content-link-color`.	--wiki-content-background-color --wiki-content-background-color--secondary
--wiki-content-link-color--hover	The color links change to when hovered over. This is optional, and usually inherits `--wiki-content-link-color`.	--wiki-content-background-color --wiki-content-background-color--secondary
--wiki-content-redlink-color	The color of links to pages that don't exist. Since these should only rarely be seen, you can be a little lax about choosing a color that contrasts with the background, but it should still be legible.	--wiki-content-background-color --wiki-content-background-color--secondary
--wiki-content-text-mix-color	A mix of `--wiki-content-text-color` and `--wiki-content-background-color`, calculated automatically. This is generally used to mark disabled elements or placeholder text.	--wiki-content-background-color --wiki-content-background-color--secondary --wiki-content-text-mix-color-95
--wiki-content-text-mix-color-95	The same as `--wiki-content-text-mix-color`, but the mix is 95% `--wiki-content-background-color`, calculated automatically. This is used to mark disabled elements. The contrast checker to the right should actually be very hard to read but not impossible.	--wiki-content-background-color --wiki-content-background-color--secondary
--wiki-content-dynamic-color	This is expected to contrast sharply with `--wiki-content-background-color`. Usually this is #000 on light themes and #fff on dark themes.	--wiki-content-background-color --wiki-content-dynamic-color--inverted --wiki-content-dynamic-color--secondary--inverted
--wiki-content-dynamic-color--inverted	The inverse of `--wiki-content-dynamic-color`.	--wiki-content-dynamic-color --wiki-content-dynamic-color--secondary
--wiki-content-dynamic-color--secondary	A slightly different version of `--wiki-content-dynamic-color`. Usually this is #333 on light themes and #ccc on dark themes.	--wiki-content-background-color --wiki-content-dynamic-color--inverted --wiki-content-dynamic-color--secondary--inverted
--wiki-content-dynamic-color--secondary--inverted	The inverse of `--wiki-content-dynamic-color--secondary`.	--wiki-content-dynamic-color --wiki-content-dynamic-color--secondary
--wiki-content-heading-color	The color of headings, such as the page title and section headings. Usually this is set to `--wiki-content-text-color`, but feel free to give it a different color to spice up the theme a little.	--wiki-content-background-color
--wiki-accent-color	Used to style infoboxes, navboxes, focused element outlines, and some buttons, such as the save button when editing.	--wiki-accent-label-color --wiki-accent-link-color --wiki-content-background-color --wiki-content-background-color--secondary
--wiki-accent-color--hover	The color of accent-color when hovered over, in some cases. Usually this is just accent-color with saturation and/or value reduced or increased by about 10%, but you're free to make it whatever you want provided the contrast checks to the right still pass.	--wiki-accent-label-color --wiki-accent-link-color
--wiki-accent-label-color	The color of normal text against the accent color.	--wiki-accent-color --wiki-accent-color--hover
--wiki-accent-link-color	The color of links against the accent color.	--wiki-accent-color
--wiki-sidebar-background-color	The background color of the sidebar to the left of the content area. Usually this inherits `--wiki-content-background-color`.	--wiki-sidebar-link-color --wiki-sidebar-heading-color
--wiki-sidebar-border-color	The border color of the sidebar. Usually this inherits `--wiki-content-border-color`.	N/A
--wiki-sidebar-link-color	The color of links in the sidebar. Usually this inherits `--wiki-content-link-color`.	--wiki-sidebar-background-color
--wiki-sidebar-link-color--hover	The color links change to when hovered over. This is optional, and usually inherits `--wiki-content-link-color--hover`.	--wiki-sidebar-background-color
--wiki-sidebar-heading-color	The color of headings in the sidebar. Usually this inherits `--wiki-content-heading-color`.	--wiki-sidebar-background-color
--wiki-navigation-background-color	The primary background color of the navigation tabs above the content area. Usually this inherits `--wiki-content-background-color--secondary`.	--wiki-navigation-text-color
--wiki-navigation-background-color--secondary	The upper background color of the navigation tabs, as well as the background color of the "More" menu dropdown. Usually this inherits `--wiki-content-background-color`.	--wiki-navigation-text-color
--wiki-navigation-border-color	Border color of the navigation tabs. Usually this inherits `--wiki-content-border-color`.	N/A
--wiki-navigation-text-color	The color of text in the navigation tabs. Usually this inherits `--wiki-content-link-color`.	--wiki-navigation-background-color --wiki-navigation-background-color--secondary
--wiki-navigation-selected-background-color	The background color of the currently active navigation tab. Usually this inherits `--wiki-content-background-color`	--wiki-navigation-selected-text-color
--wiki-navigation-selected-border-color	The border color of the currently active navigation tab. Usually this inherits `--wiki-navigation-border-color`	N/A
--wiki-navigation-selected-text-color	The text color of the currently active navigation tab. Usually this inherits `--wiki-content-text-color`	--wiki-navigation-selected-background-color
--wiki-neutral-color	A gray-ish color for displaying neutral text, such as a diff size of 0 in RecentChanges and page history. Usually this inherits `--wiki-content-text-mix-color`, but can be set explicitly if that color is not gray enough.	--wiki-content-background-color --wiki-content-background-color--secondary
--wiki-alert-color	A general, usually red-ish color used for negative notices, most notably negative diffs in RecentChanges and page history, and the "cancel" button when editing.	--wiki-alert-label-color --wiki-content-background-color --wiki-content-background-color--secondary
--wiki-alert-label-color	The color of text against `--wiki-alert-color` as a background.	--wiki-alert-color
--wiki-warning-color	A general, usually orange-ish color used for warning notices.	--wiki-warning-label-color --wiki-content-background-color
--wiki-warning-label-color	The color of text against `--wiki-warning-color` as a background.	--wiki-warning-color
--wiki-success-color	A general, usually green-ish color used for success notices, most noticeably positive diffs in RecentChanges and page history.	--wiki-success-label-color --wiki-content-background-color --wiki-content-background-color--secondary
--wiki-success-label-color	The color of text against `--wiki-success-color` as a background.	--wiki-success-color

Stylesheet

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');

/******************************************************/
/*                                                    */
/* [START] OF WIKI.GG DEFAULT LOADOUT                 */
/* DO NOT EDIT OR DELETE THIS COMMENT BLOCK           */
/*                                                    */
/******************************************************/


/******************************************************************************************
********************************* Start user-edit variables *******************************
******************************************************************************************/

/*****************************************
****** START BASIC DESIGN VARIABLES ******
----------------------------------------*/
:root {
	--wiki-content-heading-font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
	--wiki-sidebar-heading-font-family: sans-serif;
	
	--wiki-content-border-radius: 0px;
	--wiki-sidebar-border-radius: 0px;
}
/*----------------------------------------
******* END BASIC DESIGN VARIABLES *******
*****************************************/

/*****************************************
****** START BASIC COLOR VARIABLES *******
----------------------------------------*/
:root,
	/* Begin light styles, delete from here to "end light styles" if you don't want your wiki to support any light themes (remove from [[Mediawiki:Theme-definitions]] too, or ask wiki.gg staff for help doing this) */
	/* FYI: .view- will affect any theme marked |kind=light, */
	/* individual themes are prefixed with .theme- instead   */
.view-light {
	/**********************
	* Probably edit these * [ LIGHT VIEW ]
	***********************/
	--wiki-body-background-color: #F6F6F6;
	--wiki-body-background-image: url(filepath://Site-background.jpg);

	--wiki-content-background-color: #ffffff;
	--wiki-content-background-opacity: 100%;
	--wiki-content-border-color: #a7d7f9;
	--wiki-content-link-color: #0645ad; /* if changing this, remember to change --wiki-icon-to-link-filter as well!!! */
	/* [ LIGHT VIEW ] */
	--wiki-accent-color: #3366cc;
	--wiki-accent-label-color: #ffffff;
	--wiki-accent-link-color: #D5FB51;

	--wiki-icon-to-link-filter: invert(20%) sepia(93%) saturate(2141%) hue-rotate(210deg) brightness(83%) contrast(103%); /* put your --wiki-content-link-color into https://mrpie5.gitlab.io/css-filter-generator/ */
	/**/
}

/* end light styles */

/* Begin dark styles, delete from here to "end dark styles" if you don't want your wiki to support any dark themes (remove it from [[Mediawiki:Theme-definitions]] too, or ask wiki.gg staff for help doing this) */
/* FYI: .view- will affect any theme marked |kind=dark, */
/* individual themes are prefixed with .theme- instead   */
.view-dark {
	/**********************
	* Probably edit these * [ DARK VIEW ]
	***********************/
	--wiki-body-background-color: #171717;
	--wiki-body-background-image: url(filepath://Site-background-dark.jpg);

	--wiki-content-background-color: #10121e;
	--wiki-content-background-opacity: 90%;
	--wiki-content-border-color: #991A51;

	--wiki-content-link-color: #6d8afb; /* if changing this, remember to change --wiki-icon-to-link-filter as well!!! */
	/* [ DARK VIEW ] */
	--wiki-accent-color: #ff4d9d;
	--wiki-accent-label-color: #000;
	--wiki-accent-link-color: #1e1e43;

	--wiki-icon-to-link-filter: invert(60%) sepia(70%) saturate(3715%) hue-rotate(206deg) brightness(101%) contrast(97%); /* put your --wiki-content-link-color into https://mrpie5.gitlab.io/css-filter-generator/ */
	/**/
}

/* End dark styles */

/*----------------------------------------
******* END BASIC COLOR VARIABLES ********
*****************************************/

/*****************************************
**** START ADVANCED COLOR VARIABLES ******
----------------------------------------*/

:root,
.view-light {
	/*******************
	* Maybe edit these * [ LIGHT VIEW ]
	********************/
	--wiki-body-background-position: top center;
	--wiki-body-background-size: cover;
	--wiki-body-background-repeat: no-repeat;
	--wiki-body-background-attachment: fixed;

	--wiki-content-background-color--secondary: color-mix(in srgb, var(--wiki-content-background-color) 96%, var(--wiki-content-dynamic-color));
	--wiki-content-text-color: #111111;
	--wiki-content-link-color--visited: var(--wiki-content-link-color);
	--wiki-content-link-color--hover: var(--wiki-content-link-color);
	--wiki-content-redlink-color: #ba0000;

	--wiki-content-heading-color: var(--wiki-content-text-color);
	--wiki-content-heading-border-color: var(--wiki-content-border-color);

	/* [ LIGHT VIEW ] */
	--wiki-navigation-background-color: var(--wiki-content-background-color--secondary);
	--wiki-navigation-border-color: var(--wiki-navigation-selected-border-color);
	--wiki-navigation-text-color: var(--wiki-content-link-color);
	--wiki-navigation-selected-background-color: var(--wiki-content-background-color);
	--wiki-navigation-selected-border-color: var(--wiki-content-border-color);
	--wiki-navigation-selected-text-color: var(--wiki-content-text-color);
	
	--wiki-table-background-color: var(--wiki-content-background-color);
	--wiki-table-header-background-color: var(--wiki-content-background-color--secondary);
	--wiki-table-text-color: var(--wiki-content-text-color);
	--wiki-table-link-color: var(--wiki-content-link-color);
	--wiki-table-header-text-color: var(--wiki-table-text-color);
	--wiki-table-header-link-color: var(--wiki-content-link-color);
	--wiki-table-border-color: var(--wiki-content-border-color);

	/* [ LIGHT VIEW ] */
	--wiki-neutral-color: var(--wiki-content-text-mix-color);
	--wiki-alert-color: #bf0017;
	--wiki-warning-color: #b05f30;
	--wiki-success-color: #0c742f;
	/**/

	/***********************************
	* Likely do not need to edit these *  [ LIGHT VIEW ]
	************************************/
	--wiki-body-dynamic-color: #000000;
	--wiki-body-dynamic-color--inverted: #ffffff;
	--wiki-body-dynamic-color--secondary: #333333;
	--wiki-body-dynamic-color--secondary--inverted: #cccccc;

	--wiki-content-border-color--secondary: color-mix(in srgb, var(--wiki-content-border-color) 50%, transparent);
	--wiki-content-border-color--accent: color-mix(in srgb, var(--wiki-accent-color) 50%, transparent);
	--wiki-content-link-label-color: #ffffff;
	--wiki-content-dynamic-color: #000000;
	--wiki-content-dynamic-color--inverted: #ffffff;
	--wiki-content-dynamic-color--secondary: #333333;
	--wiki-content-dynamic-color--secondary--inverted: #cccccc;
	/* [ LIGHT VIEW ] */
	--wiki-alert-label-color: #ffffff;
	--wiki-warning-label-color: #ffffff;
	--wiki-success-label-color: #ffffff;

	--wiki-icon-general-filter: ; /* do not set this to none, ignore the "unexpected token" error */
	/**/
}

.view-dark {
	/*******************
	* Maybe edit these * [ DARK VIEW ]
	********************/
	--wiki-body-background-position: top center;
	--wiki-body-background-size: cover;
	--wiki-body-background-repeat: no-repeat;
	--wiki-body-background-attachment: fixed;

	--wiki-content-background-color--secondary: color-mix(in srgb, var(--wiki-content-background-color) 96%, var(--wiki-content-dynamic-color));
	--wiki-content-text-color: #ededed;
	--wiki-content-link-color--visited: var(--wiki-content-link-color);
	--wiki-content-link-color--hover: var(--wiki-content-link-color);
	--wiki-content-redlink-color: #FC5B4F;

	--wiki-content-heading-color: var(--wiki-content-text-color);
	--wiki-content-heading-border-color: var(--wiki-content-border-color);

	/* [ DARK VIEW ] */
	--wiki-navigation-background-color: var(--wiki-content-background-color--secondary);
	--wiki-navigation-border-color: var(--wiki-navigation-selected-border-color);
	--wiki-navigation-text-color: var(--wiki-content-link-color);
	--wiki-navigation-selected-background-color: var(--wiki-content-background-color);
	--wiki-navigation-selected-border-color: var(--wiki-content-border-color);
	--wiki-navigation-selected-text-color: var(--wiki-content-text-color);
	
	--wiki-table-background-color: var(--wiki-content-background-color);
	--wiki-table-header-background-color: var(--wiki-content-background-color--secondary);
	--wiki-table-text-color: var(--wiki-content-text-color);
	--wiki-table-link-color: var(--wiki-content-link-color);
	--wiki-table-header-text-color: var(--wiki-table-text-color);
	--wiki-table-header-link-color: var(--wiki-content-link-color);
	--wiki-table-border-color: var(--wiki-content-border-color);

	/* [ DARK VIEW ] */
	--wiki-neutral-color: var(--wiki-content-text-mix-color);
	--wiki-alert-color: #ff576a;
	--wiki-warning-color: #cf721c;
	--wiki-success-color: #13aa45;
	/**/

	/***********************************
	* Likely do not need to edit these * [ DARK VIEW ]
	************************************/
	--wiki-body-dynamic-color: #ffffff;
	--wiki-body-dynamic-color--inverted: #000000;
	--wiki-body-dynamic-color--secondary: #cccccc;
	--wiki-body-dynamic-color--secondary--inverted: #333333;

	--wiki-content-border-color--secondary: color-mix(in srgb, var(--wiki-content-border-color) 50%, transparent);
	--wiki-content-border-color--accent: color-mix(in srgb, var(--wiki-accent-color) 50%, transparent);
	--wiki-content-link-label-color: #000;
	--wiki-content-dynamic-color: #ffffff;
	--wiki-content-dynamic-color--inverted: #000000;
	--wiki-content-dynamic-color--secondary: #cccccc;
	--wiki-content-dynamic-color--secondary--inverted: #333333;
	/* [ DARK VIEW ] */
	--wiki-alert-label-color: #000000;
	--wiki-warning-label-color: #000000;
	--wiki-success-label-color: #000000;

	--wiki-icon-general-filter: invert(100%);
}

/*----------------------------------------
***** END ADVANCED COLOR VARIABLES *******
*****************************************/

/*****************************************
**** START ADVANCED DESIGN VARIABLES *****
----------------------------------------*/

:root {
	/***********************
	  start logo position 
	----------------------*/
	--wiki-is-top-logo: 0; /* 1 = center logo at the top of the page; 0 = logo at the top left of the page */
	
	--wiki-logo-file-width: 160; /* Width of the image file in px. Put a number without the letters `px`. */
	--wiki-logo-file-height: 160; /* Height of the image file in px. Put a number without the letters `px`. */	
	--wiki-logo-height: calc(var(--wiki-logo-file-height)*1px); /* Valid only when --wiki-is-top-logo is 1. The height the logo should be shown */
	--wiki-logo-margin: 15px; /* the width of margin below the logo. When --wiki-is-top-logo is 1, this is also the default value of --wiki-top-spacing */
	/*-----------------------
	   end logo position 
	***********************/
	
	--wiki-is-navigation-inside-content: 0; /* 0 = default navigation tabs layout; 1 = navigation tabs inside content box */

	--wiki-body-font-family: sans-serif;
	--wiki-content-firstheading-font-family: var(--wiki-content-heading-font-family); /* only apply to the main title of article */

	/****** the following length variables must have units specified even if 0, ignore the warning *****/
	
	--wiki-content-border-width: 1px;
	--wiki-sidebar-width: 10em; /* width of sidebar(#mw-panel) */
	--wiki-sidebar-portal-spacing: 0px;
	--wiki-sidebar-border-width: var(--wiki-content-border-width);
	--wiki-navigation-border-radius: 0px; /* border radius of tabs */

	/*******************
	* Maybe edit these * [ DESIGN ]
	********************/
	
	--wiki-logo-filter: none;
	
	/****** the following length variables must have units specified even if 0, ignore the warning *****/
	
	--wiki-content-border-top-radius: var(--wiki-content-border-radius);
	--wiki-content-border-style: solid;
	--wiki-content-border-image: none;
	--wiki-content-backdrop-filter: none;
	
	--wiki-page-content-max-width: 9999px; /* max width of sidebar+gap+content, must be a length value. A huge value can be used to indicate no limit, e.g. 99999px */
	--wiki-gap-between-sidebar-and-content: 0.5em; /* gap between sidebar(#mw-panel) and content(#content) */
	
	--wiki-sidebar-font-size: 0.75em; /* please use em or rem for this */
	--wiki-sidebar-line-height: 1.125;
	--wiki-sidebar-heading-font-size: 0.75em; /* please use em or rem for this */
	--wiki-sidebar-margin: 0.5em;
	--wiki-sidebar-list-item-padding: 0.25em 0.25rem;
	--wiki-sidebar-list-padding: 0.25rem;
	--wiki-sidebar-list-item-background--hover: none; /* background of hover item */

	--wiki-navigation-font-size: 0.8125em; /* please use em or rem for this */
	--wiki-navigation-height: 2.75rem; /* height of navigation area,include spacing above tabs */
	--wiki-navigation-left-spacing: calc( (1 - var(--wiki-is-navigation-inside-content))*var(--wiki-content-border-radius) + var(--wiki-is-navigation-inside-content) * 0.5rem );
	--wiki-navigation-right-spacing: calc( var(--wiki-is-navigation-inside-content) * 0.5rem );
	--wiki-navigation-box-background-color: var(--wiki-content-background-color);
	--wiki-navigation-box-background-opacity: calc(var(--wiki-content-background-opacity)*0.8*var(--wiki-is-navigation-inside-content));
	--wiki-navigation-box-background: color-mix(in srgb, var(--wiki-navigation-box-background-color) var(--wiki-navigation-box-background-opacity), transparent); /* usually only needed when --wiki-is-navigation-inside-content is 1 */
	--wiki-navigation-box-border-image: none; /* usually only needed when --wiki-is-navigation-inside-content is 1 */
	--wiki-navigation-box-backdrop-filter: none; /* usually only needed when --wiki-is-navigation-inside-content is 1 */
	--wiki-navigation-selected-backdrop-filter: var(--wiki-content-backdrop-filter);  /* usually only needed when --wiki-is-navigation-inside-content is 0 */
	--wiki-navigation-backdrop-filter: var(--wiki-navigation-selected-backdrop-filter);  /* usually only needed when --wiki-is-navigation-inside-content is 0 */
	
	/* nav tabs style. The vector gradient is default. 
	 * If you want to customize the style of tabs, it's easier to start with the following settings:
	 *    --wiki-navigation-background-image: none;
	 *    --wiki-navigation-selected-background-image: none;
	 *    --wiki-navigation-selected-border-width: calc( (1 - var(--wiki-is-navigation-inside-content))*var(--wiki-content-border-width) + var(--wiki-is-navigation-inside-content) * 1px );
	 *    --wiki-navigation-selected-border-bottom-background: none;
	 *    --wiki-navigation-tab-spacing: 0.25em;
	 *    --wiki-navigation-tab-padding-top: 0.5em;
	 *    --wiki-navigation-tab-padding-bottom: 0.5em;
	 */
	--wiki-navigation-tab-spacing: -1px; /* width of the space between tabs, can be a negative number, in which case adjacent tabs will overlap  */
	--wiki-navigation-tab-padding-top: 1.25em;
	--wiki-navigation-tab-padding-x: 0.75em;
	--wiki-navigation-tab-padding-bottom: 4px;
 	--wiki-navigation-selected-border-width: 0px; /* border width of selected tabs */
	--wiki-navigation-border-width: var(--wiki-navigation-selected-border-width); /* border width of normal tabs */
	--wiki-navigation-border-image: none;
	--wiki-navigation-selected-border-image: var(--wiki-navigation-border-image);
	--wiki-navigation-background-image: linear-gradient(to bottom,transparent 0,var(--wiki-content-border-color) 100%), linear-gradient(to bottom,transparent 0,var(--wiki-content-border-color) 100%), linear-gradient(to top,var(--wiki-navigation-background-color) 0,var(--wiki-navigation-selected-background-color) 100%);
	--wiki-navigation-background-repeat: no-repeat, no-repeat, repeat-x;
	--wiki-navigation-background-position: left bottom, right bottom, left bottom;
	--wiki-navigation-background-size:  1px 100%, 1px 100%, 100%;
	--wiki-navigation-selected-background-image: linear-gradient(to bottom,transparent 0,var(--wiki-content-border-color) 100%), linear-gradient(to bottom,transparent 0,var(--wiki-content-border-color) 100%);
	--wiki-navigation-selected-background-repeat: no-repeat, no-repeat;
	--wiki-navigation-selected-background-position: left bottom, right bottom;
	--wiki-navigation-selected-background-size:  1px 100%, 1px 100%;
	--wiki-navigation-selected-border-bottom-background: linear-gradient(to right, var(--wiki-content-border-color) 0, var(--wiki-content-border-color) 1px, transparent 1px), linear-gradient(to left, var(--wiki-content-border-color) 0, var(--wiki-content-border-color) 1px, transparent 1px);
	
	/* affects the dropdown menu under More */
	--wiki-navigation-dropdown-font-size: var(--wiki-navigation-font-size); /* please use em or rem for this */
	--wiki-navigation-dropdown-border-width: 1px;
	--wiki-navigation-dropdown-border-radius: var(--wiki-navigation-border-radius);
	--wiki-navigation-dropdown-padding: 0.25em; /* padding of the dropdown menu box */
	--wiki-navigation-dropdown-item-padding: 0.625em; /* padding of each dropdown menu items */
	--wiki-navigation-dropdown-item-background--hover: none; /* background of hover item */
	--wiki-navigation-dropdown-border-image: none;
	--wiki-navigation-dropdown-backdrop-filter: none;
	--wiki-navigation-dropdown-box-shadow: none; /* box shadow */
	
	/* styles of the footer */
	--wiki-spacing-before-footer: 0px;
	--wiki-footer-border-image: none;

	/* padding on body element */
	--wiki-top-spacing: calc(var(--wiki-is-top-logo)*var(--wiki-logo-margin) + (1 - var(--wiki-is-top-logo))*1em); /* extra spacing below wiki.gg netbar */
	--wiki-left-spacing: 0.5em;
	--wiki-right-spacing: 1em;
	--wiki-bottom-spacing: 2em;

	/* end design variables */
}

/*----------------------------------------
***** END ADVANCED DESIGN VARIABLES ******
*****************************************/


/*******************************
**** START SHARED VARIABLES ****
**** tl;dr: don't edit this ****
********************************/
/*
	These variables are rarely touched, usually inherit other variables, and are shared on all themes.
	In 99% of cases none of these are ever edited, and you should only be doing so if you have a very clear vision,
	understand what you are doing, and *know* that what you are trying to do is not accomplished by changing
	another variable in the above sections.
	Since these are by default shared across all themes, if you support multiple themes you'll probably want to
	separate the variables you want to modify here into .view-x blocks like above. If you don't understand
	what that means or how to do that then you probably shouldn't be modifying this section.
*/
:root {
	--wiki-content-border-bottom-width: var(--wiki-content-border-width);
	--wiki-content-border-bottom-style: var(--wiki-content-border-style);
	--wiki-content-border-bottom-color: var(--wiki-content-border-color);
	--wiki-content-text-mix-color: color-mix(in srgb, var(--wiki-content-background-color), var(--wiki-content-text-color) 62%);
	--wiki-content-text-mix-color-95: color-mix(in srgb, var(--wiki-content-background-color) 95%, var(--wiki-content-text-color));
	--wiki-content-text-color--hover: var(--wiki-content-text-color);

	/* heading */
	--wiki-content-heading-border-bottom-width: 1px;
	--wiki-content-heading-border-style: solid;
	--wiki-content-heading-font-weight: normal;
	--wiki-content-heading-font-style: normal;
	--wiki-content-heading-text-transform: none;
	--wiki-content-heading-line-height: normal;
	/* first heading (h1) */
	--wiki-content-firstheading-border-bottom-width: var(--wiki-content-heading-border-bottom-width);
	--wiki-content-firstheading-border-style: var(--wiki-content-heading-border-style);
	--wiki-content-firstheading-border-color: var(--wiki-content-heading-border-color);
	--wiki-content-firstheading-font-family: var(--wiki-content-heading-font-family);
	--wiki-content-firstheading-font-weight: var(--wiki-content-heading-font-weight);
	--wiki-content-firstheading-font-style: var(--wiki-content-heading-font-style);
	--wiki-content-firstheading-text-transform: var(--wiki-content-heading-text-transform);
	--wiki-content-firstheading-line-height: var(--wiki-content-heading-line-height);
	--wiki-content-firstheading-color: var(--wiki-content-heading-color);
	/* sub-heading (h3, h4, h5, h6) */
	--wiki-content-subheading-border-bottom-width: 0px;
	--wiki-content-subheading-border-style: var(--wiki-content-heading-border-style);
	--wiki-content-subheading-border-color: var(--wiki-content-heading-border-color);
	--wiki-content-subheading-font-family: var(--wiki-body-font-family);
	--wiki-content-subheading-font-weight: bold;
	--wiki-content-subheading-font-style: normal;
	--wiki-content-subheading-text-transform: none;
	--wiki-content-subheading-line-height: var(--wiki-content-heading-line-height);
	--wiki-content-subheading-color: var(--wiki-content-heading-color);
	/* heading size */
	--wiki-content-firstheading-font-size: 1.8em;
	--wiki-content-heading-h2-font-size: 1.7em;
	--wiki-content-heading-h3-font-size: 1.286em;
	--wiki-content-heading-h4-font-size: 1.072em;
	--wiki-content-heading-h5-font-size: 100%;
	--wiki-content-heading-h6-font-size: 100%;

	--wiki-content-toc-background: var(--wiki-content-background-color--secondary);
	--wiki-content-toc-border-width: 1px;
	--wiki-content-toc-border-style: solid;
	--wiki-content-toc-border-color: var(--wiki-content-border-color);
	--wiki-content-toc-border-radius: 0px;
	--wiki-content-toc-border-image: none;
	--wiki-content-toc-box-shadow: 0 0.1em 0.2em #000000;

	--wiki-content-catlinks-background: var(--wiki-content-background-color--secondary);
	--wiki-content-catlinks-border-width: 1px;
	--wiki-content-catlinks-border-style: solid;
	--wiki-content-catlinks-border-color: var(--wiki-content-border-color);
	--wiki-content-catlinks-border-radius: 0px;
	--wiki-content-catlinks-border-image: none;
	--wiki-content-catlinks-box-shadow: none;

	--wiki-content-filetoc-background: var(--wiki-content-background-color--secondary);
	--wiki-content-filetoc-border-width: 1px;
	--wiki-content-filetoc-border-style: solid;
	--wiki-content-filetoc-border-color: var(--wiki-content-border-color);
	--wiki-content-filetoc-border-radius: 0px;
	--wiki-content-filetoc-border-image: none;
	--wiki-content-filetoc-box-shadow: none;

	--wiki-logo-offset-x: 0px;
	--wiki-logo-offset-y: 0px;
	--wiki-logo-offset-x--mobile: 0px;
	--wiki-logo-offset-y--mobile: 0px;
	
	--wiki-sidebar-padding: 0px;
	--wiki-sidebar-background-color: var(--wiki-content-background-color);
	--wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
	--wiki-sidebar-background-image: none;
	--wiki-sidebar-background-position: center;
	--wiki-sidebar-background-repeat: repeat;
	--wiki-sidebar-background-size: auto;
	--wiki-sidebar-filter: none;
	--wiki-sidebar-backdrop-filter: var(--wiki-content-backdrop-filter);
	--wiki-sidebar-border-color: var(--wiki-content-border-color);
	--wiki-sidebar-border-style: solid;
	--wiki-sidebar-border-image: none;
	--wiki-sidebar-link-color: var(--wiki-content-link-color);
	--wiki-sidebar-link-color--hover: var(--wiki-content-link-color--hover);
	--wiki-sidebar-heading-color: var(--wiki-content-heading-color);
	--wiki-sidebar-heading-font-weight: normal;
	--wiki-sidebar-heading-font-style: normal;
	--wiki-sidebar-heading-text-transform: none;
	--wiki-sidebar-heading-line-height: normal;
	--wiki-sidebar-heading-padding: 0.5rem 0.25rem 0.5rem 0.5rem;
	--wiki-sidebar-heading-margin-bottom: -0.5rem;
	--wiki-sidebar-heading-background: none;
	--wiki-sidebar-heading-border-image: none;
	--wiki-sidebar-list-background: none;
	--wiki-sidebar-list-border-image: none;
	--wiki-sidebar-list-item-background: none;
	--wiki-sidebar-list-item-border-image: none;
	--wiki-sidebar-list-item-background--hover: none;
	--wiki-sidebar-list-item-border-image--hover: none;
	--wiki-sidebar-list-item-spacing: 0px;
	--wiki-sidebar-icon-to-link-filter: var(--wiki-icon-to-link-filter);
	--wiki-sidebar-offset: 0px; /* Vertical offset */
	
	--wiki-accent-color--hover: color-mix(in srgb, var(--wiki-accent-color) 90%, var(--wiki-accent-label-color));

	--wiki-footer-border-width: var(--wiki-content-border-width);
	--wiki-footer-border-style: var(--wiki-content-border-style);
	--wiki-footer-border-color: var(--wiki-content-border-color);
	--wiki-footer-background-color: var(--wiki-content-background-color);
	--wiki-footer-background-opacity: var(--wiki-content-background-opacity);
	--wiki-footer-backdrop-filter: var(--wiki-content-backdrop-filter);
	--wiki-footer-text-color: var(--wiki-content-text-color);
	--wiki-footer-link-color: var(--wiki-content-link-color);
	--wiki-footer-link-color--hover: var(--wiki-content-link-color--hover);
	--wiki-footer-border-radius: var(--wiki-content-border-radius);

	--wiki-navigation-background-opacity: var(--wiki-content-background-opacity);
	--wiki-navigation-background-color--hover: var(--wiki-navigation-background-color);
	--wiki-navigation-background-opacity--hover: var(--wiki-navigation-background-opacity);
	--wiki-navigation-background-image--hover: var(--wiki-navigation-background-image);
	--wiki-navigation-background-position--hover: var(--wiki-navigation-background-position);
	--wiki-navigation-background-repeat--hover: var(--wiki-navigation-background-repeat);
	--wiki-navigation-background-size--hover: var(--wiki-navigation-background-size);
	--wiki-navigation-text-color--hover: var(--wiki-content-link-color--hover);
	--wiki-navigation-selected-border-style: solid;
	--wiki-navigation-selected-background-opacity: var(--wiki-content-background-opacity);
	--wiki-navigation-border-style: solid;
	--wiki-navigation-border-color--hover: var(--wiki-navigation-border-color);
	--wiki-navigation-border-image--hover: var(--wiki-navigation-border-image);
	--wiki-navigation-border-bottom-color: var(--wiki-navigation-selected-border-color);
	--wiki-navigation-border-bottom-style: var(--wiki-navigation-selected-border-style);
	--wiki-navigation-border-bottom-width: calc(var(--wiki-is-navigation-inside-content, 0) * var(--wiki-navigation-selected-border-width, 1px) + (1 - var(--wiki-is-navigation-inside-content, 0)) * var(--wiki-content-border-width, 1px));
	--wiki-navigation-icon-size: 1em;
	--wiki-navigation-tab-padding-x--icon: var(--wiki-navigation-tab-padding-x);
	--wiki-navigation-bottom-spacing: 0px; /* If you change this to greater than 0px, you should usually change the value of --wiki-navigation-selected-border-bottom-background to var(--wiki-navigation-border-bottom-color) */

	--wiki-navigation-dropdown-background-color: var(--wiki-navigation-selected-background-color);
	--wiki-navigation-dropdown-background-opacity: var(--wiki-content-background-opacity);
	--wiki-navigation-dropdown-border-color: var(--wiki-navigation-border-color);
	--wiki-navigation-dropdown-offset: 0px; /* vertical offset */

	--wiki-navigation-search-background-color: var(--wiki-content-background-color--secondary);
	--wiki-navigation-search-background-image: none;
	--wiki-navigation-search-background-position: 0;
	--wiki-navigation-search-background-size: auto;
	--wiki-navigation-search-background-repeat: repeat;
	--wiki-navigation-search-backdrop-filter: none;
	--wiki-navigation-search-border-color: var(--wiki-content-border-color);
	--wiki-navigation-search-border-color--hover: var(--wiki-accent-color);
	--wiki-navigation-search-border-style: solid;
	--wiki-navigation-search-border-width: 1px;
	--wiki-navigation-search-border-radius: 2px;
	--wiki-navigation-search-border-image: none;
	--wiki-navigation-search-border-image--hover: var(--wiki-navigation-search-border-image);
	--wiki-navigation-search-box-shadow: none;
	--wiki-navigation-search-box-shadow--hover: var(--wiki-navigation-search-box-shadow);
	--wiki-navigation-search-text-color: var(--wiki-content-text-color);
	--wiki-navigation-search-font-size: var(--wiki-navigation-font-size);
	--wiki-navigation-search-height: 2em;
	--wiki-navigation-search-button-color: currentColor;
	--wiki-navigation-search-button-color--hover: var(--wiki-navigation-search-button-color);
	--wiki-navigation-search-button-color-opacity: 80%;
	--wiki-navigation-search-button-color-opacity--hover: 95%;
	--wiki-navigation-search-bottom-spacing: 3px;
	--wiki-navigation-gap-between-left-and-right: 0px; /* minimum width between #left-navigation and #right-navigation before tabs start to collapse */
}

/*** mobile adjustments ***/
@media screen and (max-width: 720px) {
	body.has-vector-mobile-menu{
		--wiki-sidebar-heading-background: none;
		--wiki-sidebar-heading-border-image: none;
		--wiki-sidebar-list-background: none;
		--wiki-sidebar-list-border-image: none;
		--wiki-sidebar-list-item-background: none;
		--wiki-sidebar-list-item-border-image: none;
		--wiki-sidebar-list-item-background--hover: none;
		--wiki-sidebar-list-item-border-image--hover: none;
		--wiki-sidebar-list-item-spacing: 0px;
		--wiki-sidebar-line-height: 1.125;
		--wiki-sidebar-background-opacity: 100%;
		--wiki-navigation-search-border-width: 1px;
	}
}


/*****************************
**** END SHARED VARIABLES ****
******************************/

.theme-mustard {
	--wiki-body-background-color:#FCBD02;
	--wiki-body-background-image:none;
	
	--wiki-content-background-color:#ffffff;
	--wiki-content-background-color--secondary:#FCBD02;
	
	--wiki-content-text-color: #4F0043;
	--wiki-content-link-color: #ff1980;
	--wiki-content-border-color:transparent;
	
	--wiki-accent-color: #ff1980;
	--wiki-accent-link-color:#FCBD02;
	
	--wiki-icon-to-link-filter: invert(13%) sepia(85%) saturate(7485%) hue-rotate(333deg) brightness(97%) contrast(103%);
}

/******************************************************************************************
********************************* End user-edit variables *********************************
******************************************************************************************/

/******************************
* Fallback for older browsers *
* DONT EDIT THIS              *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
	.view-dark,
	.view-light,
	:root {
		--wiki-content-text-mix-color: var(--wiki-content-text-color);
		--wiki-content-text-mix-color-95: var(--wiki-content-background-color);
		--wiki-content-background-color--secondary: var(--wiki-content-dynamic-color--secondary--inverted);
		--wiki-content-border-color--secondary: var(--wiki-content-border-color);
		--wiki-content-border-color--accent: var(--wiki-accent-color);
		--wiki-accent-color--hover: var(--wiki-accent-color);
	}
}

/*****************************
* End older browser fallback *
******************************/

/*****************************
*     PortableInfoboxes      *
******************************/
:root {
	--pi-background: var(--wiki-content-background-color);
	--pi-secondary-background: var(--wiki-accent-color);
	--pi-secondary-background-label: var(--wiki-accent-label-color);
	--pi-border-color: color-mix(in srgb, var(--pi-secondary-background) 50%, transparent);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
	text-align: center;
	font-size: 1.5em;
	background: color-mix(in srgb, var(--pi-secondary-background) 75%, transparent);
	color: var(--pi-secondary-background-label);
}

.portable-infobox .pi-data,
.portable-infobox .pi-group {
	background: var(--wiki-content-background-color--secondary);
}

.portable-infobox .pi-image {
	padding: 8px;
}

.pi-image-thumbnail {
	max-width: 100%;
}

.pi-caption {
	color: var(--wiki-content-text-mix-color);
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	background: var(--pi-secondary-background);
	color: var(--pi-secondary-background-label);
}

.pi-collapse > .pi-item:first-child {
	cursor: pointer;
}

/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
	border-bottom: 0;
	font-family: inherit;
	font-weight: 700;
	margin: 0;
}

/*****************************
*   End PortableInfoboxes    *
******************************/


/*******************
* Main page layout *
********************/

#mp-container {
	display: grid;
	gap: 10px;
	clear:both; /* for .mw-indicators combined with __NOTITLE__ */
}

@media screen and (max-width: 990px) {
	/* for mobile screens */
	#mp-container {
		grid-template-areas:var(--main-page-layout--mobile);
		grid-template-columns:var(--main-page-layout-columns--mobile, 100%);
	}

	.mp-box.mp-hide-on-mobile {
		display: none;
	}
}

@media screen and (min-width: 990px) and (max-width: 1350px) {
	/* for narrow screens, between 990px and 1350px */
	#mp-container {
		grid-template-areas:var(--main-page-layout--tablet);
		grid-template-columns:var(--main-page-layout-columns--tablet, 1fr 1fr);
	}

	.mp-box.mp-hide-on-tablet {
		display: none;
	}
}

@media screen and (min-width: 1350px) {
	/* for all other screens, 1350px and wider */
	#mp-container {
		grid-template-areas:var(--main-page-layout--desktop);
		grid-template-columns:var(--main-page-layout-columns--desktop, 2fr 1fr 2fr);
	}

	.mp-box.mp-hide-on-desktop {
		display: none;
	}
}

.mp-box {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
	box-sizing: border-box;
	background: color-mix(in srgb, var(--wiki-content-background-color--secondary) 25%, transparent);
	border: 1px solid var(--wiki-content-border-color);
	padding: 0px;
}

.mp-body {
	height: 100%;
	display: flex;
	padding: 0.5em;
	flex-flow: column nowrap;
}

.mp-box.centered-content .mp-body {
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
}

.mp-box.has-floating-image {
	display: block;
}

.mp-box.has-floating-image .mp-body {
	height: unset;
	display: block;
}

.mp-box.header-only {
	border-bottom-width:0px;
}

.mp-box.header-only .mp-body {
	display:none;
}

/* overqualified to override normal heading styles */
.mw-body .mp-box h2 {
	text-align: center;
	font-weight: bold;
	font-family: var(--wiki-content-heading-font-family);
	overflow: initial;
	border-bottom: 1px solid var(--wiki-content-border-color);
	font-size: 150%;
	margin: 0;
	padding: 5px 0;
	color: var(--wiki-content-heading-color);
}

#mp-box-welcome {
	text-align: center;
	position: relative;
	overflow: hidden;
}

#mp-box-welcome h2 {
	font-size: 200%;
}

#mp-welcome {
	display: flex;
	flex-flow: column nowrap;
	position: relative;
	height: 100%;
	z-index: 2;
	box-sizing: border-box;
}

#mp-welcome .welcome-subtitle {
	height: 100%;
	background: color-mix(in srgb, var(--wiki-content-dynamic-color--inverted) 85%, transparent);
	padding: 0.5em;
}

#mp-banner {
	position: absolute;
	width: 100%;
	height: 100%;
	filter: blur(5px);
	z-index: -1;
	background: url(/images/e/e0/MP_banner.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}

.view-dark #mp-banner {
	filter: blur(5px) brightness(50%);
}

.view-light #mp-banner {
	filter: blur(5px) contrast(50%);
}

/* [[Template:MP_link]] */
.mp-links {
	--gap: 10px;
}

.mp-links > ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	margin: 2px;
	gap: var(--gap);
}

.mp-links > ul > li {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	text-align: center;
	box-sizing: border-box;
	flex: max(calc(50% - var(--gap)), 5em) 1 1;
	outline: 1px solid var(--wiki-content-link-color);
	transition: 0.1s ease-in;
}

.mp-links > ul > li:hover {
	background-color: color-mix(in srgb, var(--wiki-content-link-color) 20%, transparent);
}

.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}
.mp-links.columns-8 > ul > li {flex: max(calc((100% / 8) - var(--gap)), 5em) 1 1;}
.mp-links.columns-max > ul > li {flex: max(calc(0% - var(--gap)), 5em) 1 1;}

.mp-links > ul > li:hover a {
	text-decoration: underline;
}

.mp-links > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	flex: 1 1 auto;
	box-sizing: border-box;
	padding: 5px;
}

.mp-links > ul > li > a:first-child {
	height: 100%;
}

.mp-links > ul > li > a:last-child:not(:first-child) {
	height: unset;
}

.mp-links.stretch,
.mp-links.stretch > ul {
	height: 100%;
}

.mp-links.side-image li {
	flex-flow: row nowrap;
}

.mp-links.plain > ul > li {
	outline-color: transparent;
}

/***********************
* End main page layout *
************************/


/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	/*
	 * don't trust the note that says margin doesn't work with inline
	 * removing margin: 0 makes dds have margins again
	 * We also want to reset margin-right in Minerva
	 */
	margin: 0;
	display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
	/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
	display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
	display: none;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
*  seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
	content: ":\20";
}

.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
	/* "space, Middle Dot, space"
	We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
	The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
	/* content: "\20\00B7\20"; font-weight: bold; */
	/* "space &nbsp; • &nbsp; space"
	   There may (and likely) be an extra whitespace between <li>s,
	   therefore we have to use a space character as last character of this sequence.
	   By this way, the last space and the next whitespce will collapse as a single space,
	   to make the whitespace on both sides of the middle dot the same width.
	*/
	content: "\20\A0\2022\A0\20";
	font-weight: inherit;
}

/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
	content: "\20(";
	font-weight: inherit;
}

.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
	content: ")";
	font-weight: inherit;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}

.hlist ol > li {
	counter-increment: listitem;
}

.hlist ol > li::before {
	content: " " counter(listitem) ".\20";
}

/* Progressive enhancement:
*  try to make the dot always follow the list item in same line
*/
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))) {
	display: inline-block;
}

/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/*** Miscellaneous ***/
.responsive-image {
	max-width: 100%;
	height: auto;
}

.view-dark .invert-on-dark,
.view-light .invert-on-light {
	filter: invert(100%);
}

.pixelated {
	image-rendering: pixelated;
}

@media screen and (min-width: 720px) {
	.mobileonly {
		display: none;
	}
}

@media screen and (max-width: 720px) {
	.nomobile {
		display: none;
	}
}

/*** Utility classes for standard MW galleries ***/
/* it's important that spaced comes before centered in the sheet */
.gallery.gallery.gallery.spaced { /* this selector looks ridiculous but is actually part of stock Vector and therefore a necessary override */
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	margin-left: unset;
}

.gallery.centered {
	text-align: center;
}

/**************************
* Start Modular Templates *
**************************/

/********* [[Template:Ambox]] *********/
.ambox {
	--ambox-color: var(--wiki-accent-color);

	border: 1px solid var(--wiki-content-border-color);
	border-left: 10px solid var(--ambox-color);
	border-radius: 2px;
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 1em 0;
	padding: 3px .6em;
	background-color: var(--wiki-content-background-color--secondary);
	box-shadow: 2px 2px 5px 0px #0002;
}

@media (min-width: 720px) {
	.ambox {
		margin-inline: 10%;
	}
}

.ambox.tiny {
	padding: .04rem .5em;
	margin-inline: 0;
	width: fit-content;
}

.ambox + .ambox {
	margin-top: -.6em;
}

.ambox-content {
	flex: 1;
}

.ambox-content p {
	margin: .15em 0;
}

.ambox-title {
	font-weight: bold;
}

/********* [[Template:Hatnote]] *********/
.hatnote {
	padding: 1px 0 1px 1.6em;
	margin-bottom: 0.5em;
	font-style: italic;
	border-top: 1px solid var(--wiki-content-border-color--secondary);
	border-bottom: 1px solid var(--wiki-content-border-color--secondary);
}

.hatnote.icon {
	padding-left: 0;
}

/********* [[Template:Spoiler]] *********/
.spoiler-content {
	background-color: color-mix(in srgb, var(--wiki-content-dynamic-color) 50%, transparent);
	transition: all 0.3s;
	cursor: pointer;
	overflow: auto;
}

@supports not (color:color-mix(in srgb, #000, transparent)) {
	.spoiler-content {
		background-color: var(--wiki-content-dynamic-color--secondary);
	}	
}

.spoiler-content > * {
	pointer-events: none;
	opacity: 0;
	transition: all 0.3s;
}

.spoiler-content.show {
	background-color: transparent;
}

.spoiler-content.show > * {
	pointer-events: unset;
	opacity: 1;
}

/********* [[Template:Link icon]] *********/
.link-icon {
	--link-icon-line-height: 1.5em;
	--link-icon-size: 1.5em;
	display: inline-flex;
	align-items: center;
	height: var(--link-icon-line-height);
	vertical-align: bottom;
}

.link-icon .regular {
	align-self: center;
}

.link-icon .regular a {
	display: flex;
}

.link-icon .regular img {
	height: var(--link-icon-size);
	max-width: var(--link-icon-size);
}

.link-icon .fallback {
	outline: 1px solid var(--wiki-content-text-color);
	border-radius: 50%;
	text-align: center;
	width: var(--link-icon-size);
	line-height: var(--link-icon-size);
}

.link-icon.notext,
.link-icon.notext .fallback {
	display: inline-block;
}

/********* [[Template:Quote]] *********/
.quote {
	background: var(--wiki-content-background-color--secondary);
	border-radius: 5px;
	border: 2px solid var(--wiki-content-border-color);
	margin: .5em 0;
	padding: .5em;
	overflow-y: hidden;
}

.quote .block {
	display: block;
}

.quote .title {
	font-size: large;
	font-weight: bold;
}

.quote .content {
	font-style: italic;
}

.quote .author {
	font-weight: bold;
	text-align: end;
}

.quote .marks-wrapper {
	display: flex;
	gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
	font-size: 100px;
	line-height: 0px;
}

.quote .marks-wrapper::before {
	content: "\201C";
	margin-top: 40px;
}

.quote .marks-wrapper::after {
	content: "\201D";
	align-self: end;
	margin-bottom: -10px;
}

.client-js .mw-charinsert-item {
	display: none;
}

/************************
* End Modular Templates *
*************************/

/*****************************
* Used by [[Template:Color]] *
******************************/
.color__splotch {
	display: inline-block;
	height: 1em;
	width: 1em;
	box-sizing: border-box;
	vertical-align: text-top;
	border-radius: 50%;
	border: 1px solid var(--wiki-content-text-color);
}

/*********************
* End Template:Color *
**********************/

/*********************************
* Used by [[Template:TOC limit]] *
**********************************/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}
/*************************
* End Template:TOC limit *
**************************/

/*********************************
* Used by [[Template:TOC right]] *
**********************************/
@media all and (min-width: 720px) {
	.tocright {
		float: right;
		clear: right;
		margin: 0 0 0.5em 1em; 
	}
}
/*************************
* End Template:TOC right *
**************************/

/******************************************************/
/*                                                    */
/* [END] OF WIKI.GG DEFAULT LOADOUT                   */
/* DO NOT EDIT OR DELETE THIS COMMENT BLOCK           */
/*                                                    */
/******************************************************/


/* vars for DLW css */
:root {
	--wiki-heading-font-family: 'nunito', sans-serif;
	--wiki-sidebar-heading-font-family: 'nunito', sans-serif;

	--wiki-content-border-radius: 0.2em;

	--wiki-sidebar-background-opacity: 0%;
	--wiki-sidebar-border-width: 0px;

	--wiki-navigation-background-color: transparent;
	--wiki-navigation-selected-background-color: transparent;
	--wiki-navigation-selected-border-bottom-color: var(--wiki-content-border-color);
	--wiki-navigation-selected-border-bottom-background: var(--wiki-content-border-color);
	--wiki-navigation-background-image: none;
	--wiki-navigation-selected-background-image: none;
	--wiki-navigation-selected-border-width: 0px;
	--wiki-navigation-tab-spacing: 0.25em;
	--wiki-navigation-tab-padding-top: 0.5em;
	--wiki-navigation-tab-padding-bottom: 0.5em;
	--wiki-navigation-font-size: 1em;
	--wiki-navigation-search-bottom-spacing: 0.3125em;
	--wiki-navigation-dropdown-background-color: var(--wiki-content-background-color);

	--wiki-spacing-before-footer: 3em;
	--wiki-footer-border-radius: 0px;

	--wiki-bottom-spacing: 0px;
}

:root, .view-light {
	--wiki-body-background-color: #f2f3ff;
	--wiki-body-background-image: url(filepath://Site-background.png), radial-gradient(at 100% 98%, #ffe5f1 30%, var(--wiki-body-background-color));

	--wiki-content-background-color: #eaebf4;
	--wiki-content-background-opacity: 95%;
	--wiki-content-border-color: #000538;
	--wiki-content-link-color: #265797; /* if changing this, remember to change --wiki-icon-to-link-filter as well!!! */

	--wiki-accent-color: #C7005A;
	--wiki-icon-to-link-filter: invert(29%) sepia(75%) saturate(571%) hue-rotate(175deg) brightness(91%) contrast(94%); /* put your --wiki-content-link-color into https://mrpie5.gitlab.io/css-filter-generator/ */


	--wiki-body-background-position: bottom right;
	--wiki-content-redlink-color: #C20A00;

}

.view-dark {
	--wiki-body-background-color: #000535;
	--wiki-body-background-image: url(filepath://Site-background.png), radial-gradient(at 100% 98%, #44001e 30%, var(--wiki-body-background-color));

	--wiki-content-background-color: #10121e;
	--wiki-content-background-opacity: 100%;
	--wiki-content-border-color: #991A51;
	--wiki-content-link-color: #6d8afb; /* if changing this, remember to change --wiki-icon-to-link-filter as well!!! */

	--wiki-accent-color: #ff4d9d;
	--wiki-icon-to-link-filter: invert(60%) sepia(70%) saturate(3715%) hue-rotate(206deg) brightness(101%) contrast(97%); /* put your --wiki-content-link-color into https://mrpie5.gitlab.io/css-filter-generator/ */

	--wiki-content-redlink-color: #FC5B4F;
	
}

.theme-mustard {
	--wiki-body-background-color:#FCBD02;
	--wiki-body-background-image:none;
	
	--wiki-content-background-color:#ffffff;
	--wiki-content-background-color--secondary:#FCBD02;
	
	--wiki-content-text-color: #4F0043;
	--wiki-content-link-color: #ff1980;
	--wiki-content-border-color:transparent;
	
	--wiki-accent-color: #ff1980;
	--wiki-accent-link-color:#FCBD02;
	
	--wiki-icon-to-link-filter: invert(13%) sepia(85%) saturate(7485%) hue-rotate(333deg) brightness(97%) contrast(103%);
}


/* custom vars for DPL */
:root, .view-light {
	--dpl-blue-background: #042862;
	--dpl-dark-background: cyan;
	--dpl-light-background: lightcyan;
	--dpl3-background: #eee;
	--dplparameter-background: #fff3d2;

}
.view-dark {
	--dpl-blue-background: #042862;
	--dpl-dark-background: #181818;
	--dpl-light-background: #282828;
	--dpl3-background: #2b2b2b; /*#333;*/
	--dplparameter-background: var(--dpl-blue-background); /*#261000;/* #310 good too*/
}


/* other custom css */


/* main page */

/* MP icon lists */
.mp-iconlists {
	display: flex;
    flex-flow: wrap;
    gap: 5px 20px;
}

.mp-iconlists > .mp-iconlist {
	flex: 1;
    min-width: fit-content;
}

.mp-iconlist > h3 {
	padding: 0;
	margin: 0;
}

.mp-iconlist > ul {
	list-style: none;
	margin: 0;
}

/* MP gallery */
.mp-box ul.gallery.gallery.gallery { /* this selector looks ridiculous but is actually part of stock Vector and therefore a necessary override */
    display: flex;
    flex-flow: wrap;
    gap: 5px 10px;
    align-items: flex-end;
    justify-content: space-evenly;
    margin: auto;
}

.mp-box ul.gallery .gallerytext {
	margin-top: 1em;
	padding: 0;
    background-color: var(--wiki-content-background-color--secondary);
    border: 1px solid var(--wiki-content-link-color);
}

.mp-box .gallerybox:hover .gallerytext {
    background-color: var(--wiki-content-link-color); /* fallback */
    background-color: color-mix(in srgb, var(--wiki-content-link-color) 20%, transparent);
}

.mp-box ul.gallery .gallerytext > p {
	margin: 0;
}

.mp-box ul.gallery .gallerytext a {
	display: block;
    padding: .5em 0;
}

.mp-groups {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 1.3em 1.5em;
  margin-block: 1.25em;
}

@media screen and (max-width: 1000px) {
  .mp-groups {
    gap: 0.5rem 1rem;
    margin-block: 0.7em;
  }
	
  .mp-group {
    flex-grow: 1;
  }
}

.mp-group {
  text-align: left;
  border: 1px solid var(--wiki-accent-color); /* fallback */
  border: 1px solid color-mix(in srgb, var(--wiki-accent-color) 20%, transparent);
  padding: 1rem 1.1em;
  border-radius: .1rem;
  min-width: 15em;
  box-sizing: border-box;
  background: var(--wiki-content-dynamic-color--inverted); /* fallback */
  background: color-mix(in srgb, var(--wiki-content-dynamic-color--inverted) 18%, transparent);
}

.mp-group > h3 {
  text-align: center;
  padding: 0.4em 0;
  font-size: 130%;
  font-weight: 400;
  margin-top: 0;
}


/*****************************
* [[Template:Extension row]] *
******************************/
.extension-firstparty a:after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 5px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	vertical-align: text-top;
	background-image: url(https://commons.wiki.gg/images/9/9b/Wiki.gg_icon-pink.svg);
}
.extension-status-default,
.extension-status-available {
	background: var(--background-color-success-subtle);
	color: var(--color-notice);
}
.extension-status-conditional {
	background: var(--background-color-warning-subtle);
	color: var(--color-notice);
}
.extension-status-unavailable {
	background: var(--background-color-destructive-subtle);
	color: var(--color-notice);
}
/*****************************
* end Template:Extension row *
******************************/

/* Used by [[Template:GadgetInstructions]] */
.gadget-instructions-list > .mw-prefixindex-body {
	columns:unset;
}

Navigation menu

Namespaces

Views

Navigation

wiki.gg

Policies & help

Tools

MediaWiki:Common.css

Contents

Documentation

Themes

Non-color variables

List of all colors with contrast checking

Stylesheet