@view-transition {
	navigation: auto;
}

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

	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		-webkit-font-smoothing: antialiased;
  		-moz-osx-font-smoothing: grayscale;
	}

	body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
		margin: 0;
	}

	[role="list"] {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	body {
		min-block-size: 100vh;
		line-height: 1.6;
	}

	h1, h2, h3, button, input, label {
		line-height: 1.1;
	}

	h1, h2, h3, h4 {
		text-wrap: balance;
	}

	p, li {
		text-wrap: pretty;
	}

	img, picture {
		max-inline-size: 100%;
		display: block;
	}

	input, button, textarea, select {
		font: inherit;
	}
}

@layer base {
	:root {
		--clr-white: #ffffff;
		--clr-black: #000000;
		--clr-grey: #ceccbc;
		--clr-dark-grey: #282828;
		--clr-red: #e30617;
		--clr-dark-red: #aa1916;

		--text: var(--clr-black);
		--base: var(--clr-white);
		--footer-text: var(--clr-white);
		--footer-base: var(--clr-dark-red);
	
		--ff-body: "HCo Gotham Narrow SSm", sans-serif;
		--ff-heading: "HCo Gotham SSm", sans-serif;
	
		--fs-300: 0.875rem;
		--fs-400: 1rem;
		--fs-500: 1.125rem;
		--fs-600: 1.25rem;
		--fs-700: 1.5rem;
		--fs-800: 2rem;
		--fs-900: 3.75rem;
	
		--flow-spacer: 3.75rem;
	}

	@media (prefers-color-scheme: light) {
		label[for=light] {
			display: none;
		}
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--base: var(--clr-black);
			--text: var(--clr-white);
			--footer-base: var(--clr-red);
			--footer-text: var(--clr-black);
		}

		label[for=dark] {
			display: none;
		}
	}

	:root:has(#light:checked) {
  		color-scheme: light;
  		--base: var(--clr-white);
  		--text: var(--clr-black);
		--footer-base: var(--clr-dark-red);
		--footer-text: var(--clr-grey);

		label[for=light] {
			display: none;
		}

		label[for=dark] {
			display: inline;
		}
	}

	html {
  		color-scheme: dark light;
	}

	body {
		color: var(--text);
		font-family: var(--ff-body);
		font-weight: 400;
		font-size: 1.5rem;
		background-color: var(--base);
		transition: background 1s ease, color 1s ease;
		/* background-image: url("/ink.svg");
		background-repeat: no-repeat;
		background-size: 35%;
		background-position: bottom -50px right; */
		display: flex;
		flex-direction: column;

		@media (width > 800px) {
			overflow: hidden;
		}
	}

	
}

@layer layout {
	.wrapper {
		--wrapper-max-width: 800px;
		max-width: min(100% - 4rem, var(--wrapper-max-width));
		margin-inline: auto;
		box-sizing: content-box;

		@media (width > 800px) {
			margin-inline: 0;
		}
	}

	nav {
		padding: 2rem;

		label[for=light] svg:hover {
			transform-origin: center;
			animation: spin 2s linear infinite;
			cursor: pointer;
			color: orange;
			transition: all 0.5s ease-in-out;
		}

		label[for=dark] svg:hover {
			transform-origin: center;
			animation: spin 2s linear infinite;
			cursor: pointer;
			color: darkslateblue;
			transition: all 0.5s ease-in-out;
		}
	}

	main {
		flex: 1;

		@media (width > 800px) {
			display: grid;
			gap: 6rem;
			grid-template-columns: 1fr 1fr;
			align-content: center;
		}
	}

	footer {
		background-color: var(--footer-base);
		color: var(--footer-text);
		
		@media (width > 800px) {
			padding-inline: 6rem;
			padding-block: 2rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 2rem;
		}

		.logo {
			width: 60px;
		}

		.social {
			@media (width > 1000px) {
				display: flex;
				gap: 2rem;
			}
		}

		.copyright {
			font-weight: 700;
			text-transform: uppercase;
			font-size: 1.5rem;
		}

		a {
			display: block;
			color: var(--footer-text);
			font-weight: 700;
			text-transform: uppercase;
			margin-block: 0.25rem;
			text-decoration: none;
			position: relative;

			&:hover {
				color: var(--clr-white);
				transition: all 300ms, transform 300ms;
			}
		}

		a::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 0.1em;
			background-color: var(--clr-white);
			opacity: 0;
			transition: opacity 300ms, transform 300ms;
		}

		a:hover::after,
		a:focus::after {
			opacity: 1;
			transform: translate3d(0, 0.2em, 0);
		}
	}

	.wordmark {
		text-align: right;
		display: grid;
		grid-template-areas:
			"logo" 
			"title";
		gap: 1rem;
		justify-items: end;
		justify-content: center;

		@media (width > 800px) {
			align-items: center;
			justify-content: end;
			grid-template-areas: "title logo";
		}
	}

	.bio {
		padding-block: 6rem;
		max-width: 40ch;
	}

	.logo {
		grid-area: logo;
		width: 160px;
		position: relative;

		animation: wave 1s ease-out forwards;
	}

	.title {
		grid-area: title;
	}

	h1 {
		font-size: clamp(4rem, 4vw, 8rem);
		font-family: var(--ff-heading);
		font-weight: 800;
		text-transform: uppercase;
		text-align: right;
		/* letter-spacing: -0.25rem; */
		line-height: 0.9;

		span {
			display: block;
			font-weight: 700;
			font-size: 1.5rem;
			line-height: 1.2;
		}
	}
}

@layer utilities {
	.visually-hidden {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes drop {
		0% {
			bottom: 0px;
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 1;
			bottom: -100vh;
		}
	}

	@keyframes wave {
		0% {
			background-position: 0 160px;
			background-size: 170px 300px;
		}

		100% {
			background-position: 500px -18px;
			background-size: 950px 150px;
		}
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.drops {
		display: none;

		@media (width > 800px) {
			display: block;
			filter: url('#liquid');
			position:absolute;
			left: 70px;
			bottom:10px;
			z-index: 1;
			opacity: 0;
			animation: fade-in .1s linear .4s forwards;
		}
		
	}

	.drop1 , .drop2 {
		width: 20px;
		height: 30px;
		border-radius: 50%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-color: var(--text);
	}

	.drop1 {
		width: 16px;
		height: 16px;
		bottom: 2px;
		border-radius: 0;
}	

	.drop2 {
		animation: drop 1.3s cubic-bezier(1,.19,.66,.12) .5s infinite;
	}
}