/* ----------------------------------------------------------------------
-- generic HTML -------------------------------------------------------
*/

:root {
	--darkgreen: #09792f; 
	--medgreen: #3aae6a;
	--lightgreen: #6ce6a7;
}

* {
	box-sizing: border-box;
		-webkit-box-sizing: border-box;	/* Chrome/Safari */
		-moz-box-sizing: border-box; /* Firefox */
}

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

body {
	font-family: helvetica;
	margin: 0;
}

/*-----------------------------------------------------------
-- HEADER -------------------------------------------------
*/

#header {
	background: var(--darkgreen-rgb);
	background: linear-gradient(180deg, rgba(9,121,47,1) 0%, rgba(58,174,106,1) 50%, rgba(108,230,167,1) 100%);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
}

.title {
	color: #ffffff;
	font-size: 65px;
	font-weight: bold;
	margin-top: 50px;
	text-align: center;
}

.subtitle {
	color: #ffffff;
	font-size: 28px;
	font-weight: 100;
	margin-bottom: 10px;
	text-align: center;
	text-transform: lowercase;
}

.navbar {
	color: #000000;
	margin: 20px 0px;
	text-align: center;
	text-transform: lowercase;
}

.navbar > *, 
.navbar > *:hover {
	transition: 0.3s all ease-in-out 0s;
		-webkit-transition: 0.3s all ease-in-out 0s; /* Chrome/Safari */
		-moz-transition: 0.3s all ease-in-out 0s; /* Firefox */
		-o-transition: 0.3s all ease-in-out 0s; /* Opera */
}

.navbar > a {
	border: var(--medgreen);
	border-style: solid; 
	border-width: 0px 0px 2px 0px;
	margin: 10px;
	padding: 5px 20px;
}

.navbar > #nav-select {
	border-color: var(--darkgreen);
	border-width: 0px 0px 8px 0px;
}

.navbar > a:hover {
	border-width: 0px 0px 8px 0px;
}

#nav-select:hover {
	border-width: 4px 0px 8px 0px;
}

/*------------------------------------------------------------
-- CONTENT -------------------------------------------------
*/

i.fab, i.fas {
	padding: 10px;
	text-align: center;
}

i.dark-green { color: var(--darkgreen); }
i.medium-green { color: var(--medgreen); }
i.light-green { color: var(--lightgreen); }

i.fab:hover,
i.fas:hover { 
	color: var(--darkgreen); 
}

.rows {
	display: flex;
	flex-direction: row;
	padding: 20px 0px;
}

.columns {
	display: flex;
	flex-direction: column;
	min-width: 200px;
	text-align: center;
}

.content {
	display: grid;
	grid-template-columns: 1fr minmax(300px, 900px) 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.content > * {
	grid-column: 2 / 3;
	margin: 20px 0px;
	justify-content: center;
}

#contact {
	display: grid;
	grid-template-columns: repeat(3, 200px);
	grid-column-gap: 10px;

	font-weight: bold;
}

#about {
	display: grid;
	grid-template-columns: repeat(3, 300px);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	grid-auto-flow: row;
}

.card {
	border: 4px solid rgba(108,230,167,0.3);
	padding: 10px 15px;
}

.card-title {
	color: var(--darkgreen);
	font-size: 28px;
	font-weight: bold;
	padding-left: 10px;
}

@media all and (max-width: 940px) {
	#about {
		grid-template-columns: repeat(2, 300px);
	}
}

@media all and (max-width: 630px) {
	#about {
		grid-template-columns: 300px;
	}
}

@media all and (max-width: 440px) {
	#header {
		position: static;
		top: auto;
	}

	.navbar {
		display: flex;
		flex-direction: column;
	}

	.navbar > a {
		border-width: 0px;
		margin: 10px;
		padding: 5px 20px;
	}

	.navbar > #nav-select {
		background-color: var(--darkgreen);
		border-width: 0px;
	}

	.navbar > a:hover {
		background-color: var(--medgreen);
		border-width: 0px;
	}

	#nav-select:hover {
		border-width: 0px;
	}
}