/* https://patorjk.com/software/taag/#p=display&f=Big%20Money-nw&t=header%2Ffooter */

:root {
	--infobox-width: 302px;
}


.page-content {
	margin: 8px auto;
	padding: var(--spacing);
	border: 1px solid var(--border-color);
	border-radius: var(--corner-radius);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


figure {
	margin: 0 0 var(--spacing);
}

dl {
	margin: 0;
}

small i {
	line-height: 1;
}

cite:not(.visible-cite) {
	display: none;
}

small details {
	font-size: 1rem;
}

small summary {
	font-size: 12px;
	padding: var(--clickable-padding-small) var(--clickable-padding);
	color: var(--color-lvl-60);
	background: var(--color-lvl-4);
}


a[rel~=wiki] {
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

@media (max-width: 840px) {
	#common-digivolutions {
		clear: both;
	}
}







/*

.                                                  $$\
.                                                  \__|
. $$$$$$\   $$$$$$\  $$$$$$$\   $$$$$$\   $$$$$$\  $$\  $$$$$$$\  $$$$$$$\ $$\
.$$  __$$\ $$  __$$\ $$  __$$\ $$  __$$\ $$  __$$\ $$ |$$  _____|$$  _____|\__|
.$$ /  $$ |$$$$$$$$ |$$ |  $$ |$$$$$$$$ |$$ |  \__|$$ |$$ /      \$$$$$$\
.$$ |  $$ |$$   ____|$$ |  $$ |$$   ____|$$ |      $$ |$$ |       \____$$\ $$\
.\$$$$$$$ |\$$$$$$$\ $$ |  $$ |\$$$$$$$\ $$ |      $$ |\$$$$$$$\ $$$$$$$  |\__|
. \____$$ | \_______|\__|  \__| \_______|\__|      \__| \_______|\_______/
.$$\   $$ |
.\$$$$$$  |
. \______/

*/





h1 {
	margin-bottom: var(--spacing-extra);
}

h2 {
	font-size: 1.7em;
}

:where(h2, h3, h4):not(.nonprose *) {
	margin-top: var(--spacing-extra);
}

/* Giving extra spacing between sections starting with h2 */
section:not(:first-child)>h2:first-child {
	margin-top: calc(var(--spacing-extra) * 2);
}

/* Highlight headings navigated to */
:where(h1, h2, h3, h4, h5, h6):target,
section:target :where(h1, h2, h3, h4, h5, h6):first-child {
	box-shadow: 0 2px 0 var(--focus-color);
	border-bottom-color: transparent;
}

/*li {
	margin-bottom: var(--spacing-small);
}*/

ul.soft-list {
	list-style: none;
	margin: var(--spacing) 0;
	padding: 0;
}

ul.soft-list ul {
	list-style: none;
	margin-bottom: var(--spacing-small);
	padding: 0 1em;
}

ul.soft-list li {
	margin: var(--clickable-padding) 0;
}

dfn,
dt {
	font-weight: bold;
}

/* What was this part for? Might have been something temporary, or something from the last iteration I accidentally left */
h2~dl>dt::before {
	content: '•';
	padding-right: var(--clickable-padding-extra);
	font-weight: bold;
}

summary::selection {
	background: transparent;
}

summary:not(.nonprose *:not(.prose *)) {
	padding: var(--clickable-padding-small) var(--clickable-padding);
}

/* summary:has(.icon)::marker */
summary.has-icon::marker {
	content: '';
}


dfn,
dt {
	font-weight: bold;
}

h2~dl>dt::before {
	content: '•';
	padding-right: var(--clickable-padding-extra);
	font-weight: bold;
}





table.compact {
	/* 16px -> ~15px, 18px -> ~17px */
	font-size: .9325em;
}

table.compact :is(td, th) {
	line-height: 1.2;
	padding: var(--clickable-padding-small) calc(var(--spacing)/1.5);
}

table.compact tbody a {
	text-decoration: none;
}



article>:is(h1, h2, h3, h4, h5, h6):first-child a {
	text-decoration: none;
}

.btn[class] {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	line-height: 1;
	padding: var(--clickable-padding) var(--clickable-padding-extra);
	border: 1px solid var(--border-color);
	background: var(--color-lvl-4);
	cursor: pointer;
	font-size: 1.1em;
	
	&:hover {
		background-color: var(--border-color);
		color: var(--color-lvl-98);
		
		i[class*="icon-"]::after {
			opacity: 1;
		}
	}
	
	i[class*="icon-"] {
		vertical-align: top;
		margin-right: var(--clickable-padding);
		font-size: .8em;
	}
}
























/*

.  $$$$$\   $$$$$$\   $$$$$$\   $$$$$$\  $$\
.$$  __$$\  \____$$\ $$  __$$\ $$  __$$\ \__|
.$$ /  $$ | $$$$$$$ |$$ /  $$ |$$$$$$$$ |
.$$ |  $$ |$$  __$$ |$$ |  $$ |$$   ____|$$\
.$$$$$$$  |\$$$$$$$ |\$$$$$$$ |\$$$$$$$\ \__|
.$$  ____/  \_______| \____$$ | \_______|
.$$ |                $$\   $$ |
.$$ |                \$$$$$$  |
.\__|                 \______/

*/






/*

.$$\                                 $$\                         $$\
.$$ |                                $$ |                       $$  |
.$$$$$$$\   $$$$$$\   $$$$$$\   $$$$$$$ | $$$$$$\   $$$$$$\    $$  /
.$$  __$$\ $$  __$$\  \____$$\ $$  __$$ |$$  __$$\ $$  __$$\  $$  /
.$$ |  $$ |$$$$$$$$ | $$$$$$$ |$$ /  $$ |$$$$$$$$ |$$ |  \__|$$  /
.$$ |  $$ |$$   ____|$$  __$$ |$$ |  $$ |$$   ____|$$ |     $$  /
.$$ |  $$ |\$$$$$$$\ \$$$$$$$ |\$$$$$$$ |\$$$$$$$\ $$ |    $$  /
.\__|  \__| \_______| \_______| \_______| \_______|\__|    \__/
. $$$$$$\                      $$\
.$$  __$$\                     $$ |
.$$ /  \__|$$$$$$\   $$$$$$\ $$$$$$\    $$$$$$\   $$$$$$\  
.$$$$\    $$  __$$\ $$  __$$\\_$$  _|  $$  __$$\ $$  __$$\ 
.$$  _|   $$ /  $$ |$$ /  $$ | $$ |    $$$$$$$$ |$$ |  \__|
.$$ |     $$ |  $$ |$$ |  $$ | $$ |$$\ $$   ____|$$ |
.$$ |     \$$$$$$  |\$$$$$$  | \$$$$  |\$$$$$$$\ $$ |
.\__|      \______/  \______/   \____/  \_______|\__|

*/


.page-header[class]>header,
.page-footer[class]>footer {
	background-color: transparent;
	display: flex;
	justify-content: space-between;
	padding: var(--clickable-padding) 0;
	font-size: 13px;
	box-shadow: none;
}

.page-header {
	font-weight: bold;
}

.page-header a,
.page-footer a {
	text-decoration: none;
}



.page-return-to-top[class] {
	clear: both;
	float: right;
	margin-right: 0;
	max-width: auto;
	text-decoration: none;
	margin-top: 3em;
}

.page-return-to-top:is(:hover, :focus, :active) {
	text-decoration: underline;
}






























/*

.                               $$\                          $$\         
.                               $$ |                         $$ |        
. $$$$$$$\  $$$$$$\  $$$$$$$\ $$$$$$\    $$$$$$\  $$$$$$$\ $$$$$$\   $$\ 
.$$  _____|$$  __$$\ $$  __$$\\_$$  _|  $$  __$$\ $$  __$$\\_$$  _|  \__|
.$$ /      $$ /  $$ |$$ |  $$ | $$ |    $$$$$$$$ |$$ |  $$ | $$ |        
.$$ |      $$ |  $$ |$$ |  $$ | $$ |$$\ $$   ____|$$ |  $$ | $$ |$$\ $$\ 
.\$$$$$$$\ \$$$$$$  |$$ |  $$ | \$$$$  |\$$$$$$$\ $$ |  $$ | \$$$$  |\__|
. \_______| \______/ \__|  \__|  \____/  \_______|\__|  \__|  \____/     

*/







/*

.$$\            $$$$$$\                    $$$$$$\  $$\                      $$\     
.\__|          $$  __$$\                  $$  __$$\ $$ |                     $$ |    
.$$\ $$$$$$$\  $$ /  \__|$$$$$$\          $$ /  \__|$$ | $$$$$$\   $$$$$$\ $$$$$$\   
.$$ |$$  __$$\ $$$$\    $$  __$$\ $$$$$$\ $$$$\     $$ |$$  __$$\  \____$$\\_$$  _|  
.$$ |$$ |  $$ |$$  _|   $$ /  $$ |\______|$$  _|    $$ |$$ /  $$ | $$$$$$$ | $$ |    
.$$ |$$ |  $$ |$$ |     $$ |  $$ |        $$ |      $$ |$$ |  $$ |$$  __$$ | $$ |$$\ 
.$$ |$$ |  $$ |$$ |     \$$$$$$  |        $$ |      $$ |\$$$$$$  |\$$$$$$$ | \$$$$  |
.\__|\__|  \__|\__|      \______/         \__|      \__| \______/  \_______|  \____/ 

*/

.content-info-float {
	float: right;
	clear: right;
	display: flex;
	align-items: end;
	flex-direction: column;
	gap: var(--spacing-small);
	max-width: var(--infobox-width);
	margin: 0 0 var(--spacing-extra) var(--spacing);
	
	/* This padding just looks better */
	details { padding: 30px; padding-bottom: 0; }
	summary { margin: -30px; margin-bottom: 0; }
	
	details[open] {
		max-width: var(--infobox-width);
	}
	
	> :first-child {
		margin-top: 0;
	}
}

@media (max-width: 639px) {
	.content-info-float {
		float: left;
		margin-left: 0;
	}
}

.content-info-float>* {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*
	For the outline, we want the main heading before info.
	Place the floating info directly after the heading so
	we can make it float left, and the next element clear left.
 */
@media (min-width: 640px) {
	/* :is(h1, h2, h3, h4, h5, h6):has(+ .content-infobox:not(:empty)), */
	main>:first-child:has(+ .content-info-float) {
		float: left;
		margin-top: 0;
		--info-floating-gutter: calc(var(--infobox-width) + var(--spacing) * 2 + 2px);
		max-width: calc(100% - var(--info-floating-gutter));
		word-break: break-word;
		box-shadow: none;
	}
}

.content-info-float+* {
	clear: left;
}

/* The floating info shouldn't float into the next section */
section:has(> .content-info-float)::after {
	clear: both;
	content: '';
	display: block;
}








/*                    $$\     $$\ $$\                     
.                     $$ |    $$ |\__|                    
.$$$$$$\  $$\   $$\ $$$$$$\   $$ |$$\ $$$$$$$\   $$$$$$\  
$$  __$$\ $$ |  $$ |\_$$  _|  $$ |$$ |$$  __$$\ $$  __$$\ 
$$ /  $$ |$$ |  $$ |  $$ |    $$ |$$ |$$ |  $$ |$$$$$$$$ |
$$ |  $$ |$$ |  $$ |  $$ |$$\ $$ |$$ |$$ |  $$ |$$   ____|
\$$$$$$  |\$$$$$$  |  \$$$$  |$$ |$$ |$$ |  $$ |\$$$$$$$\ 
.\______/  \______/    \____/ \__|\__|\__|  \__| \_______|
*/

.content-info-float .content-outline:first-child {
	margin-bottom: var(--spacing-small)
}

.content-outline:empty {
	display: none;
}

.content-outline[open] {
	width: 100%;
	border: 0;
	background-color: var(--color-foreground-stripe);
}

.content-outline summary {
	display: block;
	font-size: 1.2em;
}

.content-outline summary i::after {
	margin-right: 4px;
	/* I haven't got a clue why this is needed */
	vertical-align: 0;
	transform: translateY(2px);
}

.content-outline a {
	text-decoration: none;
}

.content-outline a:hover {
	text-decoration: underline;
}

.content-outline[hide-level="2"] [h-level="2"],
.content-outline[hide-level="3"] [h-level="3"],
.content-outline[hide-level="4"] [h-level="4"],
.content-outline[hide-level="5"] [h-level="5"],
.content-outline[hide-level="6"] [h-level="6"] {
	display: none;
}










/* 
$$\            $$$$$$\           $$\                           
\__|          $$  __$$\          $$ |                          
$$\ $$$$$$$\  $$ /  \__|$$$$$$\  $$$$$$$\   $$$$$$\  $$\   $$\ 
$$ |$$  __$$\ $$$$\    $$  __$$\ $$  __$$\ $$  __$$\ \$$\ $$  |
$$ |$$ |  $$ |$$  _|   $$ /  $$ |$$ |  $$ |$$ /  $$ | \$$$$  / 
$$ |$$ |  $$ |$$ |     $$ |  $$ |$$ |  $$ |$$ |  $$ | $$  $$<  
$$ |$$ |  $$ |$$ |     \$$$$$$  |$$$$$$$  |\$$$$$$  |$$  /\$$\ 
\__|\__|  \__|\__|      \______/ \_______/  \______/ \__/  \__|
 */

.content-infobox {
	max-width: var(--infobox-width);
	padding: var(--clickable-padding);
	border: 1px solid var(--border-color);
	--infobox-width-inner: calc(var(--infobox-width) - 2px);
	border-radius: var(--corner-radius);
	font-size: 15px;
	
	figure { margin-bottom: var(--clickable-padding-extra); }
}

/* Make figure images in the infobox extend to the edges */
.content-infobox figure img:not(figcaption img) {
	margin-left: calc(-1 * var(--clickable-padding));
	/* Fill width but maintain aspect ratio. Having height defined will prevent layout shifts as the image loads. */
	height: calc(var(--infobox-width-inner) * var(--height) / var(--width));
	width: var(--infobox-width-inner);
	text-align: center; /* Alt text */
}

/* If they're first child they need to match the top too */
.content-infobox figure:first-child img:not(figcaption img) {
	margin-top: calc(-1 * var(--clickable-padding));
	border-top-left-radius: var(--corner-radius);
	border-top-right-radius: var(--corner-radius);
}

/* Make small caption links hug corner with a border */
.content-infobox figcaption>small {
	display: flex;
	flex-direction: column;
	align-items: end;
}

.content-infobox figcaption>small>a:is(*, :visited) {
	width: max-content;
	max-width: 90%;
	margin-right: calc(-1 * var(--clickable-padding));
	padding: var(--clickable-padding-small);
	border-bottom: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
	border-bottom-left-radius: 3px;
	background: var(--color-lvl-4);
	outline-offset: -2px;
	font-size: 12px;
	color: var(--color-lvl-60);
	text-decoration: none;
}

.content-infobox figcaption>small:hover>a,
.content-infobox figure>a:hover~figcaption>small>a {
	color: var(--color-lvl-90);
	background-color: var(--color-lvl-10);
}


/* We're forcing the dl into two columns

		
		At this point just use a table
		
 */
.content-infobox dl>div {
	--dt-width: 12ex;
	overflow: hidden;
	padding: var(--clickable-padding-small) var(--clickable-padding);
}

.content-infobox dl>div:nth-of-type(2n+1) {
	background-color: var(--color-foreground-stripe);
}

.content-infobox :is(dt, dd) {
	margin: 0;
	padding: var(--clickable-padding-small) 0;
	line-height: 1.35;
}

.content-infobox dt {
	clear: both;
	float: left;
	width: var(--dt-width);
	padding-left: var(--clickable-padding-small);
	font-weight: bold;
	word-break: break-word;
}

.content-infobox dd {
	padding-left: calc(var(--spacing) + var(--dt-width));
}

/* <details> elements don't flow around floating elements. Browser bug. We
   can use this for other elements we want to force beside the infobox too */
@media (min-width:640px) {
	:root {
		--available-width-beside-infobox: calc(100% - var(--infobox-width) - var(--spacing) - 2px);
	}
	.available-width-beside-infobox {
		max-width: calc(100% - var(--infobox-width) - var(--spacing) - 2px);
	}
}




















/*

.           $$\     $$\                         $$\             $$\ $$\             $$\     
.           $$ |    $$ |                        $$ |            $$ |\__|            $$ |    
. $$$$$$\ $$$$$$\ $$$$$$\    $$$$$$\   $$$$$$$\ $$ |  $$\       $$ |$$\  $$$$$$$\ $$$$$$\   
. \____$$\\_$$  _|\_$$  _|   \____$$\ $$  _____|$$ | $$  |      $$ |$$ |$$  _____|\_$$  _|  
. $$$$$$$ | $$ |    $$ |     $$$$$$$ |$$ /      $$$$$$  /       $$ |$$ |\$$$$$$\    $$ |    
.$$  __$$ | $$ |$$\ $$ |$$\ $$  __$$ |$$ |      $$  _$$<        $$ |$$ | \____$$\   $$ |$$\ 
.\$$$$$$$ | \$$$$  |\$$$$  |\$$$$$$$ |\$$$$$$$\ $$ | \$$\       $$ |$$ |$$$$$$$  |  \$$$$  |
. \_______|  \____/  \____/  \_______| \_______|\__|  \__|      \__|\__|\_______/    \____/ 

*/


.attack-list[class]>a {
	padding: var(--clickable-padding) var(--spacing);
	margin: var(--clickable-padding) 0;
	display: inline-block;
	color: inherit;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	outline-offset: -2px;
	background-color: var(--color-foreground-stripe);
	color: inherit;
}

.attack-list[class]>a:is(:hover, :active, :focus, :target) {
	background-color: var(--color-lvl-20);
}

#attack-0:target,
#attack-0:where(:hover, :focus, :target)~p #attack-0-desc,
#attack-1:target,
#attack-1:where(:hover, :focus, :target)~p #attack-1-desc,
#attack-2:target,
#attack-2:where(:hover, :focus, :target)~p #attack-2-desc,
#attack-3:target,
#attack-3:where(:hover, :focus, :target)~p #attack-3-desc,
#attack-4:target,
#attack-4:where(:hover, :focus, :target)~p #attack-4-desc,
#attack-5:target,
#attack-5:where(:hover, :focus, :target)~p #attack-5-desc,
#attack-6:target,
#attack-6:where(:hover, :focus, :target)~p #attack-6-desc,
#attack-7:target,
#attack-7:where(:hover, :focus, :target)~p #attack-7-desc,
#attack-8:target,
#attack-8:where(:hover, :focus, :target)~p #attack-8-desc,
#attack-9:target,
#attack-9:where(:hover, :focus, :target)~p #attack-9-desc,
#attack-10:target {
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--focus-color);
}













/*

.          $$\   $$\                $$\     $$\                               
.          \__|  $$ |               $$ |    \__|                              
. $$$$$$$\ $$\ $$$$$$\    $$$$$$\ $$$$$$\   $$\  $$$$$$\  $$$$$$$\   $$$$$$$\ 
.$$  _____|$$ |\_$$  _|   \____$$\\_$$  _|  $$ |$$  __$$\ $$  __$$\ $$  _____|
.$$ /      $$ |  $$ |     $$$$$$$ | $$ |    $$ |$$ /  $$ |$$ |  $$ |\$$$$$$\  
.$$ |      $$ |  $$ |$$\ $$  __$$ | $$ |$$\ $$ |$$ |  $$ |$$ |  $$ | \____$$\ 
.\$$$$$$$\ $$ |  \$$$$  |\$$$$$$$ | \$$$$  |$$ |\$$$$$$  |$$ |  $$ |$$$$$$$  |
. \_______|\__|   \____/  \_______|  \____/ \__| \______/ \__|  \__|\_______/ 

*/


.section-citations ol {
	columns: 2;
	column-gap: var(--spacing-extra);
}

.section-citations fieldset {
	width: fit-content;
	padding: var(--clickable-padding);
	border: 2px solid var(--color-lvl-10);
	border-radius: var(--corner-radius);
}

.citation-counter {
	display: none;
}

.show-citation-counters .citation-counter {
	display: inline-block;
	font-style: italic;
	color: var(--color-lvl-5);
	line-height: 1;
	a { text-decoration: none; }
}

#citation-list time {
	font-style: italic;
}

#citation-list time:not(:empty)::before {
	content: ' (';
}

#citation-list time:not(:empty)::after {
	content: ') ';
}

li[id^=citation-item-]:target > * {
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--focus-color);
}





blockquote>footer>cite time:not(:empty)::before {
	content: '\0020\2014\0020';
}