:root{
	--gray-title: #D7DBDD;
	--gray-one: #808B96;
	--gray-full: #2C3E50;
	--gray-bg: #1F3543;
}

@font-face{
	font-family: 'Quicksand';
	src: url('../fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}

@font-face{
	font-family: 'SourceCodePro';
	src: url('../fonts/Source_Code_Pro/SourceCodePro-VariableFont_wght.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	font-family: "Quicksand", sans-serif, serif; 
}

*::-webkit-scrollbar{
	width: 1rem;
	background-color: var(--gray-full);
}

*::-webkit-scrollbar-thumb{
	background-image: linear-gradient(
		to bottom, 
		#000 30%, 
		var(--gray-bg) 60%, 
		var(--gray-full) 75%, 
		var(--gray-one) 85%
	);
	background-repeat: no-repeat;
	border-radius: 10rem;
	box-shadow: 0 0 1rem .1rem rgba(0, 0, 0, 10%);
}

html{
	font-size: 62.5%;
}

body{
	display: block;
	max-width: 100vw;
	max-width: 100vh;
	min-width: 100vw;
	min-height: 100vh;
	overflow-x: hidden;
	font-size: 1.6rem;
	background-color: var(--gray-bg);
}

hr{
	display: block;
	width: 90%;
	margin: 1rem auto;
	border-color: var(--gray-full);
}

main{
	position: absolute;
	transition: 300ms all ease;
	transform: translateX(100%) scale(0);
	opacity: 0;
}

.page-next{
	position: static;
	transform: translateX(0) scale(1);
	opacity: 1;
}

.page{
	padding: 10rem;
}

.text{
	font-weight: lighter;
	font-size: 1.6rem;
	color: var(--gray-one);
	line-height: 2.6rem;
	text-align: justify;
}

.title, .sub-title{
	display: block;
	width: 100%;
	text-align: left;
	font-size: 4rem;
	letter-spacing: 0.1rem;
	font-weight: lighter;
	color: #fff;
	margin-bottom: 1rem;
}

.sub-title{
	color: var(--gray-one);
	font-size: 2.6rem;
}

.btn-close{
	display: inline-block;
	width: 4rem; height: 4rem;
	background-color: #E74C3C;
	border-radius: 50%;
	border: none;
	transition: .1s all linear;
}

.btn-close:hover{
	background-color: #B03A2E;
}

	.btn-close span, 
	.btn-close span::before{
		display: inline-block;
		width: .4rem; height: 3rem;
		background-color: #B03A2E;
		border-radius: 1rem;
		transform: rotate(224deg);
		vertical-align: bottom;
	}

	.btn-close span::before{
		content: "";
		transform: rotate(273deg);
	}

	.btn-close:hover span, 
	.btn-close:hover span::before{
		background-color: #fff;
	}

.space{
	padding-bottom: 13rem;
}

.options{
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 100;
	display: none;
	width: 100vw;
	height: 100vh;
	background-image: radial-gradient(
		circle at top left, 
		#32465a 20%, 
		var(--gray-full) 50%, 
		var(--gray-bg) 80%
	);
	transform: scale(0) translateY(-100%);
	transition: .1s all linear;
}

.options.active{
	transform: scale(1) translateY(0);
}

	.options > button{
		position: absolute;
		right: 0;
		margin: 2rem;
	}

	.photo{
		display: block;
		width: 100%;
		padding: 4rem 1rem;
		padding-bottom: 2rem;
	}

		.photo > img{
			display: block;
			border-radius: 50%;
			margin: auto;
		}

	.photo-caption{
		text-align: center;
	}

		.photo-caption h2, .photo-caption h3{
			color: #fff;
		}

		.photo-caption h2{
			font-size: 5rem;
		}

		.photo-caption h3{
			font-size: 1.6rem;
			font-weight: lighter;
		}

	.nav-options{
		padding-top: 3rem;
		text-align: center;
	}

		.nav-options ul li{
			display: block;
			width: 100vw;
			padding: 2rem 0;
			font-size: 1.8rem;
			font-weight: lighter;
			color: #fff;
		}

		.nav-options ul li.selected{
			border-top: 0.2rem solid #000;
			border-left: 0.4rem solid #225DB7;
			background-color: var(--gray-bg);
		}

.buttons-control{
	padding: 3rem 0;
	text-align: left;
}

	.btn-gray{
		display: inline-block;
		padding: 1.6rem 6rem;
		border: 0.1rem solid var(--gray-one);
		border-radius: 0.3rem;
		color: var(--gray-one);
		font-weight: lighter;
		text-decoration: none;
		letter-spacing: 0.1rem;
		transition: .3s background-color, color ease;
		background-color: transparent;
		cursor: pointer;
	}.btn-gray:hover{
		background-color: var(--gray-full);
		color: #fff;
		border-color: #fff;
	}

.header-desktop{
	position: fixed;
	top: 0; right: 0; left: 0;
	z-index: 99;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 4rem;
	backdrop-filter: blur(10px);
}

	.header-desktop ul > li{
		list-style: none;
		display: inline-block;
		color: var(--gray-title);
		font-size: 1.6rem;
		letter-spacing: 0.1rem;
		padding: 2rem 1rem;
		margin: 0 1rem;
		text-decoration: none;
		font-weight: lighter;
		user-select: none;
		transition: .3s all ease;
		cursor: pointer;
		text-shadow: 
			.1rem .1rem 0 #225DB7, 
			.2rem .2rem 0 #225DB7, 
			.3rem .3rem 0 #225DB7;
	}.header-desktop ul > li:hover{
		transform: scale(1.05);
		color: #fff;
	}

	.header-desktop ul > li[url].selected{
		border-bottom: .2rem solid #225DB7;
	}

	#idLogo{
		filter: invert(100%);
		cursor: pointer;
	}

.header-mobile{
	display: none;
	width: 100%;
	padding: 3rem;
}

	.aura{
		display: block;
		width: 10rem;
		padding: 1rem;
		border-radius: 50%;
		box-shadow: 
			0 0 1rem .3rem rgba(255, 255, 255, 0.4), 
			inset 0 0 1rem .3rem rgba(255, 255, 255, 0.4);
	}

	.header-mobile div{
		display: block;
		width: min-content;
		padding: 1rem;
		margin: auto;
	}

	.header-mobile div span{
		display: block;
		width: 3rem;
		height: .6rem;
		margin: 1rem 0;
		background-color: #fff;
		border-radius: 10rem;
		transition: 100ms width linear;
	}

	.header-mobile div span:nth-child(2){
		width: 1.5rem;
	}

	.header-mobile.active div span{
		width: .6rem;
	}

.footer{
	display: block;
	width: 100%;
	margin-top: 6rem;
}

.footer > div{
	padding: 3rem;
}

	.footer > div:first-child{
		background-color: #1c2f3b;
	}

	.footer > div:nth-child(2){
		background-color: #162731;
	}

	.footer > div:nth-child(3){
		background-color: #111e26;
	}

	.footer > small{
		display: block;
		width: 100%;
		padding: 1rem;
		background-color: #000;
		color: #fff;
		text-align: center;
		font-family: SourceCodePro;
		font-size: 1.4rem;
		font-style: normal;
		text-decoration: none;
		letter-spacing: .1rem;
		line-height: 3rem;
		word-spacing: 0.3rem;
	}

@media screen and (max-width: 650px){
	.header-desktop, .space{
		display: none;
	}

	.header-mobile, .options{
		display: block;
	}
}