/* ==========================================================================
   About Window - written in January 2025 by Neale Van Fleet
   ========================================================================== */

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  scroll-behavior: smooth !important;
  color: #333;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Source Sans Pro', Helvetica, Sans-serif;
  -webkit-font-smoothing: antialiased;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

p {
	text-align: center;
	font-weight: 400;
	margin: 5px 0 5px;
	padding: 0;
}	

p.footerline {
	margin: 30px 0 0 0;
	color: #fff;
	font-weight: 200;
	font-size: 10px;
	line-height: 12px;
}

img  { 
	-webkit-user-drag: none; 
}

a {
	color: #fff;
	transition: all 300ms ease;
	text-decoration: none;
}

a:hover {
	color: #fff;
	opacity: 0.8;
	transition: all 100ms ease;
	text-decoration: underline;
}

.build-info {
	padding: 10px 0 10px 10px;
	width: 100%;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(5px);
	box-shadow: 0 2px 8px rgba(34, 34, 34, 0.3);
	color: #222;
	border-radius: 24px;
	display: block;
	margin: 0 auto 20px;	
	position: relative;
	
	transition: all 300ms ease;
	transform: scale(1);
}

.build-info:hover {
	cursor: pointer;
}

.build-info:active {
	transition: all 100ms ease;
	transform: scale(0.95);
}

.build-info b {
	color: #279878;
	text-align: right;
	margin-right: 5px;
	font-weight: 500;
}

.build-info .copy-link {
	position: absolute;
	top: 7px; right: 15px;
}

.build-info .copy-link img {
	position: relative;
	top: 3px;
}

table {
	width: 100%;
	color: rgba(34, 34, 34, 0.5);
}

table .label {
	text-align: right;
	font-weight: 500;
	padding-right: 5px;
	color: #222;
}

table .strong, table .version {
	font-weight: 700;
	color: #222;
}

/* ==========================================================================
   Grid Layout
   ========================================================================== */

.columns {
	display: grid;
	gap: 30px;
	justify-content: stretch;
	grid-auto-flow: row;
	clear: both;
	justify-items: stretch;
	padding: 0 15px;
}

.columns img {
	max-width: 100%;
}

.columns:before {
	content: none;
}

/* Define Number of Columns of parent */
.columns.two {
	grid-template-columns: 1fr 1fr;
}

.columns.three {
	grid-template-columns: 1fr 1fr 1fr;
}

.columns.four {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.columns.five {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.columns.six {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.columns.seven {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.columns.eight {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* Larger sizes for child items */

.columns .double-width {
	grid-column-end: span 2;
}

.columns .triple-width {
	grid-column-end: span 3;
}

.columns .quadruple-width {
	grid-column-end: span 4;
}

.columns .double-height {
	grid-row-end: span 2;
}

.columns .triple-height {
	grid-row-end: span 3;
}

.columns .quadruple-height {
	grid-row-end: span 4;
}

/* Make everything single-column on mobile */

@media all and (max-width: 631px) { 
	.columns.two, .columns.three, .columns.four, .columns.five, .columns.six, .columns.seven, .columns.eight {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.columns .double, .columns .triple, .columns .quadruple {
		grid-column-end: span 1;
	}
	
	.columns.two-mobile {
		grid-template-columns: 1fr 1fr !important;
	}
	
	.columns .double-width {
		grid-column-end: span 1;
	}
	
	.columns .triple-width {
		grid-column-end: span 1;
	}
	
	.columns .quadruple-width {
		grid-column-end: span 1;
	}
}

/* ==========================================================================
   Animation Library - Copied from main site Jan 16 2025
   ========================================================================== */

.animate {
	animation-duration: 0.5s;
	animation-delay: 0.1s;
	--DelayMultiplier: 1; 
	animation-name: animate-fade;
	animation-timing-function: cubic-bezier(.26,.53,.74,1.48);
	animation-fill-mode: backwards;
}

/* Fade In */
.animate.fade {
	animation-name: animate-fade;
	animation-timing-function: ease;
}

@keyframes animate-fade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* Pop In */
.animate.pop {
	animation-name: animate-pop;
}

@keyframes animate-pop {
	0% {
		opacity: 0;
		transform: scale(0.5, 0.5);
	}
	
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

/* Blur In */
.animate.blur {
	animation-name: animate-blur;
	animation-timing-function: ease;
}

@keyframes animate-blur {
	0% {
		opacity: 0;
		filter: blur(15px);
	}
	
	100% {
		opacity: 1;
		filter: blur(0px);
	}
}

/* Rise In */
.animate.rise {
	animation-name: animate-rise;
	animation-timing-function: ease;
}

@keyframes animate-rise {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}
	
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Glow In */
.animate.glow {
	animation-name: animate-glow;
	animation-timing-function: ease;
}

@keyframes animate-glow {
	0% {
		opacity: 0;
		filter: brightness(3) saturate(3);
		transform: scale(0.8, 0.8);
	}
	
	100% {
		opacity: 1;
		filter: brightness(1) saturate(1);
		transform: scale(1, 1);
	}
}

/* Special Glow Animation for site index page */
.animate.indexglow {
	animation-name: animate-indexglow;
	animation-timing-function: ease;
}

@keyframes animate-indexglow {
	0% {
		opacity: 1;
		filter: brightness(1) saturate(1);
		transform: scale(1, 1);
	}
	
	50% {
		opacity: 1;
		filter: brightness(1.3) saturate(1.3);
		transform: scale(1.03, 1.03);
	}
	
	100% {
		opacity: 1;
		filter: brightness(1) saturate(1);
		transform: scale(1, 1);
	}
}


/* Grow In */

.animate.grow {
	animation-name: animate-grow;
}

@keyframes animate-grow {
	0% {
		opacity: 0;
		transform: scale(1, 0);
		visibility: hidden;
	}
	
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

/* Splat In */

.animate.splat {
	animation-name: animate-splat;
}

@keyframes animate-splat {
	0% {
		opacity: 0;
		transform: scale(0, 0) rotate(3deg) translate(0, -30px);
	}
	
	70% {
		opacity: 1;
		transform: scale(1.1, 1.1) rotate(3deg));
	}
	
	85% {
		opacity: 1;
		transform: scale(1.1, 1.1) rotate(3deg) translate(0, -10px);
	}
	
	100% {
		opacity: 1;
		transform: scale(1, 1) rotate(0) translate(0, 0);
	}
}

/* Roll In */

.animate.roll {
	animation-name: animate-roll;
	//animation-timing-function: ease-in-out;
}

@keyframes animate-roll {
	0% {
		opacity: 0;
		transform: scale(1, 1) rotate(180deg);
	}
	
	100% {
		opacity: 1;
		transform: scale(1, 1) rotate(0deg);
	}
}

/* Flip In */

.animate.flip {
	animation-name: animate-flip;
	transform-style: preserve-3d;
	perspective: 1000px;
}

@keyframes animate-flip {
	0% {
		opacity: 0;
		transform: rotateX(-120deg) scale(0.9,0.9);
	}
	
	100% {
		opacity: 1;
		transform: rotateX(0deg) scale(1,1);
	}
}

/* Spin In */

.animate.spin {
	animation-name: animate-spin;
	transform-style: preserve-3d;
	perspective: 1000px;
}

@keyframes animate-spin {
	0% {
		opacity: 0;
		transform: rotateY(-120deg) scale(0.9,0.9);
	}
	
	100% {
		opacity: 1;
		transform: rotateY(0deg) scale(1,1);
	}
}

/* Slide In */

.animate.slide { animation-name: animate-slide; }

@keyframes animate-slide {
	0% {
		opacity: 0;
		transform: translate(0,20px);
	}
	
	100% {
		opacity: 1;
		transform: translate(0,0);
	}
}

/* Drop In */

.animate.drop { 
	animation-name: animate-drop; 
	animation-timing-function: cubic-bezier(.77,.14,.91,1.25);
}

@keyframes animate-drop {
	0% {
		opacity: 0;
		transform: translate(0,-100px) scale(0.95, 1.05);
	}
	
	50% {
		opacity: 1;
		transform: translate(0,0) scale(0.95, 1.05);
	}
	
	75% {
		opacity: 1;
		transform: translate(0,0) scale(1.01, 0.9);
	}
	100% {
		opacity: 1;
		transform: translate(0,0) scale(1, 1);
	}
}

/* Spring Drop Animation */
.animate.spring-drop {
	animation: 3.3s spring-drop linear;
	animation-fill-mode: both;
	animation-delay: 0s;
}

@keyframes spring-drop {
	 0% { transform: translateY(-50.0px); opacity: 0; }
	 1% { transform: translateY( -31.15px); }
	 2% { transform: translateY( -13.0px); }
	 3% { transform: translateY( 3.6px); }
	 4% { transform: translateY( 18.0px); }
	 5% { transform: translateY( 29.65px); }
	 6% { transform: translateY( 38.35px); }
	 7% { transform: translateY( 44.0px); }
	 8% { transform: translateY( 46.65px); }
	 9% { transform: translateY( 46.55px); }
	 10% { transform: translateY( 44.05px); }
	 11% { transform: translateY( 39.55px); }
	 12% { transform: translateY( 33.55px); }
	 13% { transform: translateY( 26.55px); }
	 14% { transform: translateY( 19.05px); }
	 15% { transform: translateY( 11.45px); }
	 16% { transform: translateY( 4.2px); }
	 17% { transform: translateY( -2.4px); }
	 18% { transform: translateY( -8.05px); }
	 19% { transform: translateY( -12.55px); }
	 20% { transform: translateY( -15.9px); }
	 21% { transform: translateY( -18.0px); }
	 22% { transform: translateY( -18.85px); }
	 23% { transform: translateY( -18.7px); }
	 24% { transform: translateY( -17.55px); }
	 25% { transform: translateY( -15.65px); }
	 26% { transform: translateY( -13.15px); }
	 27% { transform: translateY( -10.25px); }
	 28% { transform: translateY( -7.2px);}
	 29% { transform: translateY( -4.15px);) }
	 29% { transform: translateY( -1.3px); }
	 31% { transform: translateY( 1.35px); }
	 32% { transform: translateY( 3.55px); }
	 33% { transform: translateY( 5.3px);  }
	 34% { transform: translateY( 6.55px); }
	 35% { transform: translateY( 7.35px); }
	 36% { transform: translateY( 7.65px); }
	 37% { transform: translateY( 7.5px); }
	 38% { transform: translateY( 7.0px); }
	 39% { transform: translateY( 6.15px); }
	 40% { transform: translateY( 5.15px); }
	 41% { transform: translateY( 3.95px); }
	 42% { transform: translateY( 2.75px); }
	 43% { transform: translateY( 1.5px); }
	 44% { transform: translateY( 0.35px); }
	 45% { transform: translateY( -0.7px); }
	 46% { transform: translateY( -1.55px); }
	 47% { transform: translateY( -2.25px); }
	 48% { transform: translateY( -2.7px); }
	 49% { transform: translateY( -3.0px); }
	 50% { transform: translateY( -3.1px);  }
	 51% { transform: translateY( -3.0px); }
	 52% { transform: translateY( -2.75px); }
	 53% { transform: translateY( -2.45px); }
	 54% { transform: translateY( -2.0px); }
	 55% { transform: translateY( -1.5px); }
	 56% { transform: translateY( -1.05px); }
	 57% { transform: translateY( -0.55px); }
	 57% { transform: translateY( -0.1px); }
	 58% { transform: translateY( 0.35px); }
	 60% { transform: translateY( 0.65px); }
	 61% { transform: translateY( 0.95px); }
	 62% { transform: translateY( 1.1px); }
	 63% { transform: translateY( 1.2px); }
	 64% { transform: translateY( 1.25px); }
	 65% { transform: translateY( 1.2px); }
	 66% { transform: translateY( 1.1px); }
	 67% { transform: translateY( 0.95px); }
	 68% { transform: translateY( 0.8px); }
	 69% { transform: translateY( 0.6px); }
	 70% { transform: translateY( 0.4px); }
	 71% { transform: translateY( 0.2px); }
	 72% { transform: translateY( 0.0px); }
	 73% { transform: translateY( -0.15px); }
	 74% { transform: translateY( -0.3px); }
	 75% { transform: translateY( -0.4px); }
	 76% { transform: translateY( -0.45px); }
	 77% { transform: translateY( -0.5px); }
	 78% { transform: translateY( -0.5px); }
	 79% { transform: translateY( -0.5px); }
	 80% { transform: translateY( -0.45px); }
	 81% { transform: translateY( -0.4px); }
	 82% { transform: translateY( -0.3px); }
	 83% { transform: translateY( -0.2px); }
	 84% { transform: translateY( -0.15px); }
	 85% { transform: translateY( -0.05px); }
	 86% { transform: translateY( 0.0px); }
	 87% { transform: translateY( 0.05px); }
	 88% { transform: translateY( 0.1px); }
	 89% { transform: translateY( 0.15px); }
	 90% { transform: translateY( 0.2px); }
	 91% { transform: translateY( 0.2px); }
	 92% { transform: translateY( 0.2px); }
	 93% { transform: translateY( 0.2px); }
	 94% { transform: translateY( 0.15px); }
	 95% { transform: translateY( 0.15px); }
	 96% { transform: translateY( 0.1px); }
	 97% { transform: translateY( 0.1px); }
	 98% { transform: translateY( 0.05px); }
	 99% { transform: translateY( 0.0px); }
	 100% { transform: translateY( 0.0px);opacity: 1; }
}


/* Animation Delays */

.delay-1 {
	animation-delay: 0.6s;
	animation-delay: calc(0.6s * var(--DelayMultiplier));
	
}

.delay-2 {
	animation-delay: 0.7s;
	animation-delay: calc(0.7s * var(--DelayMultiplier));
}

.delay-3 {
	animation-delay: 0.8s;
	animation-delay: calc(0.8s * var(--DelayMultiplier));
}

.delay-4 {
	animation-delay: 0.9s;
	animation-delay: calc(0.9s * var(--DelayMultiplier));
}

.delay-5 {
	animation-delay: 1s;
	animation-delay: calc(1s * var(--DelayMultiplier));
}

.delay-6 {
	animation-delay: 1.1s;
	animation-delay: calc(1.1s * var(--DelayMultiplier));
}

.delay-7 {
	animation-delay: 1.2s;
	animation-delay: calc(1.2s * var(--DelayMultiplier));
}

.delay-8 {
	animation-delay: 1.3s;
	animation-delay: calc(1.3s * var(--DelayMultiplier));
}

.delay-9 {
	animation-delay: 1.4s;
	animation-delay: calc(1.4s * var(--DelayMultiplier));
}

.delay-10 {
	animation-delay: 1.5s;
	animation-delay: calc(1.5s * var(--DelayMultiplier));
}

.delay-11 {
	animation-delay: 1.6s;
	animation-delay: calc(1.6s * var(--DelayMultiplier));
}

.delay-12 {
	animation-delay: 1.7s;
	animation-delay: calc(1.7s * var(--DelayMultiplier));
}

.delay-13 {
	animation-delay: 1.8s;
	animation-delay: calc(1.8s * var(--DelayMultiplier));
}

.delay-14 {
	animation-delay: 1.9s;
	animation-delay: calc(1.9s * var(--DelayMultiplier));
}

.delay-15 {
	animation-delay: 2s;
	animation-delay: calc(2s * var(--DelayMultiplier));
}

@media screen and (prefers-reduced-motion: reduce) {
	.animate {
		animation: none !important;
	}
}
