* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #000;
	color: #ccc;
	font-family: Helvetica, Arial, sans-serif;
	width: 100vw;
	height: auto;
	overflow-x: clip;
}

.layout,
.title,
.content,
.projects,
.projects > .category {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}

.layout {
	min-height: 100dvh;
	& > .title {
		height: 8rem;
		justify-content: center;
		h1 {
			font-size: min(4rem, 12vw);
		}
	}
}

.content {
	flex: 1;
	padding: 0 max(1rem, 5vw);
}

.projects.section {
	--proj-accent: #ccc;
	& > .title {
		background-color: #222;
	}
	.title {
		padding: 0.5rem;
		border-radius: 1rem 1rem 0 0;
	}
}

.projects.categories {
	padding: 1rem;
	border-radius: 0 0 1rem 1rem;
	border: 0.125rem solid #222;
	& > .category {
		--proj-accent-dark: color-mix(var(--proj-accent), #000 75%);

		border-radius: 1rem;
		& > .items {
			display: flex;
			justify-content: center;
			padding: 1rem;
			border: 0.125rem solid var(--proj-accent-dark);
			width: 100%;
			border-radius: 0 0 1rem 1rem;
			flex-wrap: wrap;
			gap: 1rem;
		}
		& > .title {
			background-color: var(--proj-accent-dark);
			padding: 0.5rem;
		}
	}
}

.category.items > .project {
	width: min(100%, 20rem);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	flex-direction: column;
	/* background-color: #222; */
	padding: 0.5rem;
	border-radius: 1rem;
	border: 0.125rem solid var(--proj-accent);
	box-shadow: inset 0 0 4rem -2rem var(--proj-accent);
	color: var(--proj-accent);
	filter: brightness(0.6);
	img {
		max-width: 50%;
	}
	&:hover {
		cursor: pointer;
		filter: brightness(1);
	}
}