/*
  --------------- CORE ---------------
*/

* {
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 1;
	position: relative;
}

html,
body {
	overflow-y: visible;
	scrollbar-width: none;
	/*mozilla*/
}

*::-webkit-scrollbar {
	display: none;
	/*chrome*/
}


/*
  --------------- CONTAINERS ---------------
*/

.container {
	width: 89%;
	height: auto;
	padding-left: 5.5%;
	padding-right: 5.5%;
	padding-top: 3.6%;
}

.hero-container-main {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 0.2fr 1.8fr;
	grid-auto-columns: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas: "hero-favlion-container hero-nav-container" "hero-left-container hero-right-container";
}

.hero-favlion-container {
	grid-area: hero-favlion-container;
	align-items: center;
	justify-self: start;
}

.hero-nav-container {
	grid-area: hero-nav-container;
	align-items: center;
	justify-self: center;
	z-index: 2;
}

.hero-left-container {
	grid-area: hero-left-container;
}

.hero-right-container {
	grid-area: hero-right-container;
	align-items: center;
	justify-self: center;
}

.hero-nav {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.hero-name-container {
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-auto-columns: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas: "hero-hi" "hero-name" "hero-titules" "hero-buttons";
	z-index: 2;
}

.hero-hi {
	grid-area: hero-hi;
	align-self: end;
}

.hero-name {
	grid-area: hero-name;
	align-self: start;
}

.hero-titules {
	grid-area: hero-titules;
	padding-top: 16px;
}

.hero-buttons {
	grid-area: hero-buttons;
}

.skills-container {
	margin-top: 86px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-auto-columns: 1fr;
	gap: 60px 0px;
	grid-auto-flow: row;
	grid-template-areas: "skill-projecting skill-developing" "skill-maintenance skill-maintenance";
}

.skill-projecting {
	grid-area: skill-projecting;
}

.skill-developing {
	grid-area: skill-developing;
}

.skill-maintenance {
	grid-area: skill-maintenance;
}

.technologyes-container {
	margin-left: 26%;
	margin-right: 26%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-auto-columns: 1fr;
	gap: 86px 62px;
	grid-auto-flow: row;
	grid-template-areas: "technology-label1 technology-label1 technology-label1 technology-label1" "technology1 technology2 technology3 technology4" "technology5 technology6 technology7 technology8" "technology9 technology10 technology11 technology12" "technology-label2 technology-label2 technology-label2 technology-label2" "technology13 technology14 technology15 technology16" "technology17 technology18 technology19 technology20";
}

.technology-label1 {
	grid-area: technology-label1;
	align-self: end;
	justify-self: center;
}

.technology-label2 {
	grid-area: technology-label2;
	align-self: end;
	justify-self: center;
}

.technology1 {
	grid-area: technology1;
}

.technology2 {
	grid-area: technology2;
}

.technology3 {
	grid-area: technology3;
}

.technology4 {
	grid-area: technology4;
}

.technology5 {
	grid-area: technology5;
}

.technology6 {
	grid-area: technology6;
}

.technology7 {
	grid-area: technology7;
}

.technology8 {
	grid-area: technology8;
}

.technology9 {
	grid-area: technology9;
}

.technology10 {
	grid-area: technology10;
}

.technology11 {
	grid-area: technology11;
}

.technology12 {
	grid-area: technology12;
}

.technology13 {
	grid-area: technology13;
}

.technology14 {
	grid-area: technology14;
}

.technology15 {
	grid-area: technology15;
}

.technology16 {
	grid-area: technology16;
}

.technology17 {
	grid-area: technology17;
}

.technology18 {
	grid-area: technology18;
}

.technology19 {
	grid-area: technology19;
}

.technology20 {
	grid-area: technology20;
}

.portfolio-container {
	z-index: 3;
	margin-top: 76px;
	padding-top: 46px;
	padding-bottom: 46px;
	background: #1A1A1A;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-auto-columns: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas: "portfolio1 portfolio2 portfolio3" "portfolio4 portfolio5 portfolio6";
}

.portfolio1 {
	grid-area: portfolio1;
}

.portfolio2 {
	grid-area: portfolio2;
}

.portfolio3 {
	grid-area: portfolio3;
}

.portfolio4 {
	grid-area: portfolio4;
}

.portfolio5 {
	grid-area: portfolio5;
}

.portfolio6 {
	grid-area: portfolio6;
}


/*
  --------------- SECTIONS ---------------
*/

.section-hero {
	width: 100%;
	height: 100%;
	background: radial-gradient(100% 100% at 0% 0%, #E7E7E7 0%, #D7D7D7 100%);
	/*
  background: radial-gradient(50% 50% at 50% 50%, #EEEEEE 0%, rgba(0, 0, 0, 0.16) 100%);
  */
}

.section-hero-mobile {
	display: none;
	width: 100%;
	height: 88%;
	background: radial-gradient(100% 100% at 0% 0%, #E7E7E7 0%, #D7D7D7 100%);
}

.section-label {
	width: 100%;
	height: 18%;
	background: #1A1A1A;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.25));
	z-index: 3;
}

.section-skills {
	width: 100%;
	background: radial-gradient(50% 50% at 50% 50%, #EEEEEE 0%, rgba(0, 0, 0, 0.16) 100%);
	padding-bottom: 60px;
}

.section-portfolio {
	width: 100%;
	box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.section-contact {
	width: 100%;
	background: radial-gradient(50% 50% at 50% 50%, #EEEEEE 0%, rgba(0, 0, 0, 0.16) 100%);
}

.section-footer {
	width: 100%;
	height: 26%;
	background-color: #1A1A1A;
	box-shadow: 0px -6px 6px rgba(0, 0, 0, 0.25);
}


/*
  --------------- MINIS ---------------
*/

.hero-bg-shape {
	position: absolute;
	width: 58%;
	height: 100%;
	right: 0;
	filter: drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.25));
}

.hero-favlion {
	width: 4.8vw;
	filter: drop-shadow(-2px 4px 2px rgba(0, 0, 0, 0.25));
}

.hero-avatar {
	height: 100%;
	width: auto;
	max-width: 100%;
	filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.62));
	position: relative;
	z-index: 2;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.hero-label {
	text-align: center;
	padding-top: 3%;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1.25vw;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.desktop-href {
	display: block;
}

.mobile-href {
	display: none;
}

h2 {
	text-align: center;
	border: 4px solid black;
	margin-top: 140px;
	margin-left: 40%;
	margin-right: 40%;
	padding-top: 1%;
	padding-bottom: 1%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.4vw;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
	border-radius: 4px;
}

h3 {
	text-align: center;
	margin-bottom: 26px;
	margin-top: 18px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.2vw;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

.skill-text {
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 0.75vw;
}

.skill-img {
	width: auto;
	height: 76px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	opacity: 86%;
	/*
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25);
  */
}

.separator {
	margin-top: 45px;
	margin-left: auto;
	margin-right: auto;
	width: 26%;
	height: auto;
	display: block;
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.25));
}

.label-text {
	margin-top: 86px;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 0.9vw;
}

.technology-text {
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.25vw;
}

.technology-img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 26px;
	width: auto;
	height: 106px;
	border: 0;
	filter: drop-shadow(-2px 4px 2px rgba(0, 0, 0, 0.25));
	opacity: 92%;
	padding-top: 12px;
}

.portfolio-bg {
	width: 100%;
	height: 18vw;
	position: absolute;
	box-shadow: inset 0px -4px 4px rgba(0, 0, 0, 0.25);
}

#portfolio-h2 {
	margin-top: 86px;
	z-index: 2;
	position: relative;
}

#contact-h2 {
	margin-top: 86px;
}

.portfolio-img {
	width: 100%;
	height: auto;
	border: 0;
	box-shadow: inset 0px -4px 4px rgba(0, 0, 0, 0.25);
}

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

.hero-hi-text {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 3.2vw;
	margin-left: 32px;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.hero-nav-button {
	flex: 0 0 auto;
	margin-left: 42px;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.3vw;
	text-align: center;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
	padding: 11px;
}

.animated {
	transition: 0.4s;
}

.animated:hover {
	filter: drop-shadow(0px 0px 4px rgba(189, 142, 86, 0.86));
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 92%;
}

.animated-imput {
	transition: 0.4s;
}

.animated-imput:hover {
	filter: drop-shadow(0px 0px 6px rgba(189, 142, 86, 0.86));
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.02);
	opacity: 86%;
}

.hero-name-text {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 4.65vw;
	text-shadow: -2px 4px 2px rgba(0, 0, 0, 0.25);
}

.hero-titules-text {
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	font-size: 1.75vw;
	margin-top: 6px;
	margin-right: 14%;
	text-align: right;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.social-button-img {
	width: 38px;
	height: 38px;
}

.social-button {
	padding: 26px;
	border-radius: 12px;
	border: 0;
	margin-left: 12%;
	background: #c4c4c4;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

#container-contact {
	padding-top: 2%;
}

.without-shadow {
	text-shadow: none;
}

form {
	width: 100%;
	margin-top: 6%;
}

input {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 426px;
	height: 48px;
	border: 0;
	border-left: 4px solid black;
	border-bottom: 4px solid black;
	background: rgba(0, 0, 0, 0);
	margin-bottom: 28px;
	border-radius: 4px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 14px;
	padding-left: 8px;
	padding-right: 8px;
	outline: none;
}

textarea {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 426px;
	height: 184px;
	border: 0;
	border-left: 4px solid black;
	border-bottom: 4px solid black;
	background: rgba(0, 0, 0, 0);
	margin-bottom: 28px;
	border-radius: 4px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 14px;
	padding-left: 8px;
	padding-top: 8px;
	padding-right: 8px;
	outline: none;
}

.submit-button {
	border-bottom: 0;
	border-right: 4px solid black;
	width: 200px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px;
	outline: none;
	cursor: pointer;
}

.footer-button {
	cursor: pointer;
	margin-top: 3%;
	text-align: center;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px;
}

.footer-text {
	color: white;
}


/* MEDIA */

@media screen and (max-width: 1601px) {
	.social-button {
		padding: 22px;
	}
	.hero-favlion {
		width: 4.2vw;
	}
	.technology-img {
		height: 86px;
	}
	.skill-img {
		height: 56px;
	}
}

@media screen and (max-width: 1281px) {
	.social-button {
		padding: 16px;
	}
	.hero-label {
		font-size: 16px;
	}
	.hero-nav-button {
		font-size: 18px;
	}
	.technology-img {
		height: 76px;
	}
	.technology-text {
		font-size: 1.15vw;
	}
	.skill-img {
		height: 52px;
	}
	.social-button-img {
		width: 32px;
		height: 32px;
	}
	.technologyes-container {
		margin-left: 22%;
		margin-right: 22%;
	}
	.portfolio-container {
		margin-top: 42px;
	}
	#portfolio-h2 {
		margin-top: 66px;
	}
	h2 {
		margin-left: 36%;
		margin-right: 36%;
		padding-top: 1.3%;
		padding-bottom: 1.3%;
	}
}

.hero-mobile-container {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 0.5fr 0.7fr 1fr;
	grid-auto-columns: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas: "hero-mobile-nav-container" "hero-mobile-hi-container" "hero-mobile-avatar-container";
}

.hero-mobile-nav-container {
	grid-area: hero-mobile-nav-container;
	align-self: center;
	justify-self: center;
}

.hero-mobile-hi-container {
	grid-area: hero-mobile-hi-container;
	align-items: center;
	justify-self: center;
	z-index: 2;
}

.hero-mobile-avatar-container {
	grid-area: hero-mobile-avatar-container;
	align-items: center;
	justify-self: center;
}

#first-nav-button {
	margin-left: 0;
}

@media screen and (max-width: 993px) {
	.desktop-href {
		display: none;
	}
	.mobile-href {
		display: block;
	}
	.section-footer {
		height: 16%;
	}
	.section-hero {
		display: none;
	}
	.hero-avatar {
		height: 112%;
	}
	.section-label {
		height: 12%;
	}
	.hero-titules-text {
		margin-right: 0;
		margin-top: 12px;
		text-align: center;
		font-size: 25px;
	}
	.hero-name-text {
		text-align: center;
		font-size: 80px;
	}
	.hero-favlion {
		width: 60px;
	}
	.hero-hi-text {
		margin: 0;
		text-align: center;
		font-size: 40px;
	}
	.section-hero-mobile {
		display: block;
	}
	.technologyes-container {
		margin-left: 18%;
		margin-right: 18%;
		gap: 56px 18px;
	}
	.portfolio-container {
		margin-top: 40px;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas: "portfolio1 portfolio2" "portfolio3 portfolio4" "portfolio5 portfolio6";
	}
	#portfolio-h2 {
		margin-top: 56px;
	}
	.skill-maintenance {
		padding-top: 16px;
	}
	h2 {
		margin-left: 32%;
		margin-right: 32%;
		font-size: 14px;
		padding-top: 1.3%;
		padding-bottom: 1.3%;
	}
	h3 {
		font-size: 11px;
	}
	.label-text {
		font-size: 9px;
		margin-left: 8%;
		margin-right: 8%;
		margin-top: 66px;
	}
	.skill-text {
		font-size: 9px;
		margin-left: 6%;
		margin-right: 6%;
	}
	.technology-text {
		font-size: 10px;
	}
	.technology-img {
		height: 76px;
	}
	.skill-img {
		height: 46px;
	}
}

@media screen and (max-width: 769px) {
	h3 {
		font-size: 9px;
	}
	.portfolio-container {
		margin-top: 32px;
		padding-left: 2%;
		padding-right: 2%;
	}
	.portfolio-img {
		margin-bottom: 2%;
		margin-top: 2%;
		filter: drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.16));
	}
}

@media screen and (max-width: 577px) {
	.footer-button {
		margin-top: 6%;
	}
	.hero-name-text {
		font-size: 36px;
	}
	.hero-hi-text {
		font-size: 26px;
	}
	.hero-titules-text {
		font-size: 14px;
	}
	.hero-nav-button {
		margin-left: 32px;
		font-size: 15px;
	}
	.skills-container {
		display: flex;
		flex-direction: column;
	}
	h2 {
		margin-left: 22%;
		margin-right: 22%;
		margin-top: 66px;
		padding-top: 2%;
		padding-bottom: 2%;
	}
	h3 {
		margin-bottom: 12px;
		font-size: 11px;
	}
	.separator {
		width: 56%;
	}
	.skill-developing {
		padding: 0;
		padding-top: 18px;
	}
	.skill-maintenance {
		padding: 0;
		padding-top: 18px;
	}
	.portfolio-bg {
		height: 36vw;
	}
	.portfolio-container {
		padding-top: 22px;
		padding-bottom: 22px;
		display: flex;
		flex-direction: column;
	}
	#portfolio-h2 {
		margin-top: 26px;
	}
	#contact-h2 {
		margin-top: 36px;
	}
	.label-text {
		margin-top: 26px;
	}
	.technology-img {
		height: 46px;
		margin-bottom: 16px;
	}
	.technologyes-container {
		gap: 46px 12px;
		margin-left: 8%;
		margin-right: 8%;
	}
	input {
		width: 266px;
	}
	textarea {
		width: 266px;
	}
	.submit-button {
		width: 166px;
	}
}