:root {
	--MintGreen: #F1FFFA;
   --BrightGreen: #CCFCCB;
   --MidGreen: #96E6B3;
   --ForestGreen: #568259;
   --DeepGreen: #464E47;
}

body {
	background-color: var(--BrightGreen);
	font-family: 'Google Sans Code', monospace;
	margin: 0;
}

.main-header nav {
	background-color: var(--DeepGreen);
	min-width: 15%;
	height: 100%;
	text-align: center;
	height: fit-content;
	padding: 3vh;

	grid-column: 1;
	grid-row: 1;
}

div.header-gradient {
	width: 100%;
	height: 100%;
	min-height: 50px;
	padding: 0;

	background: #464E47;
	background: linear-gradient(180deg,rgba(70, 78, 71, 1) 0%, rgba(70, 78, 71, 0) 100%);

	grid-column: 1;
	grid-row: 2;
}

.main-header nav input {
	text-decoration: none;
	border: none;
	border-left: solid;
	border-right: solid;
	border-width: .25em;
	border-color: var(--BrightGreen);
	background-color: var(--DeepGreen);
	color: var(--BrightGreen);

	width: 75%;
	height: 12vh;
	margin: 3vh;
	font-size: 4.5vh;
	overflow: hidden;
}

.main-header nav input:hover {
	width: 80%;
	background-color: color-mix(in srgb, var(--DeepGreen), black 20%);
}

.main-header nav input:active {
	width: 70%;
	background-color: color-mix(in srgb, var(--DeepGreen), white 10%);
}

div.header-grid {
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 20%;
}

.main-header h1 {
	background-color: var(--ForestGreen);
	width: 100%;
	text-align: center;
	color: var(--MintGreen);
	font-size: 15vh;
	margin: 0;
	font-family: 'Kadwa', serif;
}

.main-header header {
	width: 100%;
}

article {
	background-color: var(--MintGreen);
	margin: 1%;
	border-radius: 12px;
	font-size: 3.5vh;

	filter: drop-shadow(0px 4px 16px var(--DeepGreen));
}

article p {
	margin: 0;
	padding: 1vh;
	text-align: justify;
}

div.main-header {
	display: flex;
	/* position: absolute; */
	align-items: stretch;
}

div.projects {
	display: grid;
	gap: 2%;
	grid-template-columns: 32% 32% 32%;
}

.projects article {
	padding: 0;
	display: grid;
	grid-template-columns: 35% 57% 8%;
	min-height: 20vh;
	overflow: hidden;
}

.projects article input {
	border: none;
	text-decoration: none;
	background-color: var(--ForestGreen);
	color: var(--BrightGreen);
	font-weight: bold;
	font-size: 3vh;
}

.projects article input:hover {
	font-size: 3.5vh;
	background-color: color-mix(in srgb, var(--ForestGreen), black 30%);
}

.projects article input:active {
	font-size: 2.8vh;
	background-color: color-mix(in srgb, var(--ForestGreen), white 10%);
}

.projects article h2 {
	font-family: 'Kadwa', serif;
	margin: 1vh;
	font-size: 4vh;
	line-height: 4vh;
}

.projects article p {
	font-size: 2vh;
	padding-top: 0;
}

.projects article img {
	object-fit: cover;
	
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 1;
}

div.language-list {
	display: flex;
}

.project-text .language-list p {
	background-color: var(--MidGreen);
	font-size: 2vh;
	border-radius: 4vh;
	padding: 1vh;
	margin: 0 0 1vh 1vh;
}