@import url("https://fonts.googleapis.com/css2?family=Aboreto&family=Abril+Fatface&family=Alkatra:wght@400..700&family=Calistoga&family=Cherry+Cream+Soda&family=Diphylleia&family=Kalnia:wght@100..700&family=Klee+One&family=Paprika&family=Qwitcher+Grypen:wght@400;700&family=Shrikhand&family=Sorts+Mill+Goudy:ital@0;1&display=swap");

:root {
	--title-font: "Aboreto", system-ui !important;
	--script-font: "Qwitcher Grypen", cursive !important;
	--heading-font: "Kalnia", system-ui !important;
	--text-font: "Sorts Mill Goudy", serif !important;

	/* --primary-color: #a8b6c9 !important;
    --secondary-color: #eac3b3 !important;
    --dark-color: #0d0100 !important;
    --bright-color: #fffcf1 !important; */

	--accent-color: #fcd757 !important;
	--primary-color: #9e2e44 !important;
	--secondary-color: #f48965 !important;
	--bright-color: #fef0ec !important;
	--dark-color: #100507 !important;

	--rounded-radius: 8px !important;

	--content-gutter: 20vw;
	--hairline-border: 1px solid rgb(from var(--dark-color) r g b / 0.15);
	--photo-shadow: 3px 3px 6px rgb(from var(--dark-color) r g b / 0.25);

	--content-gutter: 15vw;
}

header {
	position: sticky;
	top: 0;
	z-index: 1999;

	height: 7vh;
	background-color: var(--primary-color);

	& h1 {
		font-family: var(--title-font);

		border-radius: 50%;
		aspect-ratio: 1 / 1;
		background-color: var(--bright-color);
	}

	& nav {
		font-size: 1.25vw;
		color: var(--bright-color);
	}

	& > #socials {
		& img {
			width: 4vh;
		}
	}
}

@media (max-width: 1199px) {
	header nav {
		font-size: initial;
	}
}

main {
	margin: 1.5vh var(--content-gutter);

	& > h2 {
		margin-top: 5vh;
		margin-bottom: 2vh;
	}

	& > p {
		margin-bottom: 1rem;
	}

	& > [data-barbs~="row"] > *:not(:last-child) {
		margin-right: var(--gap-large);
	}

	& > [data-barbs~="row"] > *:not(:first-child) {
		margin-left: var(--gap-large);
	}
}

footer {
	color: var(--bright-color);
	background-color: var(--dark-color);
}

a {
	color: var(--accent-color);
}

.signature {
	font-family: var(--script-font);
	font-weight: 400;
	font-style: italic;
	font-size: 2.5em;
}