/**
 * project_menu.css
 * Author: Riley Mann
 * 
 * project menu stylesheet for zeropt.github.io
 * 
 * Created on 30 Apr. 2025
 */

#projects {
	max-width: 80ch;
	/* Flex Container */
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
}

#projects a {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	/* Flex Container */
	display: flex;
	flex-flow: row wrap;
	column-gap: 1rem;
	justify-content: center;
	color: var(--text-color);
}

.spring.dark #projects a {
	color: var(--text-color);
}

#projects .thumbnail {
	min-width: min(20vh, 100%);
	height: max(20vh, 10rem);
	margin: 0.5rem;
	flex: 1;
}

#projects .description {
	min-width: min(32ch, 100%);
	margin: 0.5rem;
	flex: 1;
}

#projects .thumbnail img {
	width: 100%;
	height: 100%;
	border: 4px solid var(--border-color);
	box-sizing: border-box;
	object-fit: cover;
}

.spring #projects .description > h2 {
	color: var(--text-color);
}

.dark.spring #projects .description > h2 {
	color: var(--heading-color);
}

@media (max-width: 800px) { /* Mobile styling */
	#projects .thumbnail, #projects .description {
		margin: 0;
	}
}