@font-face {
	font-family: 'JetBrains Mono';
	src: url('./media/fonts/JetBrainsMono-Variable.ttf') format('truetype');
}

@font-face {
	font-family: 'Cabinet';
	src: url('./media/fonts/CabinetGrotesk-Variable.ttf') format('truetype');
}

:root {
	background-color: white;
	--monospace-font: 'JetBrains Mono', monospace;
}

html {
	margin: 0;
	padding: 0;
}

body {
	overflow-x: hidden;
	color: black;
}

/* main website navigation - this is something I worked on with my code totur Hoesok. I also intergrated the mobile hamburger menu that is similar to something Cason taught me while we were working on project 2*/
nav {
	display: flex;
	flex-direction: column;
	font-family: var(--monospace-font);

	.top-bar {
		margin-block-start: -1rem;
		padding: 0.5rem;

		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1rem;
		/* border-block-end: 2px #5B5C5C solid;  */
		font-size: 1.2rem;
		color: #5B5C5C;

		a {
			font-size: 1.2rem;
		}

		.top-bar-title {
			position: absolute;
			text-align: center;
			left: -11rem;
			right: 0rem;
			z-index: 100;
		}

		.top-bar-toggle-label {
			cursor: pointer;
			padding: 0.5rem;
			margin-inline-start: auto;
			z-index: 100;
		}

		.hamburger {
			margin-block-start: 4rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 24px;
			height: 18px;
			z-index: 100;
			/* Soko and Lucy helped me find a better way to show this on mobile. originally O had a white band across the top with some text that wasn't looking great and I was able to bounce ideas of off them to come up with the final design of my mobile nav */

			span {
				display: block;
				height: 1.5px;
				background-color: #5B5C5C;
				border-radius: 1px;
				transition: all 0.3s ease;
				/* This makes the menu close smoothly, you can find more on this here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition */
			}
		}
	}

	.menu {
		margin: 0;
		padding: 0;
		height: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: height 0.5s;
		will-change: height;
		/* will-change helps with gif performance on mobile, it's not ideal but my gif is pretty big since I wanted it to have many frames. I learnt this from Hoesok, but I also found some research on this on mdn https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/will-change */

		li {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
			text-align: center;
			border-block-end: 2px #ffffff solid;

			a {
				padding-block: 1rem 0.5rem;
				text-decoration: none;
				color: black;
			}

			&.row0 {
				background-color: #ffdcc2;
			}

			&.row1 {
				background-color: #FFB781;
			}

			&.row2 {
				background-color: #FF9446;
			}

			&.row3 {
				background-color: #E76200;
			}

			.title {
				font-size: 1.3rem;
				text-transform: uppercase;
				text-align: center;
			}

			.author-date {
				font-size: 0.9rem;
				font-family: var(--monospace-font);
				text-align: center;
				font-weight: 100;
			}
		}
	}
}

#menu-toggle-button:checked+.menu {
	height: calc(18rem + 1px);
}

/* learnt this from my code tutor using the has selector, to select just the spans within my nav. Here's how it works https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has */
nav:has(#menu-toggle-button:checked) .hamburger span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

nav:has(#menu-toggle-button:checked) .hamburger span:nth-child(2) {
	opacity: 0;
}

nav:has(#menu-toggle-button:checked) .hamburger span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

#menu-toggle-button {
	display: none;
}

@media screen and (min-width: 1400px) {
	#menu-toggle-button:checked+.menu {
		height: auto;
	}
}

header {
	margin-block-start: 0rem;
	margin-block-end: -1rem;
	margin-inline-start: 1rem;
	padding-block-start: 11rem;
	padding-block-end: 2rem;
	display: flex;
	flex-direction: row;
	text-align: right;
}

.meta {
	display: flex;
	justify-content: center;
	gap: 10rem;
	width: 100%;
}


h1 {
	margin-block-start: 1rem;
	margin-inline-start: 0rem;
	font-family: var(--monospace-font);
	text-transform: uppercase;
	font-size: 2.6rem;
	letter-spacing: 0.1rem;
	font-weight: 600;
}

.titles {
	line-height: 1;
	text-align: left;
	margin-inline-end: 2rem;

	.author-date {
		color: rgb(0, 0, 0);
		font-size: 1rem;
		font-family: var(--monospace-font);
		margin-inline-start: 0rem;
		font-weight: 100;
		padding-inline: 0;
	}
}

h2 {
	padding-inline-start: 1rem;
	position: sticky;
	top: 0;
	padding-block: 3rem;
	width: 100%;
	/* Sets the width to 320 pixels for mobile */
	overflow: hidden;
	height: 50px;
	z-index: 30;
	font-family: var(--monospace-font);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgb(0, 0, 0);
	border-block-end: 12px #ffffff double;

}

blockquote {
	letter-spacing: 0.01rem;
	padding: 1rem;
	margin-inline-end: 0rem;
	margin-block-start: 2.5rem;
	margin-block-end: 2.5rem;
	position: relative;
	top: 0;
	font-family: 'Cabinet', sans-serif;
	font-weight: 600;
	color: black;
	font-size: 1.5rem;
}

p {
	margin-block: 0.5rem;
	padding-inline: 1rem;
	padding-block: 1.5rem;
	font-family: 'Cabinet', sans-serif;
	font-size: 1.3rem;
	color: black;
	max-width: 100%;
	letter-spacing: 0.07rem;
	line-height: 120%;
	text-wrap: pretty;
}

.footnotes {
	padding-inline: 2rem;
	margin-block: 2rem;
	font-family: var(--monospace-font);
	font-weight: 100;
	font-size: 0.9rem;
	color: black;
	line-height: 150%;
	text-wrap: pretty;

/* This sets the margin after my final footnote for that section*/
	&>* {
		margin-block-end: 0.25rem;
		font-size: 100%;
	}

	&>*+* {
		margin-block-start: 0rem;
	}
}

figure {
	margin-block-end: 2.5rem;
}

sup {
	font-size: 0.7rem;
	vertical-align: super;
	line-height: 0;
}

a {
	text-decoration: underline solid 1px rgb(0, 0, 0);
}

footer {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	svg {
		height: 2rem;
		overflow: hidden;
		align-self: center;
		display: block;
	}

	.footer-title {
		margin-block-end: -3rem;
		padding-inline-start: 1rem;
		max-width: 20ch;
		font-family: var(--monospace-font);
		text-transform: uppercase;
		font-weight: 700;
		color: #5B5C5C;
		font-size: 2rem;
		text-align: left;
	}

	.footer-text {
		margin: 0;
		padding-inline: 1rem;
		padding: 0;
		display: flex;
		flex-direction: row;
		width: 100%;
		gap: 0.4rem;
		align-items: baseline;
		justify-content: space-between;
		font-variant-emoji: text;
		/* My arrow was showing up as an emoji on iphone, hopefully this fixes it for the most part https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-emoji */
	}

	p {
		font-family: 'Cabinet', sans-serif;
		font-weight: 200;
		color: black;
		font-size: 1rem;
		text-align: left;
		font-variant-emoji: text;
	}

	a {
		font-family: 'Cabinet', sans-serif;
		font-weight: 200;
		color: rgb(90, 90, 90);
		font-size: 1rem;
		text-align: left;
		text-decoration: none;
		font-variant-emoji: text;
	}

	sup {
		font-size: 0.5rem;
		vertical-align: super;
	}
}
@media screen and (min-width: 768px) {
	/* I thought the middle breakpoints should have the same nav as desktop */
	nav {
		flex-direction: row;
		align-items: center;

		.top-bar {
			padding-block: 1.8rem;
			display: none;

			a {
				text-transform: uppercase;
				font-size: 0.7rem;
			}

			.top-bar-title,
			.top-bar-toggle-label {
				display: none;
			}
		}

		.menu {
			flex-direction: row;
			flex: 1;
			height: auto;
			color: black;


			li {
				flex: 1;
				border-inline-start: 12px rgb(255, 255, 255) double;
				text-align: start;
				color: black;

				&.active {
					background-color: white;
				}

				.title {
					font-size: 0.9rem;
					text-transform: uppercase;
					text-align: center;
				}

				.author-date {
					font-size: 0.6rem;
					text-decoration: none;
					font-family: var(--monospace-font);
					text-align: center;
					font-weight: 100;
				}


				a {
					padding-inline: 1.2rem;
					padding-block: 1.5rem;
					scale: 110%;
					white-space: nowrap;
				}

				&.active {
					border-block-end: 0;
					background-color: white;

				}
			}
		}

		#menu-toggle-button:checked+.menu {
			height: auto;
		}
	}

	header {
		padding-inline-end: 33rem;

		h1 {
			font-size: 5rem;
			text-align: start;
			padding-inline-start: 0rem;
			font-weight: 600;
			letter-spacing: -0.1rem;
			font-weight: 700;
		}

		.author-date {
			font-size: 1rem;
			margin-inline-start: 0rem;
		}

		p {
			font-size: 0.9rem;
			padding-block: 0rem;
			padding-inline: 2rem;
		}
	}

	main {
		position: relative;
		align-items: start;
	}

	main::before {
		content: "";
		position: fixed;
		top: 3rem;
		left: 0;
		width: 35vw;
		height: 100vh;
		background-color: rgb(255, 255, 255);
		z-index: -1;
	}


	h2 {
		font-family: var(--monospace-font);
		font-size: 2rem;
		text-transform: uppercase;
		padding-inline-start: 1rem;
		position: sticky;
		top: 0;
		padding-block: 3rem;
		width: 100%;
		height: 50px;
		z-index: 30;
		letter-spacing: 0.08em;
		color: rgb(0, 0, 0);
		padding-inline-start: 1rem;

	}

	p,
	blockquote,
	.footnotes {
		margin-inline-start: 1rem;
		margin-inline-end: 3rem;
		max-width: 60rem;
		column-count: 1;
		column-gap: 0;
	}

	blockquote {
		font-size: 1.5rem;
	}

	.footnotes {
		font-family: var(--monospace-font);
		padding-inline: 3rem;

		&>* {
			font-size: 100%;
			margin-block-end: 0.25rem;
		}

		&>*+* {
			margin-block-start: 0rem;
		}
	}

	p {
		font-size: 1.3rem;
	}

	footer {

		footer-title {
			padding-inline-start: 0rem;
		}


		p {
			padding-inline: 1rem;
			margin-block-start: 1rem;
			margin-inline: 0;
		}

		svg {
			height: auto;
			width: 100%;
		}
	}
}

@media screen and (min-width: 1400px) {
	html {
		font-size: 24px;
	}

	nav {
		.menu {
			li {
				height: 3rem;

				a {
					padding-inline: 1.2rem;
					padding-block: 0.5rem;
				}
			}
		}
	}

	header {

		h1 {
			font-size: 4rem;
			text-align: start;
			padding-inline-start: 0rem;
			font-weight: 600;
			letter-spacing: -0.1rem;
		}

		.author-date {
			font-size: 0.7rem;
			margin-inline-start: -2rem;
		}

		p {
			font-size: 0.9rem;
			padding-block: 0rem;
			padding-inline: 2rem;
		}
	}

	main {
		position: relative;
		display: grid;
		grid-template-columns: 35vw 1fr;
		align-items: start;
	}


	main::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 35vw;
		height: 100vh;
		z-index: -1;
	}

	h2 {
		grid-column: 1;
		position: sticky;
		top: 1rem;
		max-width: 100%;
		margin-inline-end: -5rem;
		width: 100%;
		padding-inline-start: -3rem;
		font-family: var(--monospace-font);
		font-size: 1.4rem;
		text-transform: uppercase;
		letter-spacing: 0.008em;
		color: black;
		padding-block-end: 50px;
		padding-inline-start: 5px;
	}

	p {
		font-size: 1rem;
	}

	p,
	blockquote,
	.footnotes {
		grid-column: 2;
		margin-inline-start: 3rem;
		margin-inline-end: 3rem;
		max-width: 40rem;
		column-count: 1;
		column-gap: 0;
	}

	blockquote {
		font-size: 1.5rem;
	}

	.footnotes {
		font-size: 0.6rem;
		font-family: var(--monospace-font);

		&>* {
			font-size: 100%;
			margin-block-end: 0.25rem;
		}

		&>*+* {
			margin-block-start: 0rem;
		}
	}

	footer {
		p {
			margin-inline-start: 0rem;
		}

		.footer-title {
			padding-inline-start: 1rem;
		}

		.footer-text {
			padding-inline-start: 0rem;
		}
	}
}