@import url(style.css);

:root {
	--max-width: 900px;
	--width: 95vw;
}

body {
	background-color: var(--comp1);
	background-image: url(/_files/assets/bg-pattern-transp.webp);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	color: var(--comp3);
}

header,
main,
footer {
	margin: 15px auto;
	width: var(--width);
}

header {
	max-width: var(--max-width);
	display: flex;
	justify-content: space-evenly;
	align-content: center;
	padding: 10px;
	img {
		display: block;
		max-height: 80px;
	}
	section {
		text-align: center;
		padding: 10px;
		width: 80%;
	}
}

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	article {
		color: var(--main);
		margin: 20px;
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 30%;
		height: fit-content;
		min-width: 400px;
		max-width: 500px;
		img {
			display: block;
			margin: auto;
			width: 90%;
		}
		caption-div {
			background: var(--comp3);
			padding: 10px;
			display: block;
			width: 90%;
			max-height: 100%;
			width: 90%;
			margin: auto;
		}
	}
}

button {
	background: var(--primary1);
	color: var(--comp3);
	&:hover,
	&:focus {
		color: var(--primary1);
		background: var(--comp3);
	}
}

footer {
	background-color: var(--comp3);
	padding: 10px;
	color: var(--accent1);
	text-align: center;
	a {
		color: var(--primary1);
	}
}