:root {
	--content: #43256E;
	--kibpink: #F75131;
	--kibdarkpink: #24006C;
	--kibborderpink: #F75131;
	--kibblue: #3D0099;
}

body {
	background-image: url("../img/background-tile.png");
	background-repeat: repeat-x;
	background-color: gray;
	background-size: auto 100%;
	image-rendering: pixelated;
}

.sidebar-assets {
	image-rendering: smooth;
}

main {
	image-rendering: smooth;
}

#header {
	background-image: url("../img/headers/header-mania.png");
	image-rendering: pixelated;
}

hr {
	margin: 30px 0;
}

.buddy {
	width: 100%;
	image-rendering: pixelated;
}

ol {
	padding-left: 20px;
}

#title {
	text-align: center;
	font-size: 40px;
	margin: 0;
	color: var(--kibblue);
	padding-bottom: 10px;
}

#shrine-nav {
	display: flex;
	flex-wrap: wrap;
}

#shrine-nav a {
	background-color: var(--kibpink);
	color: white;
	border-radius: 8px;
	padding: 10px;
	width: 48%;
	margin: 10px auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#shrine-nav a:hover {
	filter: brightness(1.5)
}

.page {
   display: none;
} 

.page:target {
  display: initial;
}

.page:target ~ .initial  {
  display: none;
}

.doodle {
	display: block;
	margin: auto;
	width: 33%
}

.character-list {
	display: flex;
}

.character-list img {
	width: 25%;
}

details > summary {
	background-color: var(--kibpink);
	color: white;
	cursor: pointer;
	padding: 10px;
	width: 100%;
	border: none;
	text-align: left;
	font-size: 15px;
	border-radius: 10px;
	margin-bottom: 5px;
}

details {
	background-color: #f1f1f1;
	border-radius: 10px;
	padding-bottom: 10px;
}

details:not([open]) {
	background-color: white;
}

details > p {
	margin: 10px 0;
	padding: 0 20px;
}

details > h1 {
	padding: 0 20px;
}

details > h2 {
	padding: 0 20px;
}

details > h3 {
	padding: 0 20px;
	font-size: 20px;
}

details > hr {
	margin: 20px 0;
}

details > ul {
	padding-right: 20px;
	padding-left: 35px;
}

details > img {
	width: 100%;
	padding: 10px 10px 0 10px;
}

#tier-lists {
	display: flex;
	justify-content: space-evenly;
}

#tier-lists details {
	width: 48%;
}

#tier-lists details > p {
	margin: 0;
	padding: 0 20px;
}

@media only screen and (max-width: 1000px) {
	.buddy {
		display: none;
	}
	
	#tier-lists {
		display: initial;
	}
	
	#tier-lists details {
		width: 100%;
	}
	
}