html {
	margin: 0;
	scroll-behavior: smooth;
}

:root {
	color-scheme: light;
	--page-width: 52rem;
	--page-width-medium: 65rem;
	--page-width-large: 78rem;
	--corner-radius: 0.8rem;
	--corner-radius-large: 1.2rem;
	--grid-gap: 0.5rem;
	--grid-gap-large: 0.8rem;
	--grid-gap-xlarge: 1.2rem;
}

/* Light mode */
@media (prefers-color-scheme: light) {
	:root {
		--background-color: #f8f8f7;
		--text-color: #37352f;
		--link-color: #0071e3;
		--link-hover-color: #0056b3;
		--link-inactive: #6c757d;
		--accent: #ffffff;
		--border: rgba(55, 53, 47, 0.062);
		--border-dark: rgb(55, 53, 47);
		--icon: #000000;
	}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #191919;
		--text-color: #ffffff;
		--link-color: #2480dd;
		--link-hover-color: #096bd4;
		--link-inactive: #6c757d;
		--accent: #252525;
		--border: rgba(255, 255, 255, 0.062);
		--border-dark: rgba(255, 255, 255, 0.81);
		--icon: #ffffff;
	}
}

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

/* General */
body {
	margin: 0;
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: "Inter", "Helvetica", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5rem;
	-webkit-text-size-adjust: 100%;
}

main {
	max-width: 100%;
	margin: 1rem auto 3rem auto;
	padding: 0 1.5rem;
	display: grid;
	gap: 3rem;

	@media (width >=750px) {
		& {
			margin: 4rem auto 10rem auto;
			padding: 0 3rem;
			gap: 8rem;
		}
	}
}

section {
	padding: 1rem 0rem;
	max-width: var(--page-width);
	margin: 0 auto;
	width: 100%;

	&.section-medium {
		max-width: var(--page-width-medium);
		h2 {
			text-align: left;
		}
		@media (width >=750px) {
			h2 {
				text-align: center;
			}
		}
	}

	&.section-large {
		max-width: var(--page-width-large);
		h2 {
			text-align: left;
		}
		@media (width >=750px) {
			h2 {
				text-align: center;
			}
		}
	}
}

p {
	box-sizing: border-box;
	margin-top: 0rem;
	margin-bottom: 0rem;
	width: 100%;
}

ul {
	padding: 0 1.1rem;
	margin-bottom: 0;
	margin-top: 0;

	li {
		margin-bottom: 0.5rem;
	}
}

.img-4-5 {
	background-color: var(--accent);
	position: relative;
	overflow: hidden;
	display: block;
	padding-top: 125%;
	border-radius: var(--corner-radius);
}

.img-16-9 {
	background-color: var(--accent);
	position: relative;
	overflow: hidden;
	display: block;
	padding-top: 125%;
	border-radius: var(--corner-radius);
	margin-bottom: 0.8rem;

	@media (width >=750px) {
		padding-top: 56.25%;
	}
}

picture img {
	width: 100%;
	height: 100%;
	border-radius: var(--corner-radius);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
}

h1 {
	font-size: 1.8rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0rem;

	.icon {
		width: auto;
		height: 1.8rem;
		padding-bottom: 6px;
	}
}

h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 0rem;
	margin-bottom: 1rem;
}

h3 {
	font-size: 1rem;
	font-weight: 600;
	margin-top: 0rem;
	margin-bottom: 0.2rem;
}

a {
	display: inline-block;
	color: var(--link-color);
	text-decoration: none;
	padding: 0.5rem 0rem;

	&:hover {
		color: var(--link-hover-color);
		text-decoration: underline;
	}

	i {
		font-size: 14px;
		color: var(--link-color);
		margin-right: 0.2rem;
	}
	svg {
		width: 1rem;
		height: 1rem;
		fill: var(--link-color) !important;
		vertical-align: middle;
		padding-bottom: 4px;
	}
}

.date {
	font-weight: normal;
}

/* Grid */
.grid {
	display: grid;
	gap: var(--grid-gap-large);
}

.col-40-auto {
	grid-template-columns: 1fr;
	row-gap: var(--grid-gap);
	align-items: start;

	@media (width >=750px) {
		& {
			grid-template-columns: 35% auto;
		}
	}
}

.col-auto-1 {
	grid-template-columns: auto 1fr;
	align-items: baseline;
}

.col-1 {
	grid-template-columns: 1fr;
	gap: var(--grid-gap);
}

.col-1-1 {
	grid-template-columns: 1fr;
	row-gap: 2rem;

	@media (width >=750px) {
		& {
			grid-template-columns: 1fr 1fr;
			gap: 3rem;
		}

		&.list {
			grid-template-columns: 1fr;
		}
	}
}

.col-4 {
	grid-template-columns: 1fr;

	@media (width >=750px) {
		& {
			grid-template-columns: auto auto auto auto;
			gap: var(--grid-gap-xlarge);
			justify-content: start;
		}
	}
}

.col-3 {
	grid-template-columns: auto auto auto;
	gap: var(--grid-gap-xlarge);
	justify-content: start;
}

.col-2-4 {
	grid-template-columns: 1fr 1fr;
	gap: var(--grid-gap-large);

	@media (width >=750px) {
		& {
			grid-template-columns: 1fr 1fr 1fr 1fr;
			row-gap: var(--grid-gap-xlarge);
		}
	}
}

/* Components */
.profilename {
	font-weight: 700;
}
.callout {
	background-color: var(--accent);
	padding: 1.2rem;
	border-radius: var(--corner-radius);

	i svg {
		width: 1rem;
		height: 1rem;
		vertical-align: middle;
		padding-bottom: 4px;
	}
}

.callout-nopadding {
	padding: 0rem;
	overflow: hidden;

	.animated-icon {
		border-radius: var(--corner-radius-large);
	}

	h3 {
		line-height: normal;
		margin-top: 0.4rem;
		text-align: center;
	}
}

.featured-block {
	width: 100%;

	p {
		padding: 0 0.4rem;

		@media (width >=750px) {
			& {
				padding: 0 1rem;
				text-wrap: balance;
			}
		}
	}

	.title-link {
		display: flex;
		gap: var(--grid-gap);
		padding: 0 0.4rem;

		@media (width >=750px) {
			& {
				padding: 0 1rem;
			}
		}

		a {
			padding: 0;
		}
	}

	.work-inactive {
		color: var(--link-inactive);
	}

}


i {
	font-size: 16px;
	height: 16px;
	width: 16px;
	color: var(--icon);
}

.animated-icon {
	width: 100%;
	aspect-ratio: 16/10;
	background-color: #000;
	display: grid;
	place-items: center;
}
lord-icon {
	width: 70%;
	height: 70%;
}

.icon {
	width: auto;
	height: 0.9rem;
	vertical-align: middle;
	padding-bottom: 4px;
}

.wave {
	animation-name: wave-animation;
	animation-duration: 2.5s;
	animation-iteration-count: 1;
	transform-origin: 70% 70%;
	display: inline-block;
}

@keyframes wave-animation {
	0% {
		transform: rotate(0deg);
	}
	10% {
		transform: rotate(14deg);
	}
	20% {
		transform: rotate(-8deg);
	}
	30% {
		transform: rotate(14deg);
	}
	40% {
		transform: rotate(-4deg);
	}
	50% {
		transform: rotate(10deg);
	}
	60% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(0deg);
	}
}