:root {
	font-size: 10px;
}

* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

body {
	height: 100vh;
	
	display: grid;
	
	grid-template-rows: 19fr 1fr;
	
	overflow: hidden;
	
	user-select: none;
}

aside {	
	position: fixed;
	top: 0;
	height: 7.5vh;
	width: 100vw;
	
	display: grid;
	grid-template-columns: 6fr minmax(20em, 4fr) 6fr;
	
	align-items: center;
	text-align: end;
	
	user-select: none;
	
	font-size: min(3.5vh, 3vw);
	font-weight: bold;
	letter-spacing: -.025em;
	
	background-color: rgba(0, 0, 0, 0.9);
	backdrop-filter: saturate(180%) blur(20px);
	
	z-index: 9999;
}

aside > nav.global-navigation {
	grid-column: 2/3;
	
	font-family: Poppins, sans-serif;
}

nav.global-navigation > ul.global-navigation-items {
	display: flex;
	flex-direction: row;
	
	justify-content: space-between;
	
	list-style: none;
}

nav.global-navigation a.global-navigation-link {
	color: #666666;
	
	transition: 0.5s cubic-bezier(0.4, 0, 1, 1);
}

nav.global-navigation a.global-navigation-link:hover {
	color: rgba(177, 177, 177, 1);
	text-decoration: underline;
}

nav.global-navigation a.global-navigation-link.active {
	color: rgba(177, 177, 177, 1);
}

main {
	width: 100vw;
	
	grid-row: 1/2;
	
	display: grid;
	grid-auto-rows: 0.5vh 4.4vh 0.1vh minmax(90.5vh, max-content);
	overflow: hidden;
}

main > div.header-margin-1, main > div.header-margin-3 {
	background: rgba(5, 7, 5, 1);
}

main > div.header-margin-2 {
	background: rgba(255, 255, 255, 1);
}

section.cover {
	max-height: minmax(90vh, auto);
	
	display: grid;
	grid-template-columns: 2.5fr 2.5fr 15fr 2.5fr 2.5fr;
	grid-template-rows: 0.5fr 3fr 1fr auto 10fr;
}

section.cover > h1 {
	grid-column: 2/4;
	grid-row: 3/4;
	
	max-height: 20vh;
	max-width: 20vw;
	
	align-self: end;
	
	font-size: min(5vh, 2.5vw);
	font-family: Poppins, sans-serif;
	color: rgba(0, 0, 0, 1);
}

section.cover > ul.contact-items {
	grid-column: 2/4;
	grid-row: 4/5;
	
	font-size: min(3.5vh, 1.75vw);
	font-family: Poppins, sans-serif;
	box-shadow: 0.1em 0.1em 0.5em #888888;
}

section.cover > ul.contact-items > li.contact-item {
	margin-bottom: 0.25em;
}

section.cover > ul.contact-items > li.contact-item > a, section.cover > ul.contact-items > li.contact-item.whatsapp {
	grid-column: 5/8;
	grid-row: 4/5;
	
	font-size: min(3.5vh, 1.75vw);
	font-family: Poppins, sans-serif;
	color: rgba(0, 0, 0, 1);
	
	display: grid;
	grid-template-columns: 1fr 2.5fr 12.5fr
}

li.contact-item > a > span.fa, li.contact-item.whatsapp > span.fa {
	grid-column: 1/2;
	
	align-self: center;
	justify-self: center;
	
	font-size: min(3.5vh, 1.75vw);
	color: rgba(0, 0, 0, 1);
}

li.contact-item > a > span.contact-description, li.contact-item.whatsapp > span.contact-description {
	grid-column: 2/3;
	
	font-size: min(3.5vh, 1.75vw);
	font-weight: bold;
	font-family: Poppins, sans-serif;
	color: rgba(0, 0, 0, 1);
}

li.contact-item > a > span.contact-value, li.contact-item.whatsapp > span.contact-value {
	grid-column: 3/4;
	
	font-size: min(3.5vh, 1.75vw);
	font-family: Poppins, sans-serif;
	color: rgba(0, 0, 0, 1);
}

main::-webkit-scrollbar {
	width: 3px;
	
	border-left: rgba(177, 177, 177, 1) 1px solid;
	
	background: rgba(172, 172, 172, 0.15); /*dark*/
}

main::-webkit-scrollbar:hover {
	background: rgba(172, 172, 172, 0.8); /*dark*/
}

main::-webkit-scrollbar:hover ~ main::-webkit-scrollbar-thumb {
	background: rgba(7, 5, 7, 0.8); /*darkest*/
}

main::-webkit-scrollbar-thumb {
	width: 3px;
	
	background: rgba(7, 5, 7, 0.15); /*darkest*/
}

main::-webkit-scrollbar-thumb:hover {
	background: rgba(7, 5, 7, 0.8); /*darkest*/
}

footer {
	position: fixed;
	top: 95vh;
	height: 5vh;
	width: 100vw;
	
	display: flex;
	flex-direction: column;
	
	text-align: center;
	justify-content: center;
	
	user-select: none;
	
	background: radial-gradient(rgba(102, 102, 102, .1) 10%, transparent 50%) 0 2px;
	background-color: rgba(7, 5, 7, 1);
	background-size: 3px 3px;
	
	font-size: min(2vh, 3vw);
	
	color: #666666;
}

footer a.footer-link {
	text-align: center;
	text-decoration: none;
	
	color: #666666;
	
	transition: 0.5s cubic-bezier(0.4, 0, 1, 1);
}

footer a.footer-link:hover {
	color: rgba(177, 177, 177, 1);
}