/* Redesign W */
/* A new design for Wikipedia. Beautiful and more readable. */
/* Created in October 2020 by Nick */
/* nickdvlpr */


/* LIGHT MODE */
/* NOTE: ALL CHANGES SHOULD BE DUPLICATED IN DARK MODE SECTION AT BOTTOM OF THIS FILE */
@media (prefers-color-scheme: light) {

/* MAIN ELEMENTS */
body {
	padding: 0 10%;
	background-color: #ffffff;
}
img {
	border-radius: 10px;
}
html .thumbimage {
	/* This is the border around most thumbnail images within an article. */
	/* Keep as default 1px border, because it looks good for an image with no background or a white background. */
    border-radius: 10px;
}
.mw-content-ltr .thumbcaption {
    text-align: left;
    margin-top: 8px;
}
p {
	color: rgba(0,0,0,0.8);;
	text-align: left;
	letter-spacing: 0.08px;
	word-wrap: break-word;
	margin-bottom: 30px;
}
h1 {
	font-size: 48px;
}
h2 {
	font-size: 30px;
	border-bottom: 0px;
}
.mw-body-content h2 {
    margin-top: 2em;
    font-size: 2.0em;
}
h3 {
	font-size: 24px;
}
div {
	line-height: 24px;
}
div.thumbinner {
    border: 0px solid #c8ccd1;
    padding: 3px;
    background-color: #fff;
    font-size: 94%;
    text-align: center;
    overflow: hidden;
}
.pBody li {
	margin: 10px 0 !important;
}
.pBody {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

/* Links */
p a:link {
	color: rgba(0,0,0,0.8);
	text-decoration: underline;
	text-decoration-color: #e0e0e0;
}
p a:visited {
	color: rgba(0,0,0,0.8);
	text-decoration: underline;
	text-decoration-color: #e0e0e0;
}

/* Page Previews (must be enabled in Preferences -> Appearance) */
.mwe-popups {
	border-radius: 10px;
	background:#fff;
}



/* These are the Article, Talk, and other tabs normally on the top of the page. */
.vector-menu-tabs a {
    background: #ffffff;
    color: #bdbdbd;
}
.vector-menu-tabs .selected {
    background: #ffffff;
}
.vector-menu-tabs ul {
}
.vector-menu-tabs {
	background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 0px 0%;
}

/* Normally, when logged in to a Wikipedia account, an Edit Source link appears next to every subheader within brackets.
I chose to make these three things hidden since I am just a reader, not an editor. */
.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, .client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type) {
    margin-right: 0.25em;
    visibility: hidden;
}
.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type, .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
    margin-left: 0.25em;
    visibility: hidden;
}
.mw-editsection a {
    white-space: nowrap;
    visibility: hidden;
}



/* ICONS */
/* Find your URLs here and then click raw once you find the icon you want: https://github.com/google/material-design-icons/tree/master/src */
/* Icon - Notifications */
.oo-ui-icon-bell, .mw-ui-icon-bell:before {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: linear-gradient(transparent,transparent),url("https://raw.githubusercontent.com/google/material-design-icons/master/src/social/notifications/materialiconsoutlined/24px.svg");
}
.oo-ui-icon-tray, .mw-ui-icon-tray:before {
	background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: linear-gradient(transparent,transparent),url(https://raw.githubusercontent.com/google/material-design-icons/master/src/content/inbox/materialiconsoutlined/24px.svg);
}
#pt-anonuserpage, #pt-userpage a {
    background-image: url("https://raw.githubusercontent.com/google/material-design-icons/master/src/action/contact_page/materialiconsoutlined/24px.svg");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 0.6em !important;
    padding-left: 120px !important;
}






/* This is the main header of the article. */
#firstHeading {
	margin: 50px 50px 0;
	border-bottom: 0px;
	font-size: 2.4em;
}
#siteSub {
	color: #aaaaaa;
	margin-bottom: 20px;
	font-size: 12px;
}
#contentSub {
    font-size: 12px;
    line-height: 1em;
    margin: 0 0 1.4em 0em;
    color: #aaaaaa;
}

/* This is the note text below the main header of the article. */
div.hatnote {
    padding-left: 0em;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #aaaaaa;
    font-style: normal;
    font-size: 12px;
}
div.hatnote + div.hatnote {
    margin-top: -0.5em;
    margin-bottom: 0px;
}

/* This is the box that sometimes appears at the top of an article if it is unreliable or needs editing. */
table.ambox {
    margin: 20px 0%;
    border: 1px solid #a2a9b1;
    border-radius: 8px;
}

/* This is for the information box aligned on right side within the article. */
.infobox {
	margin: 0em 0em 2em 2em;
    padding: 1.0em;
    border-radius: 8px;
}

#bodyContent {
	margin: 0 50px;
}

/* References section */
.reflist {
	list-style-type: decimal;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid #bdbdbd;
    padding: 20px 20px 20px 10px;
}


/* Sidebar link colors */
.vector-menu-portal h3 {
	color: #d0d0d0;
}
.vector-menu-portal .body li a:visited, .vector-menu-portal .vector-menu-content li a:visited {
    color: #e0e0e9;
}
.vector-menu-portal .body li a, .vector-menu-portal .vector-menu-content li a {
    color: #e0e0e0;
}


/* These are background areas in top header area and left sidebar area. */
#mw-page-base {
	background-color: #ffffff;
	background-image: linear-gradient(to bottom,#ffffff 50%,#ffffff 100%);
}
#mw-head-base {
	background-color: #ffffff;
}
#mw-navigation {
	background-color: #ffffff;
}


/* All the clickable linked pages in the tob bar area. */
/* These can be further subdivided into: p-personal, left-navigation, right-navigation, and simpleSearch*/
#mw-head {
	background-color: #ffffff;
	visibility: hidden;
}
#mw-panel {
	background-color: #ffffff;
}

.mw-body {
	margin-left: 4em;
	margin-right: 4em;
}

.vector-menu-portal .body li a:visited {
    color: #bdbdbd;
}
.vector-menu-portal .body li a:link {
    color: #bdbdbd;
}





/* MAIN ELEMENTS */
/* LOGO - WIKIPEDIA */
.mw-wiki-logo {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Wikipedia%27s_W.svg/1024px-Wikipedia%27s_W.svg.png");
    background-size: 135px auto;
}



/* SEARCH BAR */
#simpleSearch {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.0);
    background: #f5f5f5;
    color: #bdbdbd;
    border: 0px;
    border-radius: 40px;
    padding: 8px 8px 8px 12px;
    position: absolute;
    top: 40px;
    left: 283px;
    height: auto;
    width: 800px;
    visibility: visible;
}
#searchInput {
    background-color: #f5f5f5;
    color: #000000;
    width: 100%;
    border: 0px;
    font-size: 0.8125em;
    direction: ltr;
    box-shadow: none !important;
}
#searchButton {
	background-position: right center;
	top: 7px;
	right: 15px;
	opacity: 60%;
}



.toc {
	margin-top: 20px;
	border-radius: 8px;
}

#content {
	color: rgba(0, 0, 0, 0.8);
	border-right: 0px solid #999;
	border: 0px;
}

#p-logo {
    width: 9.5em;
    height: 152px;
    margin-bottom: 0em;
}

#p-personal li {
	margin-left: 10px !important;
}

#left-navigation {
	left: 0px;
	visibility: hidden;
}



.vector-menu-tabs li a {
    color: #aaaaaa;
    float: right;
    position: relative;
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 0px;
    font-size: 12px;
    cursor: pointer;
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
    color: #616161;
}






/* SPECIFIC PAGES */
/* WIKIPEDIA MAIN PAGE */
#mp-welcome {
    text-align: left;
    padding: 0em;
}
#mp-free {
    font-size: 16px;
    text-align: left;
}

}
/* END OF LIGHT MODE */
/********************/
/********************/
/********************/
/********************/
/********************/










/********************/
/********************/
/********************/
/********************/
/********************/
/* DARK MODE */
@media (prefers-color-scheme: dark) {

/* MAIN ELEMENTS */
a {
	color: #b7c4d9;
}
body {
	padding: 0 10%;
	background-color: #2b2a33;
}
.mw-body {
	background-color: #2b2a33;
}
.mw-page-base {
	background-color: #2b2a33;
	background-image: linear-gradient(to bottom, #2b2a33 100%, #2b2a33 100%);
}
img {
	border-radius: 10px;
}
html .thumbimage {
	/* This is the border around most thumbnail images within an article. */
	/* Keep as default 1px border, because it looks good for an image with no background or a white background. */
    border-radius: 10px;
}
.mw-content-ltr .thumbcaption {
    text-align: left;
    margin-top: 8px;
}
p {
	color: rgba(255,255,255,0.8);;
	text-align: left;
	letter-spacing: 0.08px;
	word-wrap: break-word;
	margin-bottom: 30px;
}
h1 {
	color: rgba(255,255,255,0.8);;
	font-size: 48px;
}
h2 {
	color: rgba(255,255,255,0.8);;
	font-size: 30px;
	border-bottom: 0px;
}
.mw-body-content h2 {
	color: rgba(255,255,255,0.8);;
    margin-top: 2em;
    font-size: 2.0em;
}
h3 {
	color: rgba(255,255,255,0.8);;
	font-size: 24px;
}
div {
	line-height: 24px;
}
div.thumbinner {
    border: 0px solid #c8ccd1;
    padding: 3px;
    background-color: #2b2a33;
    font-size: 94%;
    text-align: center;
    overflow: hidden;
}
.pBody li {
	margin: 10px 0 !important;
}
.pBody {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

/* Links */
p a:link {
	color: rgba(255,255,255,0.8);
	text-decoration: underline;
	text-decoration-color: #e0e0e0;
}
p a:visited {
	color: rgba(255,255,255,0.8);
	text-decoration: underline;
	text-decoration-color: #e0e0e0;
}

/* Page Previews (must be enabled in Preferences -> Appearance) */
.mwe-popups {
	border-radius: 10px;
	background:#2b2a33;
}



/* These are the Article, Talk, and other tabs normally on the top of the page. */
.vector-menu-tabs a {
    background: #2b2a33;
    color: #bdbdbd;
}
.vector-menu-tabs .selected {
    background: #2b2a33;
}
.vector-menu-tabs ul {
}
.vector-menu-tabs {
	background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 0px 0%;
}

/* Normally, when logged in to a Wikipedia account, an Edit Source link appears next to every subheader within brackets.
I chose to make these three things hidden since I am just a reader, not an editor. */
.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, .client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type) {
    margin-right: 0.25em;
    visibility: hidden;
}
.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type, .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
    margin-left: 0.25em;
    visibility: hidden;
}
.mw-editsection a {
    white-space: nowrap;
    visibility: hidden;
}



/* ICONS */
/* Find your URLs here and then click raw once you find the icon you want: https://github.com/google/material-design-icons/tree/master/src */
/* Icon - Notifications */
.oo-ui-icon-bell, .mw-ui-icon-bell:before {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: linear-gradient(transparent,transparent),url("https://raw.githubusercontent.com/google/material-design-icons/master/src/social/notifications/materialiconsoutlined/24px.svg");
}
.oo-ui-icon-tray, .mw-ui-icon-tray:before {
	background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: linear-gradient(transparent,transparent),url(https://raw.githubusercontent.com/google/material-design-icons/master/src/content/inbox/materialiconsoutlined/24px.svg);
}
#pt-anonuserpage, #pt-userpage a {
    background-image: url("https://raw.githubusercontent.com/google/material-design-icons/master/src/action/contact_page/materialiconsoutlined/24px.svg");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 0.6em !important;
    padding-left: 120px !important;
}






/* This is the main header of the article. */
#firstHeading {
	margin: 50px 50px 0;
	border-bottom: 0px;
	font-size: 2.4em;
}
#siteSub {
	color: #aaaaaa;
	margin-bottom: 20px;
	font-size: 12px;
}
#contentSub {
    font-size: 12px;
    line-height: 1em;
    margin: 0 0 1.4em 0em;
    color: #aaaaaa;
}

/* This is the note text below the main header of the article. */
div.hatnote {
    padding-left: 0em;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #aaaaaa;
    font-style: normal;
    font-size: 12px;
}
div.hatnote + div.hatnote {
    margin-top: -0.5em;
    margin-bottom: 0px;
}

/* This is the box that sometimes appears at the top of an article if it is unreliable or needs editing. */
table.ambox {
    margin: 20px 0%;
    border: 1px solid #a2a9b1;
    border-radius: 8px;
}

/* This is for the information box aligned on right side within the article. */
.infobox {
	margin: 0em 0em 2em 2em;
    padding: 1.0em;
    border-radius: 8px;
}

#bodyContent {
	margin: 0 50px;
}

/* References section */
.reflist {
	list-style-type: decimal;
    background: #3b3a46;
    border-radius: 10px;
    border: 1px solid #bdbdbd;
    padding: 20px 20px 20px 10px;
}


/* Sidebar link colors */
.vector-menu-portal h3 {
	color: #4a4a4e;
}
.vector-menu-portal .body li a:visited, .vector-menu-portal .vector-menu-content li a:visited {
    color: #4a4a4e;
}
.vector-menu-portal .body li a, .vector-menu-portal .vector-menu-content li a {
    color: #4a4a4e;
}
/* This is the translate button at the bottom of the sidebar */
#p-lang .mw-interlanguage-selector, #p-lang .mw-interlanguage-selector:active {
	background: #3b3a46;
	border: 0px solid #bdbdbd;
	border-radius: 6px;
}


/* These are background areas in top header area and left sidebar area. */
#mw-page-base {
	background-color: #2b2a33;
	background-image: linear-gradient(transparent,transparent);
}
#mw-head-base {
	background-color: #2b2a33;
}
#mw-navigation {
	background-color: #2b2a33;
}


/* All the clickable linked pages in the tob bar area. */
/* These can be further subdivided into: p-personal, left-navigation, right-navigation, and simpleSearch*/
#mw-head {
	background-color: #2b2a33;
	visibility: hidden;
}
#mw-panel {
	background-color: #2b2a33;
}

.mw-body {
	margin-left: 4em;
	margin-right: 4em;
}

.vector-menu-portal .body li a:visited {
    color: #bdbdbd;
}
.vector-menu-portal .body li a:link {
    color: #bdbdbd;
}





/* MAIN ELEMENTS */
/* LOGO - WIKIPEDIA */
.mw-wiki-logo {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Wikipedia%27s_W.svg/1024px-Wikipedia%27s_W.svg.png");
    background-size: 135px auto;
    filter: invert(1);
}



/* SEARCH BAR */
#simpleSearch {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.0);
    background: #3b3a46;
    color: #bdbdbd;
    border: 0px;
    border-radius: 40px;
    padding: 8px 8px 8px 12px;
    position: absolute;
    top: 40px;
    left: 283px;
    height: auto;
    width: 800px;
    visibility: visible;
}
#searchInput {
    background-color: #3b3a46;
    color: #000000;
    width: 100%;
    border: 0px;
    font-size: 0.8125em;
    direction: ltr;
    box-shadow: none !important;
}
#searchButton {
	background-position: right center;
	top: 7px;
	right: 15px;
	opacity: 60%;
}



.toc {
	background-color: #2b2a33;
	margin-top: 20px;
	border-radius: 8px;
}

#content {
	color: rgba(255, 255, 255, 0.8);
	border-right: 0px solid #999;
	border: 0px;
}

#p-logo {
    width: 9.5em;
    height: 152px;
    margin-bottom: 0em;
}

#p-personal li {
	margin-left: 10px !important;
}

#left-navigation {
	left: 0px;
	visibility: hidden;
}



.vector-menu-tabs li a {
    color: #aaaaaa;
    float: right;
    position: relative;
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 0px;
    font-size: 12px;
    cursor: pointer;
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
    color: #616161;
}






/* SPECIFIC PAGES */
/* WIKIPEDIA MAIN PAGE */
#mp-welcome {
    text-align: left;
    padding: 0em;
}
#mp-free {
    font-size: 16px;
    text-align: left;
}

}