@font-face
{
	font-family: myFirstFont;
	src: url(../fonts/Manrope-Regular.ttf);
}

body
{
	--site_green: #227754;
	font-family: myFirstFont;
	background-color: #0f172a;
	color: white;
}

::selection
{
	background: var(--site_green);
	color: white;
	text-shadow: none;
}

::-moz-selection
{
	background: var(--site_green);
	color: white;
	text-shadow: none;
}

a
{
	text-decoration: none;
}

@media (min-width: 1200px)
{
	h1
	{
		font-size: 2.5rem;
	}

	h2
	{
		font-size: 2rem;
	}

	h5
	{
		font-size: 1.25rem;
	}

}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6
{
	margin-top: 0;
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
}

#content
{
	height: 100vh;
	position: relative;
}

.text-darker
{
	color: lightslategray;
}

.navbar
{
	padding: 1.5rem;
}

.section
{
	width: 80%;
	display: none;
	margin-top: 30vh;
}

.nav-sidebar
{
	margin-top: 30vh;
	margin-right: 200px;
	margin-left: 2%;
	width: 10%;
}

#content_section
{
	display: flex;
	justify-content: center;
	flex-direction: row;
}

.main-sections
{
	width: 80%;
}

span.highlight-surname
{
	color: var(--site_green);
}

#first_section
{
	overflow-x: hidden;
}

.tab-active
{
	color: var(--site_green);
}

.navigate
{
	width: 20px;
	text-align: center;
}

.navigate:not(.tab-active)
{
	cursor: pointer;
}

#footer_section
{
	position: absolute;
	bottom: 0px;
	padding: 1.5rem;
}

#footer_section a
{
	color: white;
	margin-left: 5px;
}

@media screen and (max-width:768px)
{
	#content_section
	{
		flex-direction: column;
		align-items: center;
	}

	.nav-sidebar
	{
		margin-top: 60px;
		display: flex;
		margin-right: 0;
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}

	.nav-sidebar p
	{
		margin: 0 10px;
		font-size: 1.2rem;
	}

	.section
	{
		margin-top: 50px;
		width: 100%;
	}
}