:root {
	font-size: calc(16px * pow(1.2,1));
	--header-height: calc(2rem + calc(1rem * pow(1.2, 6)));
}
@keyframes spinwait {
	0% {
		rotate: 0deg;
	}
	100% {
		rotate: 360deg;
	}
}
body {
	margin: 0;
	width: 100%;
	.hidden {
		visibility: hidden;
		display: none;
	}
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-heading-family);
		font-weight: var(--font-heading-weight);
		font-style: var(--font-heading-style);
	}
	header, main, footer {
		width: 100%;
		margin: 0px auto;
	}
	main {
		position: absolute;
		top: var(--header-height);
	}
	header, main {
		max-width: 800px;
		@media screen and (min-width: 801px) {
			left: calc(calc(100vw - 800px) / 2);
		}
	}
	@media screen and (max-width: 799px) {
		main {
			padding: 0 1rem;
			box-sizing: border-box;
		}
	}
	header, footer {
		position: fixed;
		z-index: 3;
	}
	header {
		background: var(--color-background-primary);
		height: var(--header-height);
		box-shadow: 0px 1px 4px black;
		border-radius: 0px 0px 4px 4px;
		h1 {
			font-size: calc(1rem * pow(1.2,4));
			@media screen and (max-width: 650px) {
				font-size: calc(1rem * pow(1.2,3.5));
			}
			@media screen and (max-width: 600px) {
				font-size: calc(1rem * pow(1.2,3));
			}
			@media screen and (max-width: 550px) {
				font-size: calc(1rem * pow(1.2,2.25));
			}
			@media screen and (max-width: 500px) {
				font-size: calc(1rem * pow(1.2,2));
			}
			@media screen and (max-width: 450px) {
				font-size: calc(1rem * pow(1.2,1.75));
			}
			@media screen and (max-width: 400px) {
				font-size: calc(1rem * pow(1.2,1.5));
			}
			text-transform: uppercase;
			position: absolute;
			top: 0;
			height: 100%;
			left: calc(1rem + calc(1rem * pow(1.2, 6)));
			width:
				calc(100% - calc(1rem + calc(2 * calc(1rem * pow(1.2, 6)))));
			margin: 0px auto;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
	}
	footer {
		width: 100%;
		bottom: 0px;
		height: 3rem;
		a {
			max-width: 800px;
			margin: 0px auto;
			display: flex;
			align-items: center;
			justify-content: right;
			div {
				height: 3rem;
				color: var(--color-cart-normal);
				width: 3rem;
				position: relative;
				transition: color 0.25s, background-color 0.25s;
				&:hover, &:active {
					color: var(--color-cart-active);
					span.cart-quantity {
						border: 1px solid var(--color-cart-active);
					}
				}
				span {
					position: absolute;
					&.material-symbols-outlined {
						font-size:3rem;
						height: 100%;
						width: 100%;
					}
					&.cart-quantity {
						box-sizing:border-box;
						padding-top:0.15rem;
						text-align:center;
						font-family: var(--font-heading-family);
						font-size: calc(1rem * pow(1.2, -2));
						width: 1.15rem;
						height: 1.15rem;
						left: 0.9rem;
						top: 0;
						border: 1px solid var(--color-cart-normal);
						border-radius: 1.5rem;
						background: var(--color-background-primary);
					}
				}
			}
		}
	}
	nav.homepage {
		float: left;
		a {
			display: block;
			position: relative;
			padding: 1rem;
			width: fit-content;
			height: fit-content;
			img {
				width: calc(1rem * pow(1.2, 6));
				height: calc(1rem * pow(1.2, 6));
			}
			&#previous {
				padding: 0;
				width: calc(1rem * pow(1.2, 6));
				height: calc(1rem * pow(1.2, 6));
				display: flex;
				align-items: center;
				justify-content: center;
				background: var(--color-text-link);
				border-radius: calc(1rem * pow(1.2, 6));
				margin: 1rem;
				color: var(--color-background-primary);
				text-decoration: none;
				span {
					font-size: calc(1rem * pow(1.2,4));
				}
			}
		}
	}
	nav.menu {
		float: right;
		text-align: right;
		.hamburger {
			display: block;
			position: relative;
			padding-top: 1rem;
			padding-right: 1rem;
			font-size: calc(1rem * pow(1.2,4));
			cursor: pointer;
			user-select: none;
		}
		#menu-toggle {
			visibility: hidden;
			display: none;
			&:checked + ul {
				display: block;
				visibility: visible;
			}
		}
		ul {
			display: none;
			visibility: hidden;
			&:after {
				position: absolute;
				content: "";
				background: inherit;
				height: 7px;
				width: calc(100% + 5px);
				left: -5px;
				top: -5px;
			}
			position:relative;
			padding: 0px 1rem 1rem 1rem;
			text-transform: uppercase;
			font-size: calc(1rem * pow(1.2, 2));
			font-family: var(--font-heading-family);
			font-style: var(--font-heading-style);
			font-weight: var(--font-heading-weight);
			list-style: none;
			background: white;
			box-shadow: 0px 1px 4px black;
			border-radius: 0px 0px 4px 4px;
			li {
				margin-bottom: calc(1rem * pow(1.2, -6));
				&.dead a {
					color: var(--color-text-dead);
					pointer-events: none;
				}
				a {
					color: var(--color-text-primary);
					text-decoration: none;
					&:hover {
						color: var(--color-text-link);
					}
				}
			}
		}
	}
	&.videos, &.projects {
		article {
			top: 0;
			h1 {
				width: 100%;
				font-size: calc(1rem * pow(1.2,4));
				line-height: calc(1rem * pow(1.2,5));
				text-align: center;
				margin-bottom: calc(1rem * pow(1.2,-4));
			}
			iframe {
				width: 49%;
				float: left;
				margin-right: 2%;
				aspect-ratio: 16/9;
				@media screen and (max-width: 600px) {
					width: 100%;
					float: none;
					margin-right: 0;
					margin-bottom: 0.5rem;
				}
			}
			p:first-of-type {
				margin-top: 0;
			}
			&:nth-child(even) {
				iframe {
					float: right;
					margin-right: 0%;
					margin-left: 2%;
				}
			}
		}
		article:after {
			content: "";
			display: table;
			clear: both;
			padding-bottom: 1rem;
		}
	}
	article {
		position: relative;
		margin: 0px auto;
		box-sizing: border-box;
		width: 100%;
		max-width: 800px;
		height: fit-content;
		h1 {
			font-size: calc(1rem * pow(1.2,5));
			margin-bottom: calc(1rem * pow(1.2,0));
			&.has-subhead {
				margin-bottom:0;
			}
		}
		h2 {
			font-size: calc(1rem * pow(1.2,4));
			&.is-subhead {
				margin-top: 0;
				font-size: calc(1rem * pow(1.2,1));
				font-family: var(--font-subheading-family);
				font-weight: var(--font-subheading-weight);
				font-style: var(--font-subheading-style);
				color: var(--color-text-dead);
			}
		}
		h3 {
			font-size: calc(1rem * pow(1.2,3));
		}
		h4 {
			font-size: calc(1rem * pow(1.2,2));
		}
		h5 {
			font-size: calc(1rem * pow(1.2,1));
		}
		h6, p, label {
			font-size: 1rem;			
		}
		p {
			text-align: justify;
		}
		legend {
			text-transform: uppercase;
			font-size: calc(1rem * pow(1.2,-1));
		}
		label {
			margin-right:1rem;
			margin-left:0.25rem;
		}
		p, ul, ol, legend, label {
			font-family: var(--font-text-family);
			line-height: calc(1rem * pow(1.2, 2));
		}
		ul {
			list-style-position: inside;
			list-style-type:none;
			padding:0;
			li {
				display:flex;
				&:before {
					content:'\2002\2022';
					flex: 0 0 1.5rem;
					transform: translate(0, -0.15rem);
				}
			}
		}
		p.dropcap:first-letter {
			float: left;
			font-size: 2.5rem;
			line-height: 1.3;
			font-weight: bold;
			margin-right: 0.3rem;
		}
		a, a:visited {
			color: var(--color-text-primary);
			&:hover, &:active {
				color: var(--color-text-link);
			}
		}
	}
	form {
		margin-top: calc(1rem * pow(1.2, 3));
		label, button {
			display: block;
			width: 100%;
			margin-top: calc(1rem * pow(1.2, 1));
			margin-bottom: calc(1rem *pow(1.2,-6));
			font-family: var(--font-heading-family);
			color: var(--color-text-primary);
			font-size: calc(1rem * pow(1.2, 2));
		}
		button {
			text-transform: uppercase;
			padding: calc(calc(1rem * pow(1.2,-4)) + 0.1875rem) 0 calc(1rem * pow(1.2,-4)) 0;
			&:hover {
				color: var(--color-text-link);
			}
		}
		input, select, textarea {
			display: block;
			width: 100%;
			font-size: 1rem;
			border: 1px solid black;
			border-radius: 6px;
			padding: 0.25rem 0.5rem;
		}
		textarea {
			height: 5rem;
		}
		.notyet {
			display: none;
			visibility: hidden;
		}
	}
	&.products{
		article {
			top: 0;
			&.merch-product {
				top:2rem;
			}
			h1 {
				width: 100%;
				font-size: calc(1rem * pow(1.2,4));
				line-height: calc(1rem * pow(1.2,5));
				margin-bottom: calc(1rem * pow(1.2,-4));
			}
			h1, h2, h3 {
				text-align: center;
			}
			img {
				width: 49%;
				float: left;
				margin-right: 2%;
				@media screen and (max-width: 600px) {
					width: 100%;
					float: none;
					margin-right: 0;
					margin-bottom: 0.5rem;
				}
			}
			&:nth-child(even) {
				article img {
					float: right;
					margin-right: 0%;
					margin-left: 2%;
				}
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
			.order-data {
				margin-left: 51%;
				width: 49%;
				margin-bottom: 0.2rem;
				&#for_p_and_q:after {
					content: "";
					display: table;
					clear: right;
					margin-bottom: 1rem;
				}
				@media screen and (max-width: 600px) {
					margin-left: 0;
					width: 100%;
				}
				#for_price {
					width: 65%;
					float: left;
				}
				#for_quantity {
					width: 33%;
					float: right;
				}
				#colors, #sizes, #price, #quantity {
					width: 100%;
				}
				label {
					display: block;
					font-size: calc(1rem * pow(1.2, -2));
					height: 1rem;
					text-transform: uppercase;
				}
				select, #quantity, #price, #add {
					font-size: 1rem;
					text-align: center;
					border-radius: 4px;
					border: 1px solid var(--color-text-primary);
					background: var(--color-background-primary);
				}
				select, #quantity, #price {
					padding: 0.4rem 0;
					box-shadow: 1px 1px 4px var(--color-text-primary);
				}
				#add {
					width: 100%;
					padding: 0.4rem 1rem;
					transition: transform .25s, box-shadow .25s;
					box-shadow: 1px 1px 4px var(--color-text-link);
					border-color: var(--color-text-link);
					color: var(--color-text-link);
					&:hover, &:active {
						transform: translate(2px, 2px);
						box-shadow: -1px -1px 4px var(--color-text-link);
					}
					&:disabled {
						border-color: var(--color-text-dead);
						color: var(--color-text-dead);
					}
				}
			}
		}
	}
	&.merch {
		main {
			margin-top: 1rem;
		}
		article {
			transition: transform .25s, box-shadow .25s;
			top: 0;
			width: 32%;
			float: left;
			margin-right: 2%;
			margin-bottom: 2%;
			&:nth-child(3n) {
				margin-right:0%;
			}
			a, a:active, a:visited {
				color: black;
				text-decoration: none;
			}
			border-radius: 4px;
			box-shadow: 0px 1px 4px black;

			@media screen and (max-width: 600px) {
				width: 49%;
				&:nth-child(3n) {
					margin-right: 2%;
				}
				&:nth-child(even) {
					margin-right:0%;
				}
			}
			@media screen and (max-width: 400px) {
				width: 100%;
				margin-right:0%;
			}
			img {
				width: 100%;
			}
			h1 {
				text-align: center;
				font-size: 1rem;
				height: 3rem;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			&:hover {
				transform:translate(4px,4px);
				box-shadow: -1px -1px 4px black;
				h1 {
					color: red;
				}
			}
		}
	}
	&.cart {
		a, a:visited {
			color: var(--color-text-primary);
			text-decoration: none;
			&:hover {
				color: var(--color-text-link);
			}
		}
		fieldset {
			margin: 0.5rem 0 0 0;
			border-radius: 6px;
			border: 1px solid black;
			font-family: var(--font-text-family);
			legend, label {
				font-size: calc(1rem * pow(1.2,-3));
				text-transform:uppercase;
			}
			label {
				display:block;
				color: var(--color-text-secondary);
				margin-top: 0.125rem;
				margin-bottom: 0.5rem;
			}
			input, select {
				box-sizing: border-box;
				padding: 4px;
				border: 1px solid black;
				border-radius: 4px;
				background: white;
				font-size: 1rem;
				width: 100%;
			}
			div {
				float: left;
				&#for-street_addr, &#for-city {
					width: 49%;
				}
				&#for-street_addr, &#for-province {
					margin-right: 2%;
				}
				&#for-country {
					width: 100%;
				}
				&#for-province {
					width: 75%;
					label {
						margin-bottom: 0;
					}
				}
				&#for-postal-code {
					width: 23%;
					label {
						margin-bottom: 0;
					}
				}
				@media screen and (max-width: 650px) {
					&#for-street_addr, &#for-city {
						width: 100%;
					}
					&#for-street_addr {
						margin-right: 0;
					}
					&#for-province {
						width: 65%;
					}
					&#for-postal-code {
						width: 33%;
					}
				}
				@media screen and (max-width: 450px) {
					&#for-province, &#for-postal-code {
						width: 100%;
					}
					&#for-province label {
						margin-bottom: 0.5rem;;
					}
				}
			}
			
		}
		#cart-table {
			font-family: var(--font-text-family);
			box-sizing: border-box;
			padding: 0.25rem;
			border: 1px solid black;
			border-radius: 6px;
			margin-top: 1rem;
			width: 100%;
			.cart-item {
				padding-bottom: 0.25rem;
				padding-top: 0.25rem;
				border-bottom: 1px solid black;
				display: flex;
				flex-wrap: wrap;
				& > div {
					text-align: center;
				}
				.for-thumb {
					flex: 1;
				}
				.for-name {
					flex: 10;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.optional-break {
					flex-basis: 100%;
					height: 0.375rem;
				}
				.for-price, .for-quantity, .for-line-total, .actions {
					flex-basis: 23%;
					padding-left: 0.25rem;
					&:before {
						display: block;
						text-align: center;
						text-transform: uppercase;
						font-size: calc(1rem * pow(1.2, -4));
						color: var(--color-text-secondary);
					}
				}
				@media screen and (max-width: 375px) {
					.actions {
						flex-basis:100%;
						padding-top: 0.5rem;
					}
					.for-price, .for-quantity, .for-line-total {
						padding:0;
						flex-basis: 32.2%;
					}
				}
				.for-price {
					padding-left: 0;
				}
				.for-price:before {
					content: 'price each';
				}
				.for-quantity:before {
					content: 'quantity';
				}
				.for-line-total:before {
					content: 'total';
				}
				&:last-child {
					border-bottom: none;
					padding-bottom: 0;
				}
				&:first-child {
					padding-top: 0;
				}
				div:not(.for-name) {
					font-size: calc(1rem * pow(1.2,-1));
				}
			}
			.quantity {
				width: 3rem;
				border: 1px solid black;
				text-align: center;
				border-radius: 4px;
			}
			img {
				min-width: 32px;
				max-width: 48px;
				margin-right: 0.25rem;
			}
		}
		#totals-table {
			box-sizing: border-box;
			font-family: var(--font-text-family);
			margin-top: 0.5rem;
			border: 1px solid black;
			border-radius: 6px;
			padding: 0.25rem 0.5rem;;
			display: flex;
			flex-wrap: wrap;
			div {
				text-align: center;
				justify-content: center;
				align-items: center;
				flex:10;
				@media screen and (max-width: 500px) {
					&#grand-total {
						padding-top: .25rem;
						flex-basis: 100%;
						font-size: calc(1rem * pow(1.2, 1.5));
					}
				}
				&.dead {
					color: var(--color-text-dead);
				}
				&:before {
					display: block;
					text-align: center;
					text-transform: uppercase;
					font-size: calc(1rem * pow(1.2, -4));
					color: var(--color-text-secondary);
				}
				&#shipping-update {
					display:flex;
					flex:1;
					align-items: center;
				}
				&#order-total:before {
					content: 'order total';
				}
				&#shipping:before {
					content: 'shipping';
				}
				&#grand-total:before {
					content: 'grand total';
				}
			}
		}
	}
	#loader {
		position: absolute;
		top:0px;
		left:0px;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background: var(--color-background-primary);
		opacity: 50%;
		box-sizing: border-box;
		padding-left:50%;
		padding-top:50vh;
		img {
			position:absolute;
			width:20%;
			transform: translate(-50%,-50%);
			transform-origin: top left;
		}
		#loader-splat {
			animation: spinwait 6s linear infinite;
		}
		#loader-words {
			animation: spinwait 5s linear infinite reverse;
		}
	}
	#error {
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		border: none;
		border-radius: 4px;
		box-shadow: 0px 0px 4px var(--color-text-link);
		font-family: var(--font-heading-family);
		color: var(--color-cart-normal);
		&:modal {
			display: flex;
		}
		p {
			flex-basis: 100%;
			text-align: center;
			font-size: calc(1rem * pow(1.2, 1));
		}
		button {
			font-family: var(--font-text-family);
			text-transform: uppercase;
			background: var(--color-background-primary);
			color: var(--color-cart-normal);
			border: 1px solid var(--color-cart-normal);
			box-sizing: border-box;
			font-size: 1rem;
			padding: 0.5rem;
			border-radius: 6px;
			transition: background 0.25s, color 0.25s;
			box-shadow: 0px 0px 2px var(--color-text-link);
			&:hover, &:active {
				background: hsl(from var(--color-background-primary) h s calc(l - 7));
				color: var(--color-text-link);
				box-shadow: none;
			}
		}
	}
}