@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:wght@100;300;400;500;700;900&display=swap');

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box !important;
	text-decoration: none;
}

html {
	scroll-behavior: smooth;
}

::-webkit-scrollbar {
	width: 8.1px;
}

::-webkit-scrollbar-track {
	background: #ffffff16;
}

::-webkit-scrollbar-thumb {
	background: #ffffff6e;
	border-radius: 50% 0 0 50%;
}

::-webkit-scrollbar-thumb:hover {
	background: #ffffffbc;
}

body {
	padding-left: 2rem;
	padding-right: 2rem;
	overflow-x: hidden;
	/* min-width: 375px; */
	height: 100vh;
	background-color: rgb(15 23 42);
	font-family: 'Roboto', sans-serif;
}

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

	width: 100%;
	height: 100%;
}

/* --- ANIMATED BACKGROUND --- */

body .dots-container {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	height: 100%;

	z-index: -10;
}

body .dots-container span {
	position: relative;
	width: 3.6px;
	height: 3.6px;

	background-color: rgba(0, 255, 234, 0.36);

	animation: animate 15s linear infinite;
	animation-duration: calc(360s / var(--i));
}

@keyframes animate {
	0% {
		transform: translateY(300vh) scale(0.36);
	}

	50% {
		transform: scale(1.08);
	}

	100% {
		transform: translateY(-50vh) scale(0.54);
	}
}

/* --- MAIN CONTENT --- */

@keyframes contentDelay {
	100% {
		opacity: 1;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes a {
	0%,
	16.667%,
	100% {
		opacity: 1;
	}
	33.333%,
	83.333% {
		opacity: 0.7;
	}
}
@keyframes a2 {
	0%,
	100% {
		opacity: 0.7;
	}
	33.333%,
	50% {
		opacity: 1;
	}
	16.667%,
	66.667% {
		opacity: 0.7;
	}
}
@keyframes a3 {
	0%,
	50%,
	100% {
		opacity: 0.7;
	}
	66.667%,
	83.333% {
		opacity: 1;
	}
}

.main_content {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.welcome {
	color: white;
	height: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.welcome_title {
	
	height: fit-content;
	font-size: 7vw;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
	text-align: center;
	opacity: 0;
	animation: contentDelay 2s 1.5s forwards;
}

.h1_arrow {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 300%;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	animation: gradient 6s ease infinite;

	font-weight: 900;
}

.welcome_nav {
	display: flex;
	justify-content: center;
	height: fit-content;
	font-size: 8px;
	width: 100%;

	opacity: 0;
	animation: contentDelay 2s 2s forwards;
}

.welcome_nav ul {
	display: flex;
	justify-content: space-between;
	min-width: 54%;
}

.welcome_nav li {
	display: flex;
	justify-content: center;
	list-style: none;
	flex-grow: 1;
	transition: all 0.45s;
	font-size: 24.3px;
	font-weight: 300;
}

.welcome_nav li:hover {
	flex-grow: 1.35;
}

.welcome_nav li a {
	color: #ffffffb1;
	text-decoration: none;
}

.welcome_nav li a:hover {
	color: #ffffff;
}

.nav_li_separator {
	font-size: 2em;
}

.typewritter-wrapper {
	display: flex;
	justify-content: center;
	padding: 27px 0 72px 0;
	font-family: 'Roboto', sans-serif;
	color: white;
	opacity: 0;
	animation: contentDelay 1.5s 3s forwards;
}

.typewritter-wrapper .presentation-static {
	font-size: 21.6px;
	
	font-size:clamp(1rem, 1.5vw, 2rem); 
	line-height: 42px;
	font-weight: 300;
}

.typewritter-wrapper .presentation-dinamic {
	
	margin: 0 0 0 9px;
	line-height: 42px;
	height: 42px;
	overflow: hidden;
}

.typewritter-wrapper .presentation-dinamic li {
	list-style: none;
	font-weight: 700;
	font-size: 24px;
	font-size:clamp(1rem, 1.5vw, 2rem); 
	position: relative;
	top: 0;
	animation: slide 12s steps(3) infinite;
}

.typewritter-wrapper .presentation-dinamic li:nth-child(1) {
	color: #e73c7e;
}

.typewritter-wrapper .presentation-dinamic li:nth-child(2) {
	color: #23a6d5;
}

.typewritter-wrapper .presentation-dinamic li:nth-child(3) {
	color: #23d5ab;
}

@keyframes slide {
	100% {
		top: -126px;
	}
}

.typewritter-wrapper .presentation-dinamic li::after {
	content: '';
	position: absolute;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgb(15 23 42);
	border-left: 3px solid white;
	animation: typing 4s steps(15) infinite;
}

@keyframes typing {
	40%,
	60% {
		left: calc(100% + 30px);
	}
	100% {
		left: 0;
	}
}

.typewritter-wrapper span {
	font-weight: 800;
}

.tech-stack {
	display: flex;
	justify-content: center;
	row-gap: 2rem;

	flex-wrap: wrap;
	position: relative;
	top: 180px;
	opacity: 0;
	animation: contentDelay 1.5s 4s forwards;
}

.tech-stack .tool {
	color: rgba(255, 255, 255, 0.534);
	font-size: clamp(1.5rem, 4vw, 36px); 
	line-height:clamp(1.5rem, 4vw, 36px);  ;
	padding: 0 4.5px;
}

.tech-stack .tool:hover {
	color: #2bc1f8;
}


.brand-logo {
	position: fixed;
	bottom: 36px;
	left: 36px;
	width: 72px;
	height: 72px;
	opacity: 0;
	animation: contentDelay 1.5s 5s forwards;
}

.brand-logo img {
	width: 100%;
	cursor: pointer;
}

@media (min-width: 499px) {
	.welcome {
		width: 100%;
		font-weight: bold;
	}

	.welcome_title {
		font-size: 6vw;
		letter-spacing: -2px;
	}

	.animated_span {
		position: relative;
		animation-name: var(--animation, a);
		animation-duration: 8s;
		animation-iteration-count: infinite;
		opacity: 1;
	}
/* 
	.animated_span::before {
		animation-name: var(--animation, a);
		animation-duration: 8s;
		animation-iteration-count: infinite;
		background: white;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		position: absolute;
		content: var(--content);
		opacity: 1;
	} */

	.welcome_nav {
		font-size: 25px;
		line-height: 2;
	}
}

/* --- PROJECTS TIMELINE --- */

.timeline {
	display: flex;
	justify-content: flex-end;

	padding: 90px 0;
	width: 100%;
}

.timeline ul {
	width: 63%;
	padding: 0px 0;
}

.timeline ul li {
	position: relative;
	list-style-type: none;
	width: 1.08px;
	padding-top: 72px;
	background-color: rgba(255, 255, 255, 0.36);
}

.timeline ul li::after {
	background: rgba(255, 255, 255, 0.9);
	content: '';
	width: 14.4px;
	height: 14.4px;
	border-radius: 50%;
	position: absolute;
	transform: translateX(-50%);
	bottom: 50%;
}

.timeline__scroll-content {
	position: relative;
	width: 540px;
	padding: 15px;
	border-radius: 5px;
	bottom: 0;
	transition: all 0.45s ease-in-out;
	transform: translate3d(40px, 0, 0);
}

.timeline__scroll-content:hover {
	background: rgba(255, 255, 255, 0.09);
}

.timeline__scroll-content h3 {
	font-size: 27px;
	margin-bottom: 10px;
}

.timeline__scroll-content h3 a {
	color: #1bc2ff91;
}

.timeline__scroll-content p {
	color: rgba(255, 255, 255, 0.551);
	font-size: 18px;
}

.timeline__scroll-content .tags {
	display: flex;
	align-items: center;
	margin: 27px 0 0 0;
}

.timeline__scroll-content .country {
	width: 45px;
	height: 45px;
	background-size: contain;
	background-position: center;
	margin-right: 27px;
}

.timeline__scroll-content .arg {
	background-image: url('./assets/arg.png');
}

.timeline__scroll-content .den {
	background-image: url('./assets/den.png');
}

.timeline__scroll-content .usa {
	background-image: url('./assets/usa.png');
}

.timeline__scroll-content .tags p {
	line-height: 0rem;
	padding: 8.1px;
	margin: 0 3.6px;
	border-radius: 18px;
	background-color: #ff0062a1;
	font-weight: 700;
	color: rgb(15 23 42);
	cursor: default;
}

.timeline__scroll-content .tags p:hover {
	background-color: rgb(15 23 42);
	font-weight: 700;
	color: #ff0062c5;
	border: 1px solid #ff0062c5;
}

.timeline ul li.show div {
	transform: none;
	visibility: visible;
	opacity: 1;
}

@media screen and (min-width: 900px) {
	.scroll-content ul li div {
		width: 480px;
	}
}

.timeline__scroll-content {
	opacity: 0;
}

.visible {
	opacity: 1;
}

/* CONTACT */

body .contact {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
}

.contact .contact__logo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vmin;
	width: 100%;
	height: 360px;
	padding:2rem
}

.contact .contact__logo,
.form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: calc(100% - 270px);
	width: clamp(300px, 60%, 90vw)

}

.contact .contact__logo {
	height: 100%;
	color: white;
	font-size: 6em;
	text-align: end;
	align-items: flex-end;
}

.contact .contact__form-container {
	display: flex;
	width: 100vmin;
	width: 100%;
	height: 360px;
}

.contact .contact__form-container .form .input-field {
	margin: 18px 0 0 0;
	height: 39px;
	border: 0.9px solid white;
	border-radius: 4.5px;
	background-color: rgba(255, 255, 255, 0);
	color: white;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

#senderMessage {
	padding: 9px;
	resize: none;
	height: 81px;
	border: 0.9px solid white;
}

.contact .contact__form-container .form .input-field:focus {
	outline: none;
	background-color: rgba(255, 255, 255, 0.108);
}

.contact .contact__form-container .form .selector-option {
	color: black;
}

.contact .contact__form-container .form .button {
	margin: 54px 0 0 0;
	height: 45px;

	border-radius: 9px;
	color: white;
	font-weight: 700;
	font-size: 1.53em;
	border: none;
	width: 100%;
}

.button{
	background-color: rgba(58, 255, 189, 0.628);
	transition: background-color 0.5s;
}

.button:hover {
	background-color: #197acd;
}
.copyright-container{
	display: flex;
	justify-content: center;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}
.ml-2{
	margin-left: 0.5rem;
}
 .contact__info {
	--angle: 0deg;
	--divWidth: clamp(200px, 50vw, 369px);
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	/* bottom: 0px; */
	/* right: calc(50vw - calc(var(--divWidth) / 2));
	top: calc(50vh - 60px); */
	/* right: 0px;
	left: 0px;
	margin-left: auto;
	margin-right: auto; */

	width: var(--divWidth);
	/* height: 54px; */
	color: white;
	font-size: 18px;

	border: 1.8px solid transparent;

	border-image: conic-gradient(
			from var(--angle),
			#4dedff 0deg 45deg,
			#fbb40000 45deg 90deg,
			#00e5ff00 90deg 135deg,
			#39995300 135deg 180deg,
			#4dedff 180deg 225deg,
			#fbb40000 225deg 270deg,
			#00e5ff00 270deg 315deg,
			#39995300 315deg 360deg
		)
		1;

	animation: rotate 10.8s linear infinite;
}


@property --angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes rotate {
	to {
		--angle: 360deg;
	}
}


@media screen and  (max-width:725px){
	.typewritter-wrapper{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.typewritter-wrapper .presentation-static{
		text-align: center;
	}
	.timeline {
		justify-content: flex-start;
	}
	.timeline__scroll-content .tags{
		flex-wrap: wrap;
	}
	body .contact {
		flex-direction: column;
	}
	body .contact *{
		justify-content: center;
		text-align: center;
	}
	.contact .contact__logo {
		text-align: center;
		align-items: center;
	}
	.welcome_nav ul {
		width: 100%;
	}

	.copyright-container{

		justify-content: end;

	}

	.contact__info {
		
		--divWidth: clamp(200px, 50vw, 369px);
		display: flex;
		align-items: center;
		justify-content: end;
	}	
}

@media screen and (max-width:1200px){
	.timeline ul {
		width: 100%;
	}
	.timeline__scroll-content {

		width: 75vw;}
}