.grid-container {
	display: grid;
	grid-template-areas:
		"main"
		"resume"
		"habilidades"
		"projetos";

	margin: 0;
	padding: 0;
	box-sizing: border-box;

	width: auto;
	height: auto;
}

/* HEADER AND COMPONENTS */

#header {
	display: flex;
	flex-direction: column;

	align-items: center;

	margin: 0;
	padding: 0;
	box-sizing: border-box;

	position: fixed;
	top: 0;

	z-index: 1;

	width: 100vw;
	height: 6vh;

	background: var(--header-background-color);
	opacity: 0.95;
}

#n-itens__logo {
	display: flex;

	flex-direction: column;

	margin: 0;
	margin-right: 50px;
	padding: 0;
	box-sizing: border-box;

	font-family: Kode Mono;
	font-size: 1.87em;
	font-weight: normal;
	color: var(--primary-color);

	background-image: var(--h-navbar-logo-gradient);
	background-size: 100%;

	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;

	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;

	cursor: pointer;
}

#navbar {
	display: flex;
	flex-direction: row;

	justify-content: space-between;
	align-items: center;

	width: 100%;
	height: 100%;
}

#n-itens {
	display: flex;
	flex-direction: row;

	justify-content: flex-start;
	align-items: center;

	margin: 0;
	margin-left: 50px;
	padding: 0;
	box-sizing: border-box;

	list-style: none;
}

#n-itens__link {
	display: flex;

	justify-content: center;
	align-items: center;
	font-family: Inter;
	font-size: 1.12em;
	font-weight: normal;
	text-decoration: none;
	color: var(--white-font-color);

	margin: 0;
	margin-right: 20px;
	padding: 5px;
	box-sizing: border-box;

	width: 100px;
	height: 35px;

	cursor: pointer;

	box-shadow: inset 0 0 0 0 var(--hoover-color);
	-webkit-transition: ease-out 0.3s;
	-moz-transition: ease-out 0.3s;
	transition: ease-out 0.3s;
}

#n-itens__link:hover {
	box-shadow: inset 0 -2px 0 0 var(--hoover-color);

	color: #15f5ba;
}

.n-itens__link--ativo span {
	color: var(--primary-color);
}

.n-itens__link--ativo:hover span {
	color: var(--hoover-color);
}

.progress-container {
	width: 100%;
	height: 3px;

	background: var(--progress-container-background);
}

.progress-container__bar {
	height: 3px;
	width: 0%;

	background-image: var(--progress-container-gradient);
}

/* MAIN AND COMPONENTS */

#main {
	display: flex;
	grid-area: main;

	justify-content: center;
	align-items: center;

	margin: 0;
	padding: 0;
	box-sizing: border-box;

	width: auto;
	height: 100vh;

	border-bottom: solid 2px rgb(131, 111, 255, 0.3);
}

#section {
	display: flex;
	flex-direction: row;

	justify-content: space-between;

	margin: 0;
	padding: 0;
	gap: 50px;
	box-sizing: border-box;

	width: auto;
	height: auto;
}

#article {
	display: flex;
	flex-direction: column;

	justify-content: space-between;

	margin: 0;
	padding: 0;
	box-sizing: border-box;

	width: auto;
	height: auto;
}

.text {
	margin: 0;
	padding: 0;

	font-family: Inter;
	font-weight: normal;
}

#section__h1 {
	font-size: 3.75em;
	color: var(--white-font-color);
	width: auto;
}

.textGradient {
	display: flex;
	flex-direction: row;

	justify-content: flex-start;
	align-items: center;

	margin: 0;
	padding: 0;
	box-sizing: border-box;

	width: auto;
	height: auto;
}

#textGradient__p1 {
	font-size: 2.81em;
	color: var(--white-font-color);
}

#textGradient__p2 {
	font-size: 2.5em;
	color: var(--white-font-color);
}

#textGradient__span1 {
	font-weight: bold;

	color: var(--primary-color);

	background-image: var(--gradient-01);
	background-size: 100%;

	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;

	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
}

#textGradient__span2 {
	font-weight: bold;

	color: var(--primary-color);

	background-image: var(--gradient-02);
	background-size: 100%;

	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;

	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
}

#about {
	display: flex;
	flex-direction: row;

	justify-content: flex-start;
	align-items: flex-start;

	margin: 0;
	padding: 20px;
	box-sizing: border-box;

	width: 34vw;
	height: auto;

	border: dotted 2px var(--primary-color);
	border-radius: 10px;
}

#about__p1 {
	font-size: 1.25em;
	text-align: justify;
	color: var(--white-font-color);
}

#about__span {
	text-decoration: none;

	color: var(--primary-color);
	font-weight: bold;

	cursor: pointer;
}

#about__span:hover {
	text-decoration: underline;
	color: var(--secondary-color);
}

#links {
	display: flex;
	flex-direction: row;

	margin: 0;
	padding: 0;
	box-sizing: border-box;
	gap: 20px;
}

.links__dot {
	display: flex;

	justify-content: center;
	align-items: center;

	padding: 3px;

	width: 37px;
	height: 37px;

	background: var(--primary-color);

	border-radius: 100%;

	-webkit-transition: ease-out 0.3s;
	-moz-transition: ease-out 0.3s;
	transition: ease-out 0.3s;
}

.links__dot:hover {
	background: var(--hoover-color);
}

.links__logo {
	width: 30px;
	height: 30px;
}

#links__WApp-button {
	display: flex;
	justify-content: center;
	align-items: center;

	margin: 0;
	padding: 5px;
	box-sizing: border-box;

	width: auto;
	height: auto;

	background-color: var(--primary-color);
	border-radius: 5px;

	font-family: Inter;
	font-size: 1.25em;
	font-weight: bold;
	text-decoration: none;
	color: #0a0f1e;

	cursor: pointer;

	box-shadow: inset 0 0 0 0 var(--hoover-color);
	-webkit-transition: ease-out 0.5s;
	-moz-transition: ease-out 0.5s;
	transition: ease-out 0.5s;
}

#links__WApp-button:hover {
	box-shadow: inset 400px 0 0 0 var(--hoover-color);
	color: #0a0f1e;
}

#contactButton:active {
	transform: scale(0.9, 0.9);
}

#photo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	height: auto;
}

#photo__image {
	width: 80%;
	height: auto;
}

/*  SKILLS AND COMPONENTS */

#mySkills {
	display: flex;
	grid-area: habilidades;
	flex-direction: column;

	justify-content: flex-start;
	align-items: center;

	margin: 0;
	padding: 0;
	box-sizing: border-box;

	width: auto;
	height: auto;

	scroll-snap-type: y mandatory;

	scroll-snap-align: start;

	scroll-margin: 0;
}

#mySkills__fieldset {
	border: dotted 2px var(--primary-color);
	border-radius: 10px;
	padding: 20px;
	margin-top: 35px;
	box-sizing: border-box;
	width: 65vw;
}

#mySkills__h1 {
	font-weight: bold;

	background-image: var(--gradient-01);
	background-size: 100%;

	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;

	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;

	font-size: 2.5em;

	color: var(--white-font-color);

	text-align: center;

	padding: 8px;
}

#mySkills__resume {
	margin: 0;
	margin-top: 0;

	font-family: Inter;
	font-size: 1.37em;

	text-align: justify;

	color: var(--white-font-color);

	width: auto;
	height: auto;
}

#mySkills__resume::first-letter {
	color: var(--primary-color);
	font-size: 3.12em;
	letter-spacing: 5px;
}

#mySkills__h2 {
	font-size: 2.5em;

	color: var(--white-font-color);

	margin-top: 100px;
}

#mySkills__h2 span {
	font-weight: bold;

	background-image: var(--gradient-02);
	background-size: 100%;

	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;

	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
}

#mySkills-section {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	justify-content: flex-start;
	align-items: flex-start;

	margin: 0;
	margin-top: 80px;
	padding: 0;
	column-gap: 100px;

	width: auto;
	height: auto;
}

#col1,
#col2 {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;

	justify-content: flex-start;
	align-items: flex-start;

	width: auto;
	height: auto;
}

/* FOOTER AND COMPONENTS */

#footer {
	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	margin: 0px;
	padding: 20px;
	box-sizing: border-box;

	position: relative;

	width: 100%;
	height: auto;

	background: var(--footer-background-color);
	border-top: solid 3px var(--progress-container-background);
}

#footer__p1 {
	font-size: 0.93em;
	font-weight: normal;
	color: var(--white-font-color);
}

#footer__p2 {
	font-size: 0.75em;
	font-weight: normal;
	color: var(--white-font-color);

	margin-top: 10px;
}

#footer__span {
	font-weight: normal;
	color: var(--primary-color);
}

.goTop--active {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;

	background: var(--primary-color);

	border-radius: 100%;

	position: fixed;

	bottom: 0;
	left: 90%;

	margin-bottom: 20px;

	cursor: pointer;
}

.goTop--active:hover {
	-webkit-transition: ease-in 0.2s;
	-moz-transition: ease-in 0.2s;
	transition: ease-in 0.2s;

	background: var(--secondary-color);
}

#goTop__img {
	width: 50px;
	height: 50px;
}

.modal-form {
	display: flex;

	width: 40vw;
	height: 60vh;

	padding: 10px;

	position: fixed;
	/* top: 20%;
	left: 601.5px; */

	top: 50%;
	left: 50%;

	background: var(--page-background-color);

	border: dotted 2px var(--primary-color);
	border-radius: 10px;

	transform: translate(-50%, -50%);
	z-index: 1001;

	display: none;
}

.modal-form--disabled {
	display: none;
}

.modal-form--active {
	display: block;
}

#closeModal {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 25px;

	border: solid 2px var(--red-color);
	border-radius: 5px;

	font-family: Inter;
	font-weight: bold;
	color: var(--red-color);

	cursor: pointer;
}

.grid-container--blur {
	filter: blur(5px);
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: none;
}

.overlay-active {
	display: block;
}