@charset "UTF-8";

h1, h2 {
	overflow: auto;
	font-weight: normal;
}

h2, div.content > .project-title, .project-header{
	font-size: 1.75rem;
}

.section-header {
	font-size: 1rem;
}

/*

*/
.content > div.project-images{
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 1rem;
	margin-block: 2rem;
	padding-inline: 1rem;
}

.content>div.release-list{
	padding-inline: 1rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	margin-block: 2rem;
}

.content>div.release-list>a.release {
	/* destyle link
	*/
	color: inherit;
	text-decoration: inherit;
	cursor: pointer;
	padding: 1rem;
	font-size: 1.25rem;
	list-style: none;
	background-color: var(--primary-color);
	border: 4px;
	border-radius: 4px;
	border-color: #030121;
	color: white;
}

.content>div.release-list>a.release>p.release-title {
	font-size: 1.5rem;
	text-align: center;
}

.content>div.release-list>a.release>p {
	font-size: 1rem;
}

button.download{
	cursor: pointer;  /* why the hell do i need this? (actually makes it clicker when hovering over)*/
	background-color: var(--primary-color);
	border: 4px;
	border-radius: 4px;
	border-color: #030121;
	color: white;
	font-family: Lexend, Verdana, sans-serif;
	font-size: 1.125rem;
	
	padding: 0.5rem;
}

@media screen and (max-width: 600px) {
	.content>div.release-list {
		grid-template-columns: repeat(1, 1fr);
		
		margin-inline: 1.5rem;
	}
}