@font-face
{
	font-family: FjallaOne;
	src: url("/fonts/FjallaOne-Regular.ttf") format("truetype");
}

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

html
{
	--border-radius: 15px;
	--spacing: 20px;

	--primary-color: #406e8e;
	--secondary-color: #23395b;
	--tertiary-color: #161925;
	--text-color: #e9e9e9;

	--muted-text-color: #adadad;

	background: var(--tertiary-color);
}

body
{
	color: var(--text-color);
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5;
	margin: 0;
}

a,
a:visited
{
	color: var(--text-color);
	text-decoration: none;
}

img
{
	display: block;

	max-width: 100%;
}

.component-site
{
	margin: var(--spacing) auto;
	max-width: 1100px;
}

.component-site-header
{
	display: flex;
	justify-content: center;

	padding: var(--spacing);

	background-color: var(--secondary-color);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	> .wrapper
	{
		display: grid;
		align-items: center;
		justify-content: center;
		gap: var(--spacing);
		grid-template-areas:
			"avatar"
			"about";
		grid-template-columns: 1fr;

		> .avatar
		{
			grid-area: avatar;

			width: 250px;
			height: 250px;

			border-radius: 50%;
		}

		> .about
		{
			grid-area: about;

			> .name
			{
				margin: 0;

				font-family: "FjallaOne", Arial, Helvetica, sans-serif;
				font-size: 3rem;
				line-height: 1;
			}

			> .meta
			{
				margin-bottom: 0.5rem;

				color: var(--muted-text-color);
				font-size: 1.25rem;
			}

			> .bullet-points
			{
				margin: 0;
				padding: 0;

				font-size: 1.25rem;
				list-style: none;
			}
		}
	}
}

.component-section
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing);

	padding: var(--spacing);

	background-color: var(--primary-color);

	&:not(:last-child)
	{
		border-bottom: 1px solid var(--secondary-color);
	}

	> h1, h2
	{
		margin: 0;

		font-family: "FjallaOne", Arial, Helvetica, sans-serif;
	}

	> p
	{
		margin: 0;
	}
}

.component-project-card-container
{
	display: grid;
	gap: var(--spacing);
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.component-project-card
{
	display: flex;
	flex-direction: column;

	overflow: hidden;

	background-color: var(--secondary-color);
	border-radius: calc(var(--border-radius) / 2);

	> .thumbnail
	{
		aspect-ratio: 640 / 360;
	}

	> .meta
	{
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) / 2);

		padding: var(--spacing);

		> .header
		{
			> .title
			{
				font-family: "FjallaOne", Arial, Helvetica, sans-serif;
				font-size: 1.5rem;
			}

			> .company
			{
				color: var(--muted-text-color);
				font-family: "FjallaOne", Arial, Helvetica, sans-serif;
				font-size: 0.8rem;
			}
		}

		> .details
		{
			display: flex;
			flex-wrap: wrap;
			gap: 3px;

			color: var(--muted-text-color);
			font-size: 0.9rem;

			> div
			{
				padding: calc(var(--spacing) / 6) calc(var(--spacing) / 3);

				background-color: var(--tertiary-color);
				border-radius: calc(var(--border-radius) / 4);
				font-size: 0.8rem;
			}
		}

		> p
		{
			margin: 0;
		}
	}
}

a.component-project-card
{
	transition: transform 0.25s;
	
	&:hover
	{
		text-decoration: none;
		transform: scale(1.025);
	}
}

.component-site-footer
{
	padding: var(--spacing);
	
	background-color: var(--secondary-color);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	text-align: center;
}

@media (min-width: 770px)
{
	.component-site-header
	{
		> .wrapper
		{
			grid-template-areas: "avatar about";
			grid-template-columns: auto minmax(0, 1fr);

			> .about
			{
				> .bullet-points
				{
					font-size: 1.5rem;
				}
			}
		}
	}
}