Template:Styles/Main Page.css

/* Main Page Styles */

.mp-topbanner{
	width: 100%;
	margin: 1.2em 0 6px 0;
	border: 1px solid;
	display: flex;
}

.mp-welcomebox{
	width: 50%;
	text-align: center;
}

.mp-welcome {
	font-size:162%;
	border:none;
	margin:0;
	padding:.1em;
	color:#fff;
}

.mp-subwelcome {
	top:+0.2em;
	font-size:95%;
}

.mp-articlecount {
	font-size:85%;
}

.mp-portalList {
	width: 45%;
}

.mp-portalList div {
	text-align: center;
}

.mp-topbanner ul{
	columns:3;
	margin-bottom: 1em;
}

.mp-row {
	display: flex;
	gap: .5rem;
	margin: .5rem 0;
}

.mp-row h2 {
	padding: .2rem .4rem;
	font-size: 120%;
	font-weight: bold;
	margin: 0.3rem 0;
}

.mp-row div {
	padding: 0 .5rem .5rem .5rem;
}

.mp-about {
	width: 55%;
}

.mp-featuredSpell {
	width: 45%;
}

.mp-characters {
	width: 33%;
}

.mp-stats {
	display: grid;
	grid: "pages pages"
			"status gender"
			"age age";
}

.mp-stats ul {
	margin: .5em 0;
}

.mp-stats li {
	list-style-type: none;
}

.mp-stats ul.pages {
	grid-area: pages;
}

.mp-stats ul.status {
	grid-area: status;
}

.mp-stats ul.gender {
	grid-area: gender;
}

.mp-stats ul.age {
	grid-area: age;
	column-count: 2;
}
.mp-dyk {

}

.mp-footer {
	width:100%;
	margin:1.2em 0 6px 0;
	text-align:center;
}

/* Timeless */

body.skin-timeless .mp-topbanner{
	background: #003232;
	border-color: #186565;
}

body.skin-timeless .mp-about {
	border: 1px solid #440056;
	background: #320045;
}

body.skin-timeless .mp-about h2 {
	background: #220034;
	border: 1px solid #440056;
}

body.skin-timeless .mp-featuredSpell {
	border: 1px solid #000077;
	background: #000044;
}

body.skin-timeless .mp-featuredSpell h2 {
	background: #000033;
	border: 1px solid #000077;
}

body.skin-timeless .mp-characters {
	background: #004343;
	border: 1px solid #186565;
}

body.skin-timeless .mp-characters h2 {
	background: #003232;
	border: 1px solid #186565;
}

body.skin-timeless .mp-dyk {
	border: 1px solid #550000;
	background: #220000;
}

body.skin-timeless .mp-dyk h2 {
	background: #320000;
	border: 1px solid #550000;
}

body.skin-timeless .mp-footer {
	background:#003232;
	border:1px solid #186565;
}
/* Responsive */

@media (max-width: 850px) {
	.mp-topbanner {
		display: block;
	}

	.mp-welcomebox {
		width: 100%;
		text-align: center;
	}

	.mp-portalList {
		width: 100%;
	}

	.mp-portalList ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.mp-portalList li {
		display: block;
		margin: 0 .5rem;
	}

	body.skin-timeless .mp-welcomebox {
		border-bottom: 1px solid #186565;
	}

	.mp-row {
		display: block;
	}

	.mp-row div {
		width: 100%;
		margin: .3rem 0;
	}


}