@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'THICCCBOI';
    src: url('../fonts/THICCCBOI-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


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

:root {
	font-size: 16px;
	--page-padding: 1.5rem;
	--color-text: #A69606;
	--color-bg: #FFFEF5;
	--color-link: #A69606;		
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg); 
	font-family: "THICCCBOI", sans-serif;	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	overflow-x: hidden;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 5000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {	
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid var(--color-text);
	background: transparent;
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
}

.frame {
	padding: var(--page-padding);
	position: relative;
	display: grid;
	z-index: 1000;
	width: 100%;
	grid-row-gap: 1rem;
	grid-column-gap: 2rem;
	justify-items: start;
	text-transform: uppercase;
	font-size: 12px;
}

.frame--header {
	height: 100%;
	z-index: 3000;	
	grid-template-areas: 'title' 'prev' 'back' 'sub' 'heading';
}

.frame--footer {
	grid-template-areas: 'credits' 'author';
	align-content: end;
}

.frame #cdawrap {
  justify-self: start;
}

.frame a {
  pointer-events: auto;
}

.frame__title {
  grid-area: title;
  font-size: inherit;
  margin: 0;
}

.frame__sub {
  grid-area: sub;
}

.frame__heading {
	grid-area: heading;
	align-self: center;
	justify-self: start;
	width: min-content;
	display: flex;
	flex-direction: column;
	margin-top: 10vh;
}

.frame__heading h1 {
	margin: 0;
	line-height: 0.9;
	text-transform: uppercase;
	margin-left: -0.065em;
	font-size: clamp(2.5rem,12vw,7rem);		
}

i {
	font-style: normal;	
}

.frame__heading p {
		margin: 0;
}

.frame__credits {
	grid-area: credits;
}

.frame__author {
	display: flex;
	gap: 1.5rem;
	grid-area: author;
}

.content {
	padding: var(--page-padding);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.content--perspective {
	perspective-origin: 50% 0%;
	perspective: 1000px;
}

.text-large {
	font-size: clamp(1.2rem,2vw,1.3rem);
	max-width: 900px;
	margin: 0;
	line-height: 1.4;
	font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500, "INKT" 100;
	grid-area: content-text;
}

.table-wrapper {
	overflow-x: auto;
	width: 100%;
}

table.text-large {
	border-collapse: collapse;
	table-layout: initial;
	width: 100%;
}
table.text-large th,
table.text-large td {
	border-bottom: 1px solid var(--color-text);
	padding: 0.4em;
	text-align: left;
	width: 12%;
}
table.text-large th:nth-child(2),
table.text-large td:nth-child(2) {
	width: 26%;
}
table.text-large th:nth-child(3),
table.text-large td:nth-child(3) {
	width: 50%;
}

.content--grid,
.content--grid .content__inner {
	display: grid;
	overflow: hidden;
	grid-column-gap: 5vw;
	grid-row-gap: 2vh;
	align-content: center;
	grid-template-areas: 'content-title' 'content-text';
	justify-items: start;
}

.content--grid:has(.content__inner) {
	display: block;
	padding: 0;
}

.content__inner {
	width: 100%;
	height: 100%;
	border-radius: 0 0 2rem 2rem;
}

.content--half {
	display: flex;
	flex-direction: column;
	gap: 3vh;
	text-align: center;
}

.content--half:nth-child(odd) {
	margin-left: auto;
}

.content__img {
	grid-area: content-img;
	width: 50%;
	/*max-width: 500px;*/
	height: auto;
}

.content__img--large {
	box-shadow: 0 0 5px var(--color-text);
	margin-bottom: 2vh;
	width: 100%;
	height: auto;
}

.content__img--small {
	height: auto;
	width: 40%;
}

.spacer {
	margin-top: 20vh;
}

.content__title {
	align-self: end;
	grid-area: content-title;	
	text-transform: uppercase;
	line-height: 1.4;
	font-weight: normal;
	font-size: clamp(1.5rem,3vw,3rem);
	margin: 0;	
	text-align: left;
}

.content__text {
	margin: 0;
	max-width: 500px;
	grid-area: content-text;
	text-align: center;
	line-height: 1.5;
	padding: 0;
	backface-visibility: hidden;
}

.content__text--narrow {
	max-width: 300px;
}

.content--intro {
	padding-top: 25vh;
	padding-bottom: 25vh;
	z-index: 2;
}

.content--outro {
	padding-top: 30vh;
	padding-bottom: 30vh;
}

@media screen and (min-width: 63em) {
	body {
		--page-padding: 2rem 3rem;
	}
	.frame--header {		
		background-size: auto 60%;
		background-position: 110% 50%;		
		height: 100vh;
		grid-template-columns: auto auto auto 1fr 1fr;
		grid-template-rows: auto 1fr auto;
		align-content: space-between;
		grid-template-areas: 'title back prev sub sponsor' 'heading heading heading heading heading' 'demos demos demos demos demos';
	}
	.frame__heading {
		margin-top: 0;
	}
	.frame__heading h2 {
		white-space: nowrap;
	}
	.frame__heading p {
		margin: 0 0 0 auto;
	}	
	.frame__demos {
		position: fixed;
		bottom: 2rem;
	}
	.frame--footer {
		padding-bottom: 0;
		grid-template-areas: 'credits ...' '... author';
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 6rem;
	}
	.frame__author {
		align-self: center;
	}
	.frame #cdawrap {
		max-width: 300px;
		text-align: right;
	}
	.frame #cdawrap, 
	.frame__author,
	.frame__sub {
		justify-self: end;
	}	
	.content__img--large {
		margin-bottom: 0;
		width: 100%;
	}
	.content__img--small {	
		width: 15%;
	}
	.content__img--left {
		justify-self: end;
	}
	.content__text {
		padding: 0 1rem;	
	}
	.content__text--left {
		text-align: left;
		align-self: start;
	}
	.content--half {
		width: 50%;
	}
	table.text-large {
		table-layout: fixed;
	}
}