html {
	--font-regular: Quicksand, ui-rounded, 'Hiragino Maru Gothic ProN', Arial, Quicksand, Comfortaa, Manjari, Calibri, source-sans-pro, sans-serif;
	--font-header: var(--font-regular);
	--font-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	font-size: 16px;
	line-height: 1.5;
}
body {
	background: linear-gradient(to right, #0006, transparent, #0006), url(../media/snowfall_gradient.png);
	display: flex;
	flex-flow: column;
	color: white;
}
main {
	display: flex;
	flex-flow: column;
	align-self: center;
	align-items: center;
	font-family: var(--font-regular);
	border-radius: 5px;
	background-color: rgba(37, 26, 58, 0.378);
	font-size: 24px;
	width: 1000px;
	padding: 15px;
	> p {
		padding: 5px;
	}
}
@media (max-width: 1250px) {
	main {
		width: 80%;
	}
}
.banner {
	font-family: var(--font-header);
	display: flex;
	flex-flow: column;
	align-self: center;
	font-size: 24pt;
	height: 210px;
	margin: 0px;
	align-items: center;
	> a {
		color: white;
		text-decoration: none;
		> h1 {
			margin-bottom: 0;
		}
	}
	> p {
		margin-top: 0;
	}
	> h2 {
		margin-top: 0;
		font-size: 24pt;
	}
}
.other-pages {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	width: 310px;
	> a {
		border: solid rgb(33, 156, 204) 2px;
		border-radius: 10px;

		padding: 6px;
		padding-left: 12px;
		padding-right: 12px;

		color: white;
		font-size: 36px;
		text-decoration: none;

		background-color: rgb(58, 54, 161);
		transition: background 0.1s ease;

		&:hover {
			background-color: rgb(38, 35, 105);
		}
	}
}
.socials {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	width: 350px;
	> a {
		background-color: rgba(18, 14, 120, 0);
		width: 56px;
		height: 56px;
		> img {
			width: 56px;
			height: 56px;	
			border-radius: 15px;
			border: solid 2px rgb(33, 156, 204);
			transition: filter 0.1s ease;
			&:hover {
				filter: brightness(0.80);
			}
		}
	}
}
hr {
	color: white;
	width: 80%;
}
.project {
	display: flex;
	flex-flow: row;
	&.reverse {
		flex-flow: row-reverse;
		> div > h2, p {
			text-align: right;
		}
	}
	align-self: flex-start;
	align-items: center;
	margin-left: 30px;
	margin-right: 55px;
	margin-top: 15px;
	margin-bottom: 15px;
	> div {
		display: flex;
		flex-flow: column;
		padding-left: 25px;
		> h2 {
			font-size: 24pt;
			margin: 0;
			padding: 0;
		}
		> p {
			font-size: 16pt;
			margin: 0;
			padding: 0;
		}
		> a {
			background-color: rgba(18, 14, 120, 0);
			width: 128px;
			height: 128px;
			> img {
				background-color: black;
				width: 128px;
				height: 128px;	
				border-radius: 30px;
				border: solid 2px white;
				transition: filter 0.1s ease;
				&:hover {
					filter: brightness(0.80);
				}
			}
		}
	}
}