/* This document may not be redistributed or copied in its entirety without
 * the author(s)'s explicit written consent. (c) 2026 Henry Guy.
 */

/* Style:
 * 	- Avoid vendor specific functions / keywords at all costs. If it isn't
 * 	baseline, don't use it.
 * 	- If a specific keyword is used very often in specific functions /
 * 	settings, make a var under '*:root'. This should help with consistency and
 * 	clarity. Modern browsers shouldn't have a problem resolving many vars;
 * 	however, take caution when modifying vars at run time.
 * 	- CSS preprocessors are dumb and I won't use them.
 */

*:root {
	box-sizing:border-box;

	--font-size-small:0.8em; /*relative for smaller*/
	--font-size-normal:1rem;
	--font-size-large:1.2em; /*relative for larger*/

	--color-bg-dark-black:black;
	--color-bg-mid-black:#424242;
	
	--color-bg-mid-white:#c4c4c4;
	--color-bg-bright-white:#e2e2e2;

	--color-font-dark-black:#111111;
	--color-font-mid-black:#424242;

	--color-font-bright-white:white;
	--color-font-mid-white:#c4c4c4;

	--color-input-dark:#2b2a33;

	--color-icon-white:white;

	--delay-fade-in:0s;
	--delay-fade-out:0.5s;

	--thickness-border-large:4px;
	--thickness-border-mid:2px;
	--thickness-border-small:1px;

	--radius-border-larger:4px;
	--radius-border-mid:2px;
	--radius-border-small:1px;

	/*styles for light theme*/
	color-scheme:light;

	--color-bg-main:var(--color-bg-bright-white);
	--color-bg-main-mid:var(--color-bg-mid-white);
	--color-bg-opposite:var(--color-bg-dark-black);
	--color-bg-opposite-mid:var(--color-bg-mid-black);

	color:var(--color-font-dark-black);
	--color-font-main:var(--color-font-dark-black);
	--color-font-main-small:var(--color-font-mid-black);
	--color-font-opposite:var(--color-font-bright-white);
	--color-font-opposite-small:var(--color-font-mid-white);
}

@media(prefers-color-scheme:dark) {
	/*styles for dark theme*/
	*:root {
		color-scheme:dark;

		--color-bg-main:var(--color-bg-dark-black);
		--color-bg-main-mid:var(--color-bg-mid-black);
		--color-bg-opposite:var(--color-bg-bright-white);
		--color-bg-opposite-mid:var(--color-bg-mid-white);

		color:var(--color-font-bright-white);
		--color-font-main:var(--color-font-bright-white);
		--color-font-main-small:var(--color-font-mid-white);
		--color-font-opposite:var(--color-font-dark-black);
		--color-font-opposite-small:var(--color-font-mid-black);
	}
}

html{

}

body {
	background-color:var(--color-bg-main);
	/*min-height:100vh;*/
	/*overflow:hidden;*/
	margin:0;
}

body > header {
	/* headers directly under the body */
	min-height:50vh;
	align-content:center;
}

body > main
, body > header
, body > footer {
	margin: 0 var(--font-size-normal);
}

article hr {
	width:50%;
}

.nav-top {
	--nav-height:1.5rem;

	position:sticky;
	top:0;
	left:0;
	z-index:1;

	width:100%;

	--bg-color:var(--color-bg-opposite);

	& > .icon {
		position:absolute;
		height:var(--nav-height);
		background-color:var(--bg-color);
	}
	
	& .nav-container {
	
		color:var(--color-font-opposite);
	
		width:0;
		overflow-x:clip;

		transition: width 0.25s ease-in-out var(--delay-fade-out);
	
		& .nav-subcontainer {
			padding-left:var(--nav-height);
			width:calc(100% - var(--nav-height));
			height:var(--nav-height);
			background-color:var(--bg-color);
			text-wrap:nowrap;

			display:flex;
			flex-direction:row;
			/*justify-content:space-around;*/
			align-items:start;

		}

		& .nav-item {
			display:flex;
			flex-direction:column;
			padding: 0 0.5em;

			position:relative;

			background-color:var(--bg-color);

			& .nav-item-heading {
				height:var(--nav-height);
			}

			& .nav-item-heading + .nav-item-content {
				position:absolute;
				top:var(--nav-height);
				left:0;
				padding:inherit;
				margin:0;
				background-color:inherit;

				height:0;
				overflow:clip;

				display:flex;
				flex-direction:column;
				align-items:start;

			}

			& .nav-item-heading:hover + .nav-item-content, .nav-item-content:hover {
				height:unset;
			}
		}

	}

	& .expand-menu:hover + .nav-container, .nav-container:hover, .nav-container:has(> .nav-item:hover) {
		width:100%;
		transition-delay:var(--delay-fade-in);
	}
}

.nav-icons {
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	flex-wrap:wrap;

	& > * {
		flex:1;
		color:var(--color-font-main);
		text-decoration:none;
	}

	& figure {
		text-align:center;
	}
}

.header-text {
	color:var(--color-font-main);
	text-align:center;
	animation: drop-in 2s ease-out forwards;
}

@keyframes drop-in {
	from {
		opacity:0%;
		transform:translateY(-100%);
	}
	to {
		opacity:100%;
		transform:translateY(0%);
	}
}

#main {
	margin:calc(2 * var(--font-size-normal));
	z-index:1;
	position:relative;
}

#explanation {
	background-color:var(--color-bg-mid-white);
	border-radius:calc(var(--font-size-normal) / 2);
	text-align:center;
}

.info {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:stretch;
	justify-content:space-between;

	& > * {
		flex:1;
		min-width:calc(20 * var(--font-size-normal));
		margin:calc(var(--font-size-normal) / 2);

		background-color:var(--color-bg-mid-white);
		color:var(--color-font-mid-black);
		border-radius:calc(var(--font-size-normal) / 2);
		text-align:center;

		transition: transform 0.25s, background-color 0.25s, color 0.25s;

		transform:scale(0);
		animation: spin-in 1s ease-out forwards;
		animation-delay: calc(0.25s * var(--i));
	}

	& > *:hover {
		transform:scale(1.025);
		background-color:var(--color-bg-bright-white);
		color:var(--color-font-dark-black);
	}
}

@keyframes spin-in {
	from {
		transform:rotate(360deg) scale(0);
	}
	to {
		transform:rotate(0) scale(1);
	}
}

.split-even {
	display:flex;
	flex-direction:row;
}

.split-even.horizontal {
	flex-direction:row;
	& > * {
		flex:1;
	}
}

.float-alternate:nth-child(even) {
	float:right;
}

.float-alternate:nth-child(odd) {
	float:left;
}

.float-alternate.half {
	width:50%;
}


/************************
	phone media rules
************************/
@media only screen and (width < 600px) {
	.float-alternate {
		float:none;
		width: auto !important;
		display:block;
	}

	.nav-icons {	

		& > * {
			flex:unset;
			width:50%;
		}

		& figure {
			margin:0;
		}
	}
}

/***********************
	start icon stuff
***********************/

.navIcon {
	box-sizing:content-box;
	border: solid #0000;
}

.navIcon.--bounce:hover > * {animation:bounce 0.75s linear infinite;}
.navIcon.--rotate:hover > * {animation:rotate 1s linear infinite;}
.navIcon.--border-pulse:hover {animation: border-pulse 1s ease-in-out alternate infinite;}

@keyframes bounce {
	0% {
		transform:scaleX(1) scaleY(1) translateY(0);
		animation-timing-function:ease-out;
	}
	25% {
		transform:scaleX(0.75) scaleY(1.25) translateY(-12.5%);
		animation-timing-function:ease-in;
	}
	50% {
		transform:scaleX(1) scaleY(1) translateY(0);
		animation-timing-function:ease-out;
	}
	75% {
		transform:scaleX(1.25) scaleY(0.75) translateY(18.75%);
		animation-timing-function:ease-in;
	}
	100% {
		transform:scaleX(1) scaleY(1);
		animation-timing-function:ease-out;
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0);
		animation-timing-function:ease-out;
	}
	25% {
		transform: rotate(-5.625deg);
		animation-timing-function:ease-in;
	}
	50% {
		transform: rotate(0);
		animation-timing-function:ease-out;
	}
	75% {
		transform: rotate(5.625deg);
		animation-timing-function:ease-in;
	}
	100% {
		transform: rotate(0);
		animation-timing-function:ease-out;
	}
}

@keyframes border-pulse {
	from {border: solid black;}
	to {border: solid white;}
}