@view-transition {
	navigation: auto;
}

@font-face {
	font-family: 'TitanOne-Regular';
	src: local('TitanOne-Regular'), url('/fonts/TitanOne-Regular.ttf') format('truetype');
}



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

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
	list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.25;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

html {
	background-color: black;
	background-image: linear-gradient(rgb(31, 31, 31), rgb(20, 20, 20));
	font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
	font-size: 16px;
}

.center {
	text-align: center;
}

.yellow {
	color: rgb(252, 252, 120);
}

main {
	min-height: 100dvh;
	width: min(100% - 1rem, 90ch);

	section {
		padding: 1rem;
	}
}

.grid-center {
	display: grid;
	place-items: center;
	width: 100%;
}

.flex-row {
	display: flex;
	flex-flow: row wrap;
	place-items: center;
	place-content: center;
	gap: 0.5rem;
}

.logos {
	gap: 1rem;
	width: 100%;
	padding-block: 0 1rem;
	place-items: center;
	place-content: center;
	a[href], .logo {
		display: block;
		width: 30ch;
		margin-inline: auto;
		padding-block: 1rem;
	}
}

.main-nav {
	width: min(100%, 70ch);
	gap: 1.5rem 1.5rem;
	font-family: 'TitanOne-Regular';
	text-transform: uppercase;
	font-size: clamp(1rem, 5dvw, 1.5rem);
	color: hsl(119, 40%, 50%);

	a[href] {
		letter-spacing: 1px;
		color: white;
		display: inline-block;
		padding: 0.75rem 1rem;
		border: 4px solid hsl(119, 40%, 50%);
		text-decoration: none;
		text-shadow: 0 2px 2px hsla(119, 40%, 12%, 1);
		border-radius: 0.5rem;
		width: min(100%, 12ch);
		text-align: center;
		flex-grow: 1;
		/* box-shadow: 4px 12px 0 hsl(119, 40%, 50%); */
		text-transform: uppercase;
		background-color: hsl(119, 40%, 50%);
		transition:
			box-shadow 100ms ease-out,
			outline 100ms ease-out,
			background-color 200ms ease-out,
			color 200ms ease-out;

		&:hover {
			box-shadow: 0 0 0 hsl(119, 40%, 50%);
			background-color: hsl(119, 40%, 50%);
			color: white;
			outline: 2px solid hsl(119, 40%, 50%);
			text-shadow: 0 -2px 2px hsla(119, 40%, 12%, 1);
			transition:
				box-shadow 100ms ease-in,
				outline 100ms ease-in,
				background-color 200ms ease-in,
				color 200ms ease-in;
		}
	}

	a[href]:last-of-type {
		width: 100%;
		text-transform: revert;
	}

	a[href]:last-of-type::after {
		content: "⤤";
		padding-left: 0.25rem;
		font-weight: bolder;
		font-size: 1.25rem;
	}
}

section:has(.coa-list) {
	.main-nav a[href]:first-of-type {
		background-color: hsl(119, 40%, 50%);
		color: white;
		outline: 4px solid whitesmoke;
		box-shadow: none;
	}
}

.coa-list {
	width: 100%;
	font-family: 'TitanOne-Regular';
	text-transform: uppercase;
	font-size: clamp(1rem, 5dvw, 1.5rem);

	ul {
		padding: 1rem;
		margin: 5dvh auto;
		gap: 1rem;
	}

	li {
		list-style-type: none;
		margin-block: 0 1.75rem;
		text-transform: uppercase;

		a[href] {
			border-radius: .5rem;
			padding: 1rem;
			color: white;
			text-decoration: none;
			flex-grow: 1;
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
		}
	}

	.blue {
		background-color: rgb(86, 86, 247);
		box-shadow: 0 4px white;
		transition: box-shadow 100ms ease-out;

		&:hover {
			box-shadow: 8px 12px rgb(86, 86, 247);
			outline: 4px solid whitesmoke;
			transition: box-shadow 100ms ease-in;
		}
	}

	.strawberry {
		background-color: rgb(244, 93, 93);
		box-shadow: 0 4px white;
		transition: box-shadow 100ms ease-out;

		&:hover {
			box-shadow: 8px 12px rgb(244, 93, 93);
			outline: 4px solid whitesmoke;
			transition: box-shadow 100ms ease-in;
		}
	}

	.mint {
		background-color: rgb(131, 213, 163);
		box-shadow: 0 4px whitesmoke;
		transition: box-shadow 100ms ease-in;

		&:hover {
			box-shadow: 8px 12px rgb(131, 213, 163);
			outline: 4px solid whitesmoke;
			transition: box-shadow 100ms ease-in;
		}
	}
}

.page-body {
	color: whitesmoke;
	h1 {
		margin-block: 2rem;
		font-size: 2.5rem;
		text-align: center;
	}
	
	h2 {
		margin-block: 2rem;
	}
	h1, h2 {
		text-transform: uppercase;
	}
	p {
		margin-block: 1rem;
	}
	ul li {
		margin-block: 0.5rem;
		line-height: 1.3;
	}
}

.notes {
	margin-block: 1rem;
	color: white;
	font-size: 2rem;
	text-align: center;
}

.bigger {
	font-size: 1.25rem;
	font-weight: 800;
}

.page-nav {
	margin-block: 0 2rem;
	text-align: center;
	a[href] {
		display: inline-block;
		padding-inline: 1rem;
		text-decoration-color: whitesmoke;
		color: rgb(252, 252, 120);
		&:hover {
			text-decoration: none;
			color: whitesmoke;
		}
	}
}

.coa-list {
	table {
		margin-block: 2rem 0;
		border-collapse: collapse;
		border: 8px solid rgb(48, 48, 48);
		color: white;
		background-color: rgb(48, 48, 48);
		border-radius: 1rem;
		overflow: none;
		font-family: Arial;
		table-layout: fixed;
		width: min(100% - 1rem, 90ch);
		margin-inline: auto;
		th {
			padding: 2rem 0.5rem;
			font-size: clamp(0.75rem, 3dvw, 1rem);
		}
		tbody {
			color: black;
			tr td {
				text-align: center;
				text-transform: capitalize;
				font-size: clamp(0.75rem, 3dvw, 1rem);
				background-color: whitesmoke;
				padding: 2rem 0.5rem;
				a[href] {
					display: block;
				}
			}
		}
		tfoot {
			padding: 1rem;
			text-align: center;
			text-transform: none;
			tr td {
				padding-top: 1rem;
			}
		}
		
	}
}