:root{
	--rows: 4;
}

@media (max-width: 1500px)  {
	:root{
		--rows: 8;
	}
}

@media (max-width: 700px)  {
	:root{
		--rows: 16;
	}
}

body {
	width: 96%;
	background-color: #202020;
	color: white;
	margin: 2vh 2vw;
	font-family: 'VT323', monospace;
	font-size: 3vh;
}

a,
a:active,
a:visited {
	color: gray;
}

a:hover {
	color: darkgray;
}

#bastard {
	font-style: comic-sans;
}

#bas-img {
	float: right;
	width: 30vw;
}

#greeting {
	font-size: 7vh;
	margin: unset;
	text-align: center;
	width: 100%;
}

#title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#mode {
	background-color: #007bff;
	color: white;
	border: 0.5vh solid #007bff;
	padding: 1vh 0.5vw;
	cursor: pointer;
	border-radius: max(10px, 0.3vw);
}


.projects-grid {
	display: grid;
	grid-template-rows: repeat(var(--rows), auto);
	grid-auto-flow: column;
	gap: 0.2vh max(0.5vw, 30px);
	padding: 1vh;
	align-items: start;
	text-align: center;

}


/* Project Title */
.project-title {
	margin-top: 0;
}

/* Image */
.project-image {
	margin: 10px 0;
}

.project-image img {
	display: inline;
	vertical-align: middle;
	min-width: 150px;
	max-width: 100%;
	height: 16vh;
	overflow: hidden;
	object-fit: cover;
 	border-radius: 1vh;
}

/* Description */
.project-description {
	text-align: center;
}