:root {
	--white: #FFF;
	--black: #000;
	--blood: #a1a100;
	--dark-blood: #666600;
	--red: #f20000;
	--dark-red: #b30000;
	--l-blue: #3161ff;
	--blue: #003bff;
	--dark-blue: #001e82;
}

/* cursor */
body.customCursor {
	cursor: url("images/bee_cursor.png"), auto;
	/* links cursor */
	*, a, a:hover, button, button:hover {
		cursor: inherit;
	}
}

::-moz-selection, ::selection {
  color: var(--white);
  background: var(--blue);
}

.ui-glass {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
}

.skip-to-content {
	background: red;
	box-shadow: 2px 2px 0 0 var(--blue);
	color: var(--black);
	font-weight: bold;
	padding: .25rem .5rem;
	transform: translateY(-200%);
}

/* page settings button */
div:has(> #page-settings) {
	position: relative;
	margin-left: auto;
  --s: min(2.5rem, 10vw);  /* size  */
	--h: calc(var(--s)*1.1547);
	width: var(--s); height: var(--h);
}
#page-settings, div:has(> #page-settings)::after {
	position: absolute;
	width: 100%;
	height: 100%;
	clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
}
/* hexagon shadow */
div:has(> #page-settings)::after {
	width: 100%;
	height: 100%;
	content: '';
	background: var(--blue);
	z-index: -1;
	left: -2px; top: 7px;
}
#page-settings {
	background: var(--red);
	border-radius: 0;
	padding: .5rem;
	
	svg {
		max-width: 100%;
		max-height: 100%;
	}
	
	&:active, &:focus-visible {
		transform: translate(2px, 2px);
	}
}

/* main content */
html, body {
	margin: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

body {
	background-color: var(--black);
	@media (prefers-reduced-motion: no-preference) { background-image: url('/graphix/bg/black-binary.gif'); }
	font-family: Courier, monospace;
	font-size: 1.125rem;
	color: var(--blood);
}

main {
	height: 100%;
	display: flex; flex-direction: column;
	
	> .wrapper {
		display: flex; flex-direction: column;
		flex-grow: 1;
		min-height: 0;
		overflow-y: scroll;
	}
	
	#top-section {
		position: relative;
		display: flex;
		flex-direction: column;
		> header, main { width: 100%; }
		/* large screens */
		@media screen and (width >= 670px) {
			height: calc(441px + 2.1rem);
			width: min(650px,70vw);
			margin: .5rem auto -.35rem auto;
			padding-left: calc(0.6 * var(--header-image-width));
		}
		/* prevent header image from being too high on medium screens */
		@media screen and (width >= 820px) {
			min-height: 450px;
		}
		/* small screens */
		@media screen and (width < 670px) {
			height: auto;
			margin-bottom: .5rem;
		}
		
		--header-image-width: min(50vw,408px);
		> header {
			margin-bottom: 1rem;
			h1 {
				background: var(--blood);
				color: var(--black);
				@media screen and (width >= 670px) { text-align: right; }
				font-weight: bold;
				line-height: 1;
				margin: 0;
				padding: .2rem 8%;
			}
			#header-image {
				display: block;
				position: absolute;
				z-index: 2;
				left: 0;
				bottom: 0;
				user-select: none;
				pointer-events: none;
				.wrapper {
					position: relative;
					line-height: 0; /* prevent button spacing issues */
				}
				img {
					image-rendering: pixelated;
					width: var(--header-image-width);
				}
				svg {
					display: block;
					position: absolute;
					width: 100%; height: 100%;
					top: 0; left: 0;
					fill-opacity: 0;
					path { pointer-events: auto; }
				}
				button:focus-visible path { fill-opacity: .7; fill: var(--white); }
			}
			/* small screens */
			@media screen and (width < 670px) {
				border-bottom: 3px var(--blood) solid;
				--header-image-width: min(80vw,408px);
				#header-image {
					position: static;
					width: auto;
					max-width: 100%;
					margin-top: .5rem;
					text-align: center;
				}
			}
		}
	}
	
	#info-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		z-index: 2;
		background: var(--dark-blood);
		color: var(--black);
		flex-grow: 1;
		padding: .8rem 1rem 0 1rem;
		
		.text {
			flex-grow: 1;
		}
	}
	
	/* coding books */
	.book-container {
		display: flex;
		align-items: center;
		max-width: 80vw;
		padding: 1rem;
		.book {
			max-width: 100%;
			display: inline-block;
			position: relative;
			img { max-width: 90%; }
			&:hover {
				z-index: 2;
				img { transform: scale(110%); }
			}
		}
	}
	#ath-book {
		width: 160px;
		rotate: -4deg;
		margin-right: -10px;
		img { padding-bottom: 1.75rem; }
	}
	#ath-for-dummies {
		width: 180px;
		rotate: 10deg;
	}
	
	/* aspect symbol */
	#doom { position: absolute; }
}

/* main area appear animations (only play if reduced motion not on) */
@media (prefers-reduced-motion: no-preference) {
	main:not(.hidden) {
		--appear-speed: .3s;
		
		/* header image pop up on larger screens */
		@media screen and (width >= 670px) {
			#header-image {
				animation-name: headerPopup;
				animation-duration: calc(var(--appear-speed));
			}
		}

		#hexgrid .hex-container div {
			animation-name: growIn;
			animation-duration: var(--appear-speed);
			animation-delay: var(--appear-speed);
			animation-fill-mode: forwards;
			transform: scale(0);
		}
	}
}
/* appear animation definitions */
@keyframes headerPopup {
	0% { transform: translateY(12%); }
	100% { transform: translateY(0%); }
}
@keyframes growIn {
	0% { transform: scale(0); opacity: .75; }
	100% { transform: scale(1); opacity: 1; }
}


/************************* ~ATH CODE DISPLAY WINDOW *************************/
#loading {
	padding-top: 2rem;
	--border: 8px;
	
	> button:not(.hidden) {
		display: block;
		padding: calc(var(--border)/2) .5em;
		border-radius: calc(var(--border)/2);
		background: var(--blood);
		color: var(--black);
		font-weight: bold;
		font-size: 2rem;
		margin: 1rem auto;
	}
}

.codebox {
	--border-color: var(--blood);
	margin: 0 auto;
	background: var(--border-color);
	color: var(--black);
	width: min(500px,90%);
	border: var(--border) var(--border-color) solid;
	border-radius: var(--border);
	
	header {
		padding: 0 var(--border) var(--border) var(--border);
		h2 {
			font-weight: bold;
			font-size: inherit;
			line-height: 1;
			margin: 0;
		}
	}
	
	.contents {
		color: white;
		background: black;
		width: 100%;
		margin: 0;
		padding: var(--border); padding-top: calc(var(--border)*2); padding-bottom: 1.5em;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
		border-radius: calc(var(--border) * .7);
	}
	
	pre {
		white-space: pre-wrap;
		tab-size: 2em;
	}
}

/* features for typing animation areas */
.typing {
	.text-cursor { display: inline; }
	@media (prefers-reduced-motion: no-preference) {
		.blinking { 
			animation-name: blinker;
			animation-duration: 1.5s;
			animation-iteration-count: infinite;
		}
	}
	span { display: none; } /* hide spans until ready to be typed */
}
@keyframes blinker {
	0% { opacity: 1; }
  50% { opacity: 1; }
	50.001% { opacity: 0; }
	100% { opacity: 0; }
}

/************************* HEXAGON GRID *************************/
.hex-container-wrapper {
	/* medium/small screens */
	@media screen and (width < 820px) { width: 95%; }
	/* large screens */
	@media screen and (width >= 900px) { width: 85%; margin: 0 auto; }
	padding-right: calc(var(--m)*2);
	padding-bottom: calc(var(--s)*0.2885);
  display: flex;
	text-align: right;
	/* hexagon variables */
  --s: min(50vw, 100px);  /* size  */
	--h: calc(var(--s)*1.1547);
  --m: 4px;    /* margin */
  --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
}

.hex-container {
  font-size: 0; /*disable white space between inline block element */
	> * {
		/* colors */
		&:not(:nth-child(3n)) {
			--bg: var(--blue);
			--shadow: var(--dark-blue);
		}
		&:nth-child(3n) {
			--bg: var(--red);
			--shadow: var(--dark-red);
		}
		width: var(--s);
		margin: var(--m) calc(var(--m) * 1.25);
		margin-bottom: calc(var(--m) - var(--s)*0.2885);
		height: var(--h); 
		display: inline-block;
		font-size:initial;
		position: relative;
		
		/* main hexagon and shadow shared properties*/
		> *, &::after {
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
		}
		/* main hexagon */
		> * {
			color: var(--black);
			font-weight: bold;
			font-size: 1.25rem;
			background: var(--bg);
			&:active, &:focus-visible {
				transform: translate(var(--m), calc(var(--m) * 0.5));
			}
			&:focus-visible { background: var(--white); }
			/* image in main hexagon */
			.img {
				position: absolute;
				width: 90%; height: 90%;
        top: 5%; left: 5%;
				clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
				background-size: cover;
				background-position: center;
			}
		}
		/* special styling for <a> link hexagons */
		> a {
			line-height: var(--h);
			text-align: center;
			> span {
				display: inline-block;
				vertical-align: middle;
				line-height: normal;
			}
		}
		/* hexagon shadow */
		&::after {
			content: '';
			background: var(--shadow);
			z-index: -1;
			left: var(--m);
			top: calc(var(--m) * 0.5);
		}
	}
	&::before {
		content: '';
		width: calc(var(--s)/2 + var(--m));
		float: right;
		height: 175%;
		/*shape-outside: repeating-linear-gradient(     
										 #0000 0 calc(var(--f) - 3px),      
										 #000  0 var(--f));*/
		shape-outside: repeating-linear-gradient(
										#0000 0 calc(var(--f) - 20px),
										#fff 0 calc(var(--f) - 18px)
								)
	}
}

/************************* MUSIC PLAYER *************************/
footer { z-index: 1001; }
#music-player {
	width: 100%;
	/* player panel */
	.wmp-panel {
		display: flex;
		flex-wrap: wrap;
		gap: .5em;
		background: var(--black);
		color: var(--blood);
		text-align: right;
		justify-content: right;
		align-items: center;
		width: 100%;
		padding: .5rem 1rem;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
		
		.wmp-current-track {
			max-width: 100%;
			flex-shrink: 1;
			display: flex;
			gap: .5em;
			@media screen and (width < 500px) { .before { display: none; } }
			@media screen and (width < 400px) { .wmp-timer { display: none; } }
			.wmp-current-track-title {
				flex-shrink: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				.index { display: none; }
			}
		}
		
		.wmp-controls { display: flex; gap: 12px; }
		
		/* player control buttons */
		button.wmp-button {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
			--s: 1.8em;  /* size  */
			--h: calc(var(--s)*1.1547);
			width: var(--s); height: var(--h);
			line-height: 1;
			font-weight: bold;
			
			svg {
				padding: .2rem .4rem;
			}
			&::before, &::after {
				content: '';
				position: absolute;
				top: 0; left: 0;
				width: 100%; height: 100%;
				clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
			}
			&::after {
				background: var(--blue);
				z-index: -2;
				transform: translate(3px,3px);
			}
			&:active&::after { transform: none; }
			&::before {
				background: var(--red);
				z-index: -1;
			}
		}
		
		/* hiding volume until I can get it sorted */
		.wmp-volume-bar-container { display: none; }
	}
	button.wmp-button:active {
		transform: translate(3px,3px);
		box-shadow: none;
	}
	/* dance sprite */
	.sprite {
		user-select: none;
		position: absolute;
		left: 10px; bottom: 2px;
	}
	/* play/pause button */
	.wmplayer.playing {
		.battlesprite { display: none; }
		.wmp-symbol-play { display: none; }
	}
	.wmplayer:not(.playing) {
		.dancesprite { display: none; }
		.wmp-symbol-pause { display: none; }
	}
	/* playlist popup */
	.wmp-playlist-container {
		position: fixed;
		z-index: 1001;
		top: 50%; left: 50%;
		transform: translate(-50%,-50%);
		--border: 8px;
		--border-color: var(--blood);
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
		
		.wmp-playlist {
			font-size: 1rem;
			line-height: 1.5;
		}
		
		.wmp-playlist-item {
			text-align: left;
			.index { color: var(--white); }
			.title { color: var(--l-blue); }
			.artist { color: var(--red); }
		}
		.wmp-playlist-item:nth-child(2n) {
			.index { color: var(--white); }
			.title { color: var(--red); }
			.artist { color: var(--l-blue); }
		}
	}
}

/************************* PAGE SETTINGS *************************/
.page-settings {
	--open-button-fill: var(--black);
	--open-button-background: var(--blood);
	--border: 2px var(--blood) solid;
	--color: var(--blood);
	--accent: var(--white);
	.page-settings-contents {
		border-radius: 0;
	}
}


/************************* FULL IMAGE VIEW *************************/
.full-image-view {
	.fiv-next, .fiv-prev { color: var(--blood); }
}

/************************* SCROLLBAR *************************/
/* Firefox settings */
* { scrollbar-color: var(--blue) var(--red); }
/* width */
::-webkit-scrollbar { width: 15px; }
/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px var(--dark-red);
	background-color: var(--red);
}
/* Handle */
::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 5px var(--dark-blue);
	background: var(--blue);
}
/***** end scrollbar *****/

/** reduced motion locked elements **/
@media (prefers-reduced-motion: no-preference) {
}