:root {
	--primary-background: #731215;
	--intro-background: #111827;
	--border: #a6cfc8;
	--text: #f4e9f5;

	--border-default: 1px solid var(--border);
	--content-max-width: 480px;
	--snow-bg: url("/static/backgrounds/snow.gif");

	--space-sm: 0.5rem;
	--space-md: 0.75rem;
	--space-lg: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--snow-bg: url("/static/backgrounds/snow.png");
	}
}

html,
body {
	margin: 0;
}

body {
	background-image: url("/static/backgrounds/bg.png");
	background-repeat: repeat;
}

picture.perspective-flip {
	transition: transform 0.6s ease;

	&:hover {
		transform: rotateY(180deg);
	}
}

img {
	max-width: 100%;
	height: auto;
}

.content-image {
	max-width: var(--content-max-width);
	display: block;
}

.page {
	--col-side-min: 100px;
	--col-main-min: 320px;

	display: grid;
	/* grid-template-columns: minmax(160px, 560px) minmax(320px, 800px) minmax(
			160px,
			560px
		); */
	grid-template-columns:
		minmax(var(--col-side-min), 1fr)
		minmax(var(--col-main-min), 3fr)
		minmax(var(--col-side-min), 1fr);
	grid-template-areas: "left main right";
	align-items: start;
	justify-content: center;
	gap: var(--space-lg);

	@media (min-width: 601px) and (max-width: 900px) {
		padding: var(--space-md);
		gap: var(--space-md);
	}

	@media (max-width: 600px) {
		--col-side-min: 64px;
		--col-main-min: 160px;
		padding: var(--space-sm);
		gap: var(--space-sm);
	}
}

main {
	grid-area: main;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	flex-direction: column;

	@media (max-width: 900px) {
		min-height: auto;
	}
}

.side-images {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-lg);

	&:first-of-type {
		grid-area: left;
	}

	&:last-of-type {
		grid-area: right;
	}

	& picture,
	& img {
		display: block;
		width: 100%;
		height: auto;
	}

	@media (min-width: 601px) and (max-width: 900px) {
		padding: var(--space-sm);
		gap: var(--space-md);
	}

	@media (max-width: 600px) {
		padding: 0.25rem;
		gap: var(--space-sm);
	}
}

.intro {
	background-color: var(--intro-background);
	background-image: var(--snow-bg);
	padding: 5rem;
	border: var(--border-default);
	text-align: center;
	max-width: var(--content-max-width);

	/* 
	& h1 {
		margin-top: 0;
		font-size: 2rem;
		color: var(--text);
	} */

	& p {
		color: var(--text);
	}

	@media (min-width: 901px) {
		margin-top: 5rem;
	}

	@media (min-width: 601px) and (max-width: 900px) {
		padding: 2rem;
	}

	@media (max-width: 600px) {
		padding: 1.25rem;
	}
}

.links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
	margin: 0;
	padding: 0;

	& a {
		display: inline-block;
		padding: var(--space-sm) 1.25rem;
		background-color: var(--primary-background);
		color: var(--text);
		text-decoration: none;
		font-weight: bold;
		border: var(--border-default);

		&:hover {
			background-color: #8f171b;
		}
	}
}

.portfolio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	width: 100%;
	max-width: var(--content-max-width);
	margin-top: var(--space-lg);

	& h2 {
		margin: 0;
		color: var(--text);
	}
}

.portfolio-item {
	width: 100%;
	background-color: var(--intro-background);
	background-image:
		linear-gradient(rgba(36, 8, 2, 0.72), rgba(17, 39, 24, 0.72)),
		var(--snow-bg);
	border: var(--border-default);
	padding: var(--space-lg);
	color: var(--text);
	box-sizing: border-box;

	& h3 {
		margin-top: 0;
	}

	& p {
		margin-bottom: var(--space-md);
	}

	& .links {
		justify-content: flex-start;
		padding-top: 2rem;
	}
}

.tech-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	margin: 0 0 var(--space-md) 0;
	padding: 0;
}

.tech-badge {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border: var(--border-default);
	font-size: 0.75rem;
	font-weight: bold;
}

.marquee {
	--s: 88px;
	--d: 10s;
	--gap: 1rem;

	display: flex;
	gap: var(--gap);
	overflow: hidden;
	width: 100%;
	max-width: var(--content-max-width);
	margin-top: var(--space-lg);
	padding: var(--space-md);
	border: var(--border-default);
	background-color: var(--primary-background);

	& .marquee-track {
		display: flex;
		align-items: center;
		gap: var(--gap);
		flex-shrink: 0;
		animation: marquee-scroll var(--d) linear infinite;

		@media (prefers-reduced-motion: reduce) {
			animation: none;
		}

		& img {
			width: var(--s);
			height: 31px;
			flex-shrink: 0;
			image-rendering: pixelated;
		}
	}
}

@keyframes marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.footer {
	background-color: var(--intro-background);
	color: var(--text);
	padding: var(--space-sm) var(--space-md);
	display: flex;
	justify-content: center;
	align-items: center;
}

.visitcounter {
	display: inline-flex;
	align-items: center;

	& img {
		image-rendering: pixelated;
	}
}