@font-face {
	font-family: "JetBrainsMono-Regular";
	src: url("fonts/JetBrainsMono-Regular.woff2");
}

@font-face {
	font-family: "JetBrainsMono-Thin";
	src: url("fonts/JetBrainsMono-Thin.woff2");
}

/***	SCROLLBAR	***/
/* webkit */

::-webkit-scrollbar {
	width: 0.3vw;
}

::-webkit-scrollbar-track {
	background: black;
}

::-webkit-scrollbar-thumb {
	background: gray;
	max-height: 0.1vh;
}

::-webkit-scrollbar-thumb:hover {
	background: lightgray;
}

/* firefox */

* {
	scrollbar-width: thin;
	scrollbar-color: darkgray black;
}


/*** GENERAL	***/

* {
	font-family: JetBrainsMono-Regular;
}

html, body {
	height: 100%;
}

body {
	background-color: black;
	margin: 0;
	display: flex;
	flex-direction: row;
}

img {
	max-width: 100%;
	max-height: 100%;
}

a {
	text-decoration: none;
	color: inherit;
}

button {
	cursor: pointer;
	padding: 0;
	background-color: inherit;
	color: gray;
	border: none;
}

button:hover {
	color: lightgray;
}

button:active  button:target button:focus {
	outline: 0;
}

body > div {
	height: 100%;
	box-sizing: border-box;
	display: flex;
}

p {
	color: gray;
}

.index-column {
	width: 21vw;
	padding: 1vw;
    flex-direction: column;
    overflow-x: hidden;
	margin-right: 1vw;
}

.content-columns {
	width: 80vw;
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
}

.content-column {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.category-column {
	display: none;
}

.content-column div {
	cursor: pointer;
}

.index-projects {
	border-top: 0.15vw solid gray;
	display: flex;
	flex-direction: column;
	height: auto;
	padding: 1vw 0;
	overflow-y: scroll;
}

.index-projects div {
	border: none;
	text-align: left;
	padding: 0.1vw;
	font-size: 0.75vw;
	color: gray;
	cursor: pointer;
}

.index-projects div:hover {
	color: lightgray;
}

.highlighted {
	color: lightgray !important;
}

.index-bottom {
	margin-top: auto;
	color: gray;
	display: flex;
	flex-direction: column;
	border-top: 0.15vw solid gray;
}

.index-bottom a {
	text-align: center;
	font-size: 0.7vw;
}

.home-button {
	width: fit-content;
	margin: 0 auto;
}

.home-button-row {
	display: flex;
}

.home-button-row div {
	font-family: JetBrainsMono-Thin;
	font-size: 2.5vw;
	color: gray;
	margin: auto;
}

.home-button-row:nth-child(2) > div:first-child {
	margin-left: 0;
}

.home-button-row:nth-child(2) > div:last-child {
	margin-right: 0;
}

.index-categories {
	display: flex;
	margin: 0 auto;
}

.index-categories div {
	font-size: 0.75vw;
	padding: 0.5vw;
	color: gray;
	cursor: pointer;
}

.index-categories div:hover {
	color: lightgray;
}

.content-project {
	background-color: lightgray;
	height: 23.5vw;
	width: 23.5vw;
	margin: 1.25vw;
	background-size: 25vw 25vw !important;
	filter: grayscale(100%);
}

.content-project:nth-child(3n) {
	margin: 1.25vw auto;
}

.content-project:hover {
	filter: none;
}