/* =Root variables
-------------------------------------------------------------- */
:root {
	/*
	ORIGINAL
	--primary-color-base: #e92239;
	--primary-color-highlight: #fb2d45;
	--primary-color-shadow: #a51d24;
	--primary-color-top: #d22132;
	*/

	/*
	LIGHTER
	*/
	--primary-color-base: #fc364d;
	--primary-color-highlight: #fd4a61;
	--primary-color-shadow: #b8273a;
	--primary-color-top: #e9303f;

	/*
	MUCH LIGHTER
	--primary-color-base: #ff6375;
	--primary-color-highlight: #ff7689;
	--primary-color-shadow: #bf4a58;
	--primary-color-top: #e6596a;
	*/

	--wrapper-width: 1000px;
	--mobile-wrapper-width: 90%;
	--white: #fff;
	--black: #000;
	--colored-background: radial-gradient(circle at center 150%, var(--primary-color-shadow) 0%, var(--primary-color-base) 110%, rgba(0,0,0,0.2) 100%);
	--icon-glow: drop-shadow(0 0 8px rgba(0,0,0,0.2)) drop-shadow(0 0 16px rgba(0,0,0,0.2)) drop-shadow(0 0 24px rgba(0,0,0,0.2));
	--button-glow: drop-shadow(0 0 8px rgba(0,0,0,0.1)) drop-shadow(0 0 16px rgba(0,0,0,0.1)) drop-shadow(0 0 24px rgba(0,0,0,0.1));
	--image-glow: drop-shadow(0 0 2px rgba(0,0,0,0.1)) drop-shadow(0 0 4px rgba(0,0,0,0.1)) drop-shadow(0 0 6px rgba(0,0,0,0.1));
}

/* =Fonts
-------------------------------------------------------------- */
@font-face {
	font-family: 'Archivo';
	font-weight: 100;
	font-style: normal;
	font-display: swap;
	src: url('fonts/Archivo-Thin.woff2') format('woff2'),
			 url('fonts/Archivo-Thin.ttf') format('truetype');
}

@font-face {
	font-family: 'Archivo';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('fonts/Archivo-Regular.woff2') format('woff2'),
			 url('fonts/Archivo-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Archivo';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('fonts/Archivo-SemiBold.woff2') format('woff2'),
			 url('fonts/Archivo-SemiBold.ttf') format('truetype');
}

@font-face {
	font-family: 'Archivo';
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	src: url('fonts/Archivo-ExtraBold.woff2') format('woff2'),
			 url('fonts/Archivo-ExtraBold.ttf') format('truetype');
}

/* =General
-------------------------------------------------------------- */
body {
	margin: 0;
	padding: 0;
	font-family: Archivo, sans-serif;
	min-height: 100vh;
	word-wrap: break-word;
}

.wrapper {
	width: 100%;
	max-width: var(--wrapper-width);
	margin: 0 auto;
}

/* =Header
-------------------------------------------------------------- */
header {
	display: flex;

	.wrapper {
		background: url(images/me.webp) no-repeat bottom right/45% auto;
	}

	h1 {
		width: 70%;
		display: block;
		position: relative;
		color: var(--white);
		font-size: 6rem;
		line-height: 6rem;
		font-weight: 800;
		margin: 6rem 0 0;
		text-shadow: 0 0.1rem 0.6rem rgba(0,0,0,0.3);
	}

	p {
		width: 60%;
		margin: 6rem 0 2rem;
		font-size: 2rem;
		line-height: 3rem;
		font-weight: 100;
		color: var(--white);
		text-shadow: 0 0.05rem 0.3rem rgba(0,0,0,0.3);
	}

	.button {
		margin-bottom: 6rem;
	}
}

/* =Main Menu
-------------------------------------------------------------- */
@keyframes menuBackgroundTransition {
	0% {
	background: transparent;
	}
	15% {
	background: var(--primary-color-top);
	}
	100% {
	background: var(--primary-color-base);
	}
}

#primary-menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 4.5rem;
	background: transparent;
	transition: box-shadow 2s;
	align-items: center;

	.wrapper {
		display: flex;
		justify-content: space-between;		
	}

	.title {
		opacity: 0;
		margin: 0.75rem 0 0;
		padding: 0;
		font-size: 2rem;
		color: var(--white);
		font-weight: 800;
		line-height: 2rem;
		text-shadow: 0 0.05rem 0.3rem rgba(0,0,0,0.3);

		small {
			display: block;
			font-size: 0.7rem;
			line-height: 0.9rem;
			font-weight: 100;
			text-transform: uppercase;
			letter-spacing: 0.37rem;
		}
	}

	ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;
	}

	li {
		color: var(--white);
		font-size: 0.9rem;
		font-weight: 400;
		text-transform: uppercase;
		text-shadow: 0 0.05rem 0.3rem rgba(0,0,0,0.3);
		height: 4.5rem;

		&:has(> ul) {
			position: relative;
		}

		&.search,
		&:has(> ul),
		a {
			display: block;
			padding: 0 1rem;
			height: 4.5rem;
			line-height: 4.5rem;
			color: var(--white);
			text-decoration: none;
		}

		&:focus-within,
		&:hover {
			background: var(--primary-color-highlight);
			cursor: pointer;

			ul {
				left: 0;
			}

			form {
				left: 0;
			}
		}

		ul {
			display: block;
			position: absolute;
			left: -999em;
			background: rgba(0,0,0,0.6);
			width: 200px;
			box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.2);

			li,
			li a {
				width: 100%;
				height: auto;
				line-height: auto;
			}
		}

		form {
			position: absolute;
			left: -999em;
			background: var(--white);
			width: 90%;
			padding: 5%;
		}
	}

	.scrolled & {
		animation: menuBackgroundTransition 2s forwards;
		box-shadow: 0 0 1rem rgba(0,0,0,0.2);

		.title {
			opacity: 1;
		}
	}
}

/* =Content sections
-------------------------------------------------------------- */
section {
	width: 100%;
	padding: 6rem 0;
	gap: 6rem;

	&.primary {
		article {
			display: grid;
			grid-template-columns: 50% 1fr;
			grid-template-rows: auto 1fr;
			row-gap: 2rem;
			column-gap: 4rem;
			flex: 1 1 var(--wrapper-width);
			min-width: 0;
			max-width: var(--wrapper-width);
			position: relative;
			margin: 0 0 6rem;

			h2 {
				font-size: 3rem;
				grid-column: 1;
				grid-row: 1;
			}

			img {
				grid-column: 2;
				grid-row: 1 / -1;
			}

			p {
				grid-column: 1;
				grid-row: 2;
				align-self: start;
			}

			&:nth-child(even) {
					grid-template-columns: 1fr 50%;

					h2 {
							grid-column: 2;
					}

					img {
							grid-column: 1;
					}

					p {
							grid-column: 2;
					}
			}
		}
	}

	img {
		display: block;
		width: 100%;
		height: auto;
		grid-row: 1 / 3;
		filter: var(--image-glow);
	}

	h2 {
		grid-column: 2;
		grid-row: 1;
	}

	p {
		grid-column: 2;
		grid-row: 2;
	}

	.button {
		display: block;
		width: fit-content;
		margin: 0 auto;
	}
}

/* =Pagination
-------------------------------------------------------------- */
.pagination {
	grid-column: span 3;

	ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		justify-content: center;
	}

	li {
	}

	span,
	a {
		display: block;
		background: var(--white);
		margin: 1rem;
		padding: 0.5rem 1rem;
		border-radius: 2rem;
		font-size: 1.3rem;
		color: var(--black)
	}

	a {
		text-decoration: none;
		color: var(--primary-color-base);

		&:hover {
			text-decoration: none;
		}
	}
}

/* =Contact
-------------------------------------------------------------- */
.contact {

	.wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr;
		width: 100%;
		max-width: var(--wrapper-width);
		margin: 0 auto;
	}

	h2 {
		grid-column: 1;
		grid-row: 1;
		padding: 3rem 0;
		font-size: 5rem;
	}

	p {
		grid-column: 1; /* P in the first column, second row */
		grid-row: 2;
		align-self: start;
		margin-top: 3rem;
		font-size: 1.3rem;
	}

	form {
		grid-column: 2;
		grid-row: span 2;
		width: 100%;
		box-sizing: border-box;
	}
}

/* =Post listings
-------------------------------------------------------------- */
.featured {

	.wrapper {
		display: grid;
		grid-template-columns: 1fr 40%;
		gap: 2rem;
		align-items: start;
		grid-template-rows: auto auto auto;

		h2 {
			grid-column: 1;
			grid-row: 1;
		}

		p:first-of-type {
			grid-column: 1;
			grid-row: 2;
			margin-bottom: 1rem;
		}

		p:last-of-type {
			grid-column: 1;
			grid-row: 3;
		}

		img {
			grid-column: 2;
			grid-row: 1 / -1;
			margin-top: 0.6rem;
			filter: var(--image-glow);
		}
	}
}

/* =Quote
-------------------------------------------------------------- */
.quote {
	padding-top: 2rem;

	h2 {
		font-size: 1.5rem;
		line-height: 2rem;
		font-weight: 100;
		text-align: center;
		opacity: 0.4;
		margin-bottom: 4rem;
	}

	blockquote {
		p {
			font-size: 4rem;
			line-height: 5rem;
		}

		cite {
			opacity: 0.4;
			font-size: 2.5rem;
			font-style: italic;

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

			&::before {
				content: "– ";
			}
		}
	}
}

/* =Post listings
-------------------------------------------------------------- */
article {
	transition: all 0.3s ease;

	&:focus-within,
	&:hover {
		transform: scale(1.05);
	}

	a {
		display: block;
		color: var(--black);
		text-decoration: none;

		&:hover {
			text-decoration: none;
		}

		&:after {
			bottom: 0;
			content: "";
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
}

/* =General elements
-------------------------------------------------------------- */

a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

h1,
h2,
h3 {
	width: 100%;
	max-width: var(--wrapper-width);
	margin: 0 auto;
	padding: 0;
	color: var(--black);
	font-weight: 800;
	font-family: Archivo, sans-serif;
}

h1 {
	line-height: 6rem;
	font-size: 6rem;
}

h2 {
	font-size: 4rem;
}

h3 {
	font-size: 2.5rem;
}

p {
	margin: 0rem 0 2rem;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 2rem;
	color: var(--black);
	font-family: Archivo, sans-serif;
}

textarea {
	min-height: 6rem;
	color: #333;
}

input,
textarea {
	border: 1px solid #ccc;
	padding: 1rem;
	font-family: Archivo, sans-serif;
	font-weight: 100;
	font-size: 1.2rem;
	color: #333;
	box-shadow: 0 0 1rem rgba(0,0,0,0.05);
}

input {
	padding: 1rem;
	width: 50%;
}

textarea {
	width: 90%;
	min-height: 6rem;
}

input[type=submit],
.button {
	display: inline-block;
	background: var(--primary-color-base);
	margin: 1rem 0 0;
	padding: 1rem 4rem;
	color: var(--white);
	border-bottom: var(--primary-color-shadow);
	text-decoration: none;
	transition: 0.25s;
	font-weight: 600;
	font-size: 1.2rem;
	filter: var(--image-glow);
	border-radius: 1rem;

	&[type=submit] {
		font-weight: 400;
		width: auto;

		&:hover {
			cursor: pointer;
		}
	}

	&:focus-within,
	&:hover {
		transform: scale(1.05);
		background: var(--primary-color-highlight);
		text-decoration: none;
		filter: var(--button-glow);
	}
}

.neutral {
	background: #f4f4f4;
	background: radial-gradient(circle, #ddd 0%, var(--white) 53%, rgba(0,0,0,0.2) 100%);
}

.accent {
	background: var(--colored-background);

	h1,
	h2,
	h3,
	p {
		color: var(--white);

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

	.button {
		background: var(--white);
		color: var(--black);

		&:focus-within,
		&:hover {
			background: var(--white);
		}
	}
}

/* =Footer
-------------------------------------------------------------- */
footer {
	width: 100%;
	display: flex;
	padding: 3rem 0 1rem;
	text-align: center;

	h3 {
		margin-bottom: 0;
	}

	p {
		opacity: 0.7;
	}

	ul {
		display: flex;
		list-style: none;
		gap: 2rem;
		justify-content: center;
		margin: 3rem 0;
		padding: 0;

		a {
			display: block;
			font-size: 0;
			transition: all 0.3s ease;

			&:focus-within,
			&:hover {
				filter: var(--icon-glow);
				transform: scale(1.5);
			}

			&::before {
				display: block;
			}

			&[href*="twitter.com"]::before {
				content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='birdMask'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cg transform='translate(50,50) scale(0.75) translate(-50,-50)'%3E%3Cpath d='M78 32c-2.5 1.1-5.2 1.9-8 2.2 2.9-1.7 5.1-4.4 6.1-7.6-2.7 1.6-5.7 2.8-8.9 3.4-2.6-2.7-6.2-4.4-10.2-4.4-7.7 0-14 6.3-14 14 0 1.1.1 2.2.3 3.2-11.6-.6-21.9-6.1-28.8-14.5-1.2 2.1-1.9 4.5-1.9 7.1 0 4.9 2.5 9.2 6.2 11.7-2.3-.1-4.4-.7-6.3-1.7v.2c0 6.8 4.8 12.5 11.2 13.8-1.2.3-2.4.5-3.7.5-.9 0-1.8-.1-2.6-.3 1.8 5.5 6.9 9.5 13 9.6-4.8 3.7-10.8 5.9-17.3 5.9-1.1 0-2.2-.1-3.3-.2 6.1 3.9 13.3 6.2 21.1 6.2 25.3 0 39.1-21 39.1-39.1 0-.6 0-1.2 0-1.8 2.7-1.9 5-4.3 6.8-7z' fill='black'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='white' mask='url(%23birdMask)'/%3E%3C/svg%3E");
			}

			&[href*="youtube.com"]::before {
				margin-top: 6px;
				content: url("data:image/svg+xml,%3Csvg width='40' height='28' viewBox='0 0 40 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M39.2 7.8c-.5-1.7-1.8-3-3.6-3.4C32.7 4 20 4 20 4s-12.7 0-15.6.4c-1.8.4-3.1 1.7-3.6 3.4C.4 10.4.4 16.1.4 16.1s0 5.7.4 8.3c.5 1.7 1.8 3 3.6 3.4C7.3 28.2 20 28.2 20 28.2s12.7 0 15.6-.4c1.8-.4 3.1-1.7 3.6-3.4.4-2.6.4-8.3.4-8.3s0-5.7-.4-8.3z M16 22.4V11.6l10.4 5.4L16 22.4z' fill='white'/%3E%3C/svg%3E");
			}

			&[href*="facebook.com"]::before {
				content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='fb-mask'%3E%3Ccircle cx='50' cy='50' r='50' fill='white'/%3E%3Cpath d='M60 25H48c-6.6 0-12 5.4-12 12v8h-8v12h8v28h12V57h10l2-12H48v-8c0-1.1 0.9-2 2-2h10V25z' fill='black'/%3E%3C/mask%3E%3Ccircle cx='50' cy='50' r='50' fill='white' mask='url(%23fb-mask)'/%3E%3C/svg%3E"); 
			}

			&[href*="gravatar.com"]::before {
				content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8001 4.69937V10.6494C10.8001 11.1001 10.9791 11.5323 11.2978 11.851C11.6165 12.1697 12.0487 12.3487 12.4994 12.3487C12.9501 12.3487 13.3824 12.1697 13.7011 11.851C14.0198 11.5323 14.1988 11.1001 14.1988 10.6494V6.69089C15.2418 7.05861 16.1371 7.75537 16.7496 8.67617C17.3622 9.59698 17.6589 10.6919 17.595 11.796C17.5311 12.9001 17.1101 13.9535 16.3954 14.7975C15.6807 15.6415 14.711 16.2303 13.6325 16.4753C12.5541 16.7202 11.4252 16.608 10.4161 16.1555C9.40691 15.703 8.57217 14.9348 8.03763 13.9667C7.50308 12.9985 7.29769 11.8828 7.45242 10.7877C7.60714 9.69266 8.11359 8.67755 8.89545 7.89537C9.20904 7.57521 9.38364 7.14426 9.38132 6.69611C9.37899 6.24797 9.19994 5.81884 8.88305 5.50195C8.56616 5.18506 8.13704 5.00601 7.68889 5.00369C7.24075 5.00137 6.80979 5.17597 6.48964 5.48956C5.09907 6.8801 4.23369 8.7098 4.04094 10.6669C3.84819 12.624 4.34 14.5873 5.43257 16.2224C6.52515 17.8575 8.15088 19.0632 10.0328 19.634C11.9146 20.2049 13.9362 20.1055 15.753 19.3529C17.5699 18.6003 19.0695 17.241 19.9965 15.5066C20.9234 13.7722 21.2203 11.7701 20.8366 9.84133C20.4528 7.91259 19.4122 6.17658 17.892 4.92911C16.3717 3.68163 14.466 2.99987 12.4994 3C12.0487 3 11.6165 3.17904 11.2978 3.49773C10.9791 3.81643 10.8001 4.24867 10.8001 4.69937Z' fill='white'/%3E%3C/svg%3E");
			}

			&[href*="github.com"]::before {
				content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z' fill='white'/%3E%3C/svg%3E");
			}

			&[href*="linkedin.com"]::before {
				content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z' fill='white'/%3E%3C/svg%3E");
			}

			&[href*="bluesky.com"]::before {
				content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z' fill='white'/%3E%3C/svg%3E");
			}

			&[href*="wordpress.org"]::before {
				content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z' fill='white'/%3E%3C/svg%3E");
			}

			&[href*="instagram.com"]::before {
				content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z' fill='white'/%3E%3C/svg%3E");
			}

			&[href*="bsky.app"]::before {
				content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='blueskyMask'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cg transform='translate(50,50) scale(0.12) translate(-300,-265)'%3E%3Cpath d='m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z' fill='black'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='white' mask='url(%23blueskyMask)'/%3E%3C/svg%3E");
			}
		}
	}

	.legal-crap {
		font-size: 0.9rem;
		margin: 0;
	}
}

/* =Mobile support
-------------------------------------------------------------- */

@media (max-width: 1024px) {
	#primary-menu {
		nav {
			position: fixed;
			top: 0.5rem;
			right: 0.5rem;

			&::before {
				display: block;
				content: "☰";
				color: #fff;
				font-size: 3rem;
			}

			/* First level */
			&:focus-within,
			&:hover {
				ul {
					left: 10%;

					/* Second level */
					ul {
						position: static;
						height: 0;
						display: block;
					}

					li {

						&:focus-within,
						&:hover {
							padding-bottom: 0;

							ul {
								width: 100%;
								height: auto;
								margin-top: 1.7rem;
								margin-left: -1rem;
							}
						}
					}
				}
			}
		}

		ul {
			position: fixed;
			top: 4.5rem;
			left: 100%;
			width: 90%;
			height: calc(100vh - 4.5rem);
			background: var(--colored-background);
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			transition: left 0.3s ease;
			overflow-y: auto;
		}

		li {
			width: 100%;
			height: auto;
			border-bottom: 1px solid rgba(255, 255, 255, 0.5);

			&.search,
			&:has(> ul),
			a {
				padding: 1rem;
				height: auto;
				line-height: 1.5;
				display: block;
			}
		}
	}

	header {
		height: 100vh;

		.wrapper {
			background: url(images/me.webp) no-repeat bottom center/80% auto;
			width: var(--mobile-wrapper-width);
			padding-right: calc((100% - var(--mobile-wrapper-width)) / 2);
			padding-left: calc((100% - var(--mobile-wrapper-width)) / 2);
		}

		h1,
		p {
			width: 100%;
		}

		p {
			margin-top: 2rem;
			font-size: 2.5rem;
			line-height: 3rem;
		}
	}

	section {
		padding: 3rem 0;

		&.primary {
			article {
				margin-top: 1rem;
				margin-bottom: 2rem;
				grid-template-columns: 1fr;
				gap: 0;
				
				&:nth-child(even) {
					grid-template-columns: 1fr;
					
					h2,
					p {
						grid-column: 1;
					}
				}

				h2,
				p {
					width: var(--mobile-wrapper-width);
					padding-right: calc((100% - var(--mobile-wrapper-width)) / 2);
					padding-left: calc((100% - var(--mobile-wrapper-width)) / 2);
				}
			}
		}

		h1 {
			width: var(--mobile-wrapper-width);
			padding-right: calc((100% - var(--mobile-wrapper-width)) / 2);
			padding-left: calc((100% - var(--mobile-wrapper-width)) / 2);
		}

		img {
			grid-row: 1;
			grid-column: 1;
		}

		h2 {
			grid-column: 1;
			grid-row: 2;
			margin: 1rem 0 0.5rem;
		}

		p {
			grid-column: 1;
			grid-row: 3;
		}

		.button {
			margin-top: 2rem;
		}
	}

	.featured {
		.wrapper {
			display: flex !important;
			flex-direction: column;
			padding-bottom: 0;
			gap: 0;

			h2,
			p {
				width: var(--mobile-wrapper-width);
				padding-right: calc((100% - var(--mobile-wrapper-width)) / 2);
				padding-left: calc((100% - var(--mobile-wrapper-width)) / 2);
			}

			h2 {
				margin-bottom: 1rem;
				order: 1;
			}

			p:first-of-type {
				margin-bottom: 1rem;
				order: 2;
			}
			
			p:last-of-type {
				margin-bottom: 1.5rem;
				order: 3;
			}
			
			.button {
				margin-bottom: 3.5rem;
				order: 4;
			}
			
			img {
				margin-top: 0;
				width: 100%;
				height: auto;
				order: 5;
			}
		}
	}

	.quote {
		blockquote {
			p {
				font-size: 3rem;
				line-height: 4rem;
			}

			cite {
				font-size: 1.8rem;
				line-height: 2rem;
			}
		}
	}

	.contact {
		padding-top: 3rem;

		.wrapper {
			grid-template-columns: 1fr;
			grid-template-rows: auto auto 1fr;
			width: var(--mobile-wrapper-width);
			padding-right: calc((100% - var(--mobile-wrapper-width)) / 2);
			padding-left: calc((100% - var(--mobile-wrapper-width)) / 2);
		}

		h2 {
			font-size: 2.5rem;
			grid-column: 1;
			grid-row: 1;
			padding-top: 0;
			padding-bottom: 0;
		}

		p {
			grid-column: 1;
			grid-row: 2;
			margin-top: 1rem;
			margin-bottom: 1rem;
		}

		form {
			grid-column: 1;
			grid-row: 3;
		}
	}

	h1 {
		line-height: 3rem;
		font-size: 3rem;
	}

	h2 {
		font-size: 2rem;
	}

	h3 {
		font-size: 1.25rem;
	}

	footer {

		ul {
			gap: 0.5rem;

			a {
				&::before {
					width: 30px;
					height: 30px;
					transform: scale(0.75);
				}
			}
		}
	}
}