/* Hand-crafted with love, because really you know that I know that everyone knows how to minify CSS. */
/* For sure these components should be in their own separate files for scalability, but it's just a little site and now you can look at my code without having to clean the syntax up and switch between multiple source maps. */

/* Is an import faster than including in a meta tag? Or functionally the same? */
/* @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap'); */

/* Vars */
:root {
	/* Colors */
	/* It would be cool at some point to use these to make more themes. */
	--page-color-primary: #8488e3;
	--page-color-secondary: #4d53d6;
	--headline-text: #e368da;
	--body-text: #7c7faf;
	--card-background: #f1ebf1;
	--button-background: #000;
	--button-text: #fff;

	/* Font Weights */
	--regular: 400;
	--medium: 500;
	--semibold: 600;
	--bold: 700;
}


/* Base Text Styles */
* {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Geist Mono", serif;
	font-weight: var(--semibold);
	color: var(--headline-text);
	line-height: 1.5;
	text-shadow: 1px 1px 2px #ffffff20;
}

p, ul, ol {
	font-family: "Gelasio", serif;
	font-weight: var(--medium);
	font-size: 2rem;
	line-height: 1.5;
	text-shadow: 1px 1px 2px #00000020;
}

p {
	margin: 0 0 1em;
}

ul, ol {
	margin: 0 0 1.5em;
}


/* Font Sizes */
@media only screen and (max-width: 899px) {
	h1 { font-size: 3.6rem; }
	h2 { font-size: 3.2rem; }
	h3 { font-size: 2.8rem; }
	h4 { font-size: 2.4rem; }
	h5 { font-size: 2rem; }
	h6 { font-size: 1.6rem; }
	p, ul, ol { font-size: 1.6rem; }
}
@media only screen and (min-width: 900px) {
	h1 { font-size: 5.2rem; }
	h2 { font-size: 4.8rem; }
	h3 { font-size: 4rem; }
	h4 { font-size: 3.2rem; }
	h5 { font-size: 2.4rem; }
	h6 { font-size: 1.8rem; }
	p, ul, ol { font-size: 1.8rem; }
}


/* Base Layout Styles */
html {
	margin: 0;
	padding: 0;
	font-size: 10px;
	background: radial-gradient( circle at top right, var(--page-color-primary), var(--page-color-secondary) );
	background-attachment: fixed;
}

body {
	margin: 0;
	padding: 0;
	font-size: 1.8rem;
}

main {
	margin: 0;
	padding: 0 clamp(1.6rem, 6vw, 3.2rem);
}

header {
	margin: 0 0 2em;
	padding: 1.5em clamp(1.6rem, 6vw, 3.2rem) 0;
}
header .title {
	margin: 0 auto;
	text-align: center;
}

footer {
	margin: 0;
	padding: 2em 0.5em 1em;
	text-align: center;
}

footer p {
	margin: 0 auto;
	font-size: 1.6rem;
	font-weight: 500;
}


/* Content Areas */
.cards-container {
	margin: 0 auto;
	max-width: 1000px;
	display: grid;
	align-content: start;
	gap: 5em;
}
.card {
	margin: 0 auto;
	width: 100%;
}
.card:nth-child(odd) .content {
	margin: 0 auto 0 0;
}
.card:nth-child(even) .content {
	margin: 0 0 0 auto;
}
.card .content {
	padding: 3em clamp(1.5em, 6vw, 3em);
	position: relative;
	width: 100%;
	max-width: 600px;
	display: grid;
	gap: 1.5em 0;
	background-color: var(--card-background);
	border-radius: 3em;
}
.card .content:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	border-radius: 3em;
	box-shadow: inset 0px 0px 5px 3px #a1a4e955;
	pointer-events: none;
}
.card .headline {
	margin: 0;
}
.card .body {
	margin: 0;
}
.card .body *:last-child {
	margin: 0;
}
.card .actions {
	margin: 0;
	text-align: center;
}
.card .actions ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	display: inline-grid;
	align-content: start;
	justify-content: center;
	gap: 1em 0;
}
.card .actions li {
	width: 100%;
}
.card .actions a {
	padding: 1em 2em;
	background-color: var(--button-background);
	color: var(--button-text);
	font-weight: var(--bold);
	border-radius: 1.5em;
	text-decoration: underline transparent;
	display: inline-block;
	width: 100%;
	transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-radius 0.8s ease-in-out, text-transform 0.4s ease-in-out;
}
.card .actions a:focus,
.card .actions a:hover {
	background-color: var(--button-text);
	color: var(--button-background);
	border-radius: 3em;
	text-decoration: underline var(--button-background);
	transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-radius 0.8s ease-in-out, text-transform 0.4s ease-in-out;
}


/* Animations */
.card:nth-child(odd):not(.active) .content {
	opacity: 0;
	transform: translateX(-15px) scale(0.75);
	transform-origin: bottom left;
	box-shadow: 0px 0px 0px 0px #00000000;
	transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out, box-shadow 0.75s ease-in-out
}
.card:nth-child(even):not(.active) .content {
	opacity: 0;
	transform: translateX(15px) scale(0.75);
	transform-origin: bottom right;
	box-shadow: 0px 0px 0px 0px #00000000;
	transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out, box-shadow 0.75s ease-in-out
}
.card:nth-child(odd).active .content {
	opacity: 1;
	transform: translateX(0) scale(1);
	transform-origin: bottom left;
	box-shadow: 5px 5px 10px 3px #00000066;
	transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out, box-shadow 0.75s ease-in-out
}
.card:nth-child(even).active .content {
	opacity: 1;
	transform: translateX(0) scale(1);
	transform-origin: bottom right;
	box-shadow: 5px 5px 10px 3px #00000066;
	transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out, box-shadow 0.75s ease-in-out
}