/**
 * themes/egirl
 *
 * 		overrides for default rules :3
 */

/* general */
	
	:root {
		/* normal button colors */
		/* 1 - text color for buttons; 2 - outline */
		--neon-color-1: #6cf;
		--neon-color-1t: #6cf8;
		--neon-color-2: #f9f;
		--neon-color-2t: #f9f8;
		/* alert button colors */
		--neon-color-1a: #f23;
		--neon-color-1at: #f238;
		--neon-color-2a: #a00;
		--neon-color-2a: #a008;

		scrollbar-color: #f9f8 #222;
	}

	body {
		background: url('default.gif'), url('dither.png');
		background-position: initial, center bottom;
		background-repeat: repeat, no-repeat;
		background-size: auto, cover;
		background-blend-mode: lighten;
		min-height: 100vh;
		image-rendering: pixelated;
		font-family: "ndsbios";
		font-size: 14pt;
		font-family: "fspixelsans";
		font-size: 16pt;
		cursor: url("pointer-blue.cur"), auto;
	}

	input[type=textbox], input[type=password], input[type=number],
	button {
		font-family: "Charcoal";
		font-size: 8pt;
	}

	h1.light, h2.light, h3.light, h4.light, h5.light, h6.light {
		font-family: "ndsbios";
		/*font-size: 13pt;*/
		font-family: "fspixelsans";
		font-size: 16pt;
	}

	a:link, a:hover, a:active, a:visited,
	input[type=checkbox].css-checkbox + label.css-label,
	button,
	select {
		cursor: url('link-blue.cur'), pointer;
	}

	span.hoverhint {
		cursor: url('help-blue.cur'), help;
	}

	a:hover {
		background: unset;
		animation: link-hover-flicker 1.5s infinite alternate; 
	}

	.page-sidebar .navbox,
	.page-sidebar .navbox a.withimage img {
		image-rendering: initial;
	}

	.page-sidebar .navbox a {
		/*text-shadow: 0px 0px 3px #f9f;*/
	}

	.page-sidebar .navbox a:hover {
		text-shadow: 1px 1px 1px black;
		animation: none;
	}

	ul {
		list-style: square url("sqpurple.gif");
		margin-top: 0;
	}

	div.modalpageoverlay {
		backdrop-filter: blur(12px) saturate(200%);
	    --webkit-backdrop-filter: blur(6px) saturate(200%);
	    background-color: rgba(0, 0, 0, 0.66);
	    border-radius: 12px;
		border: 1px solid rgba(209, 213, 219, 0.3);
	    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
	    border-top-width: 1px;
	}

	div.modalcontainer .title-bar {
		text-align: center;
		font-family: "minecraftia";
		font-size: 12pt;
		margin-bottom: 0px;
		text-shadow: 1px 1px 1px black;
		height: 24pt;
	}

	div.modalcontainer button.close-button {
		right: 3px;
		width: 24px;
		height: 24px;
		padding: 0;
		border-radius: 2px;
	}

/* square borders for everything */
	.page-sidebar,
	.page-sidebar .headerbox img.dp,
	/*.page-sidebar .navbox a:hover,*/
	.container,
	div.twocol-container.single,
	.headerbar,
	.container .icon img,
	img.selfie,
	/*input[type=textbox], input[type=password], input[type=number],*/
	div.modalcontainer,
	div.modalcontainer .title-bar {
		border-radius: 0px !important;
	}

	/* ... except these */
	.container .icon img.rounded {
		border-radius: 16px !important;
	}

/* sidebar */
	.page-sidebar {
		animation: sidebar-flicker 1.5s infinite alternate;
		border-radius: 16px !important;
	}

	.page-sidebar .headerbox {
		font-family: "ti83p";
		font-size: 12pt;
	}

	.page-sidebar .headerbox .site-title {
		color: white;
		animation: site-title-flicker 1.5s infinite alternate; 

		font-family: "Gruppo";
		margin-top: 0;
		font-size: 18pt;
	}

	.page-sidebar .headerbox p.caption {
		font-family: "ti83p";
		font-size: 10pt;
	}

	.page-sidebar .footer,
	div.footer {
		font-size: 12pt;
	}

	span.errpage-refresh {
		font-size: 12pt;
	}

/* page content */
	.headerbar .text {
		font-family: "minecraftia";
		font-size: 12pt;

		margin-bottom: -12px;
		display: block;
		text-shadow: 1px 1px 1px black;
	}

	.headerbar.highlight .text {
		margin-bottom: -16px;
	}

	.container .content .body, div.twocol-container.single div.twocol-column .content .body {
		font-size: 12pt;
		font-size: 14pt;
	}

	.container .content .body .section-header,
	div.twocol-container.single div.twocol-column .content .body .section-header {
		font-family: "minecraftia";
		margin-bottom: -12px;
	}

	.container .content .body .section-header-small,
	div.twocol-container.single div.twocol-column .content .body .section-header-small {
		font-family: "minecraftia";
		font-size: 12pt;
		margin-bottom: -12px;
	}

	.container .content .body .section-header:before,
	div.twocol-container.single div.twocol-column .content .body .section-header:before {
		width: 24px;
		display: inline-block;
		content: ".:[ ";
	}

	.container .content .body .section-header:after,
	div.twocol-container.single div.twocol-column .content .body .section-header:after {
		width: 24px;
		display: inline-block;
		content: " ]:.";
	}

	.headerbar {
		/*display: flex;*/
	}
	.headerbar img {
		image-rendering: initial;
		left: initial;
		margin-right: 8px;
	}

/* ui elements */
	button:hover {
		animation: button-hover-flicker 1.5s infinite alternate; 
	}

	button.alert:hover {
		animation: button-alert-hover-flicker 1.5s infinite alternate; 
	}

	button:active {
		animation: none;
		border-color: white;

		text-shadow:
			0px 0px 2px white,
			0px 0px 4px white;
/*			0px 0px 6px white,
			0px 0px 8px white;*/
		box-shadow: 
			inset 0px 0px 2px white,
			inset 0px 0px 4px white,
			0px 0px 2px white,
			0px 0px 4px white,
			0px 0px 6px white,
			0px 0px 8px white;
	}

	button.alert:active {
		animation: none;
		border-color: var(--ui-button-alert-active-border);
		text-shadow:
			0px 0px 2px var(--neon-color-1a),
			0px 0px 4px var(--neon-color-1a);
		box-shadow: 
			inset 0px 0px 2px var(--neon-color-2a),
			inset 0px 0px 4px var(--neon-color-2a),
			0px 0px 2px var(--neon-color-2a),
			0px 0px 4px var(--neon-color-2a),
			0px 0px 6px var(--neon-color-2a),
			0px 0px 8px var(--neon-color-2a);
	}

	input[type=checkbox].css-checkbox + label.css-label {
		font-size: 12pt;
	}


/* accessibility */
@media screen and (prefers-reduced-motion) {
	button:hover,
	button.alert:hover,
	a:hover,
	.page-sidebar,
	.page-sidebar .headerbox .site-title {
		animation: none !important;	
	}
}

/* Animate neon flicker */
/* https://css-tricks.com/how-to-create-neon-text-with-css/ */
@keyframes site-title-flicker {
	0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
		text-shadow:
			0px 1px 3px var(--neon-color-1),
			0px 1px 5px var(--neon-color-2),
			0px 1px 8px var(--neon-color-2);    
	}
	
	20%, 24%, 55% {        
		text-shadow: none;
	}    
}

@keyframes sidebar-flicker {
	0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
		box-shadow:
			inset 0px 0px 2px var(--neon-color-2),
			inset 0px 0px 4px var(--neon-color-2),
			inset 0px 0px 6px var(--neon-color-2),
			0px 0px 2px var(--neon-color-2),
			0px 0px 4px var(--neon-color-2),
			0px 0px 6px var(--neon-color-2),
			0px 0px 8px var(--neon-color-2);    
	}
	
	20%, 24%, 55% {        
		box-shadow: none;
	}    
}

@keyframes link-hover-flicker {
	0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
		text-shadow:
			0px 0px 2px var(--neon-color-2),
			0px 0px 4px var(--neon-color-2),
			0px 0px 6px var(--neon-color-2),
			0px 0px 8px var(--neon-color-2);    
	}
	
	20%, 24%, 55% {        
		text-shadow: none;
	}    
}

@keyframes button-hover-flicker {
	0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
		text-shadow:
			0px 0px 2px var(--neon-color-1),
			0px 0px 4px var(--neon-color-1),
			0px 0px 6px var(--neon-color-1),
			0px 0px 8px var(--neon-color-1);
		box-shadow: 
			inset 0px 0px 2px var(--neon-color-2),
			inset 0px 0px 4px var(--neon-color-2),
			0px 0px 2px var(--neon-color-2),
			0px 0px 4px var(--neon-color-2),
			0px 0px 6px var(--neon-color-2),
			0px 0px 8px var(--neon-color-2);
	}
	
	20%, 24%, 55% {        
		text-shadow: none;
		box-shadow: none;

		text-shadow:
			0px 0px 2px var(--neon-color-1t),
			0px 0px 4px var(--neon-color-1t),
			0px 0px 6px var(--neon-color-2t),
			0px 0px 8px var(--neon-color-2t);
		box-shadow: 
			inset 0px 0px 2px var(--neon-color-1t),
			inset 0px 0px 4px var(--neon-color-1t),
			0px 0px 2px var(--neon-color-1t),
			0px 0px 4px var(--neon-color-1t),
			0px 0px 6px var(--neon-color-2t),
			0px 0px 8px var(--neon-color-2t);
	}    
}

@keyframes button-alert-hover-flicker {
	0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
		text-shadow:
			0px 0px 2px var(--neon-color-1a),
			0px 0px 4px var(--neon-color-1a),
			0px 0px 6px var(--neon-color-1a),
			0px 0px 8px var(--neon-color-1a);
		box-shadow: 
			inset 0px 0px 2px var(--neon-color-2a),
			inset 0px 0px 4px var(--neon-color-2a),
			0px 0px 2px var(--neon-color-2a),
			0px 0px 4px var(--neon-color-2a),
			0px 0px 6px var(--neon-color-2a),
			0px 0px 8px var(--neon-color-2a);
	}
	
	20%, 24%, 55% {        
		text-shadow: none;
		box-shadow: none;

		text-shadow:
			0px 0px 2px var(--neon-color-1at),
			0px 0px 4px var(--neon-color-1at),
			0px 0px 6px var(--neon-color-2at),
			0px 0px 8px var(--neon-color-2at);
		box-shadow: 
			inset 0px 0px 2px var(--neon-color-1at),
			inset 0px 0px 4px var(--neon-color-1at),
			0px 0px 2px var(--neon-color-1at),
			0px 0px 4px var(--neon-color-1at),
			0px 0px 6px var(--neon-color-2at),
			0px 0px 8px var(--neon-color-2at);
	}    
}