@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-color: #1B1B1B;
}

p,
.nav-link {
	font-family: "Montserrat";
}

h1,
h2,
h3,
h4,
h5 {
	font-family: "Just Another Hand";
}


h2 {
	font-size: 50px;
}

h3 {
	font-size: 50px;
}

header {
	background-color: #351886;
	color: white;
	position: fixed;
	width: 100%;
	z-index: 10000;
}

.logo {
	font-size: 30px;
}

.subtitulo {
	font-size: 40px;
	font-family: "Just Another Hand";
}

.navbar-nav {
	--bs-nav-link-color: white;
	--bs-nav-link-hover-color: white;
	--bs-nav-link-disabled-color: white;
}

.eng {
	text-align: center;
	color: #785ACE;
}

.div-language {
	height: 30px;
	background-color: #fff;
	border-radius: 100px;
	text-decoration: none;
}

.ball-flag {
	height: 20px; 
	margin: 5px;
}

.language-link {
	text-decoration: none;
}

.navbar-toggler:focus {
	box-shadow: none;
}


#home {
	padding-top: 100px;
	background: rgb(53, 24, 134);
	background: linear-gradient(180deg, rgba(53, 24, 134, 1) 0%, rgba(27, 27, 27, 1) 75%);
	color: white;
	position: relative;
	overflow: hidden;
	margin-bottom: -20px;
}

.home {
	height: 80vh;
}

.image_home {
	height: 100%;
}

.buttons_home {
	background: url(/images/Marlene.png) no-repeat center;
	background-size: contain;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: relative;	
	z-index: 1;
}

.portfolio_button {
	background-color: #351886;
	color: #fff;
	border-radius: 6px;
	width: 150px;
	height: 40px;
	text-align: center;
	text-decoration: none;
	font-size: 30px;
	font-family: "Just Another Hand";
}

.hireme_button {
	background-color: #785ACE;
	color: #fff;
	border-radius: 6px;
	width: 150px;
	height: 40px;
	text-align: center;
	text-decoration: none;
	font-size: 30px;
	font-family: "Just Another Hand";
}

#services {
	background-color: #785ACE;
	color: white;
}



.card {
	background-color: #FFFFFFAA;
}

.card-title {
	font-size: 30px;
	color: #351886;
}

.card-img-services {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #351886;
	--bs-btn-border-color: #351886;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #785ACE;
	--bs-btn-hover-border-color: #785ACE;
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #351886;
	--bs-btn-active-border-color: #351886;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #351886;
	--bs-btn-disabled-border-color: #351886;
}

#aboutme {
	color: white;
}

.img-aboutme {
	width: 60%;
	border-radius: 20px;
}

.text-number {
	font-family: "Just Another Hand";
	font-size: 70px;
	color: #785ACE;
	margin-bottom: 0;
}

.donwload-button {
	background-color: #351886;
	color: #fff;
	border-radius: 6px;
	width: 130px;
	height: 40px;
	font-size: 30px;
	font-family: "Just Another Hand";
	text-align: center;

}

.donwload-button:hover {
	background-color: white;
	color: #785ACE;
}

#educationwork h3 {
	color: #fff;
}

.fondo-lila {
	background-color: #785ACE88;
	height: 40px;
	box-shadow: #785ACE88 0px 0px 20px 20px;
	border-radius: 8px;
}

.icons-educwork {
	width: 50px;
	height: 50px;
}

.education {
	background-color: #FFFFFFAA;
	border: #785ACE 3px solid;
	color: #fff;
	border-radius: 20px;
}

.text-education {
	font-size: 50px;
}

.periodo {
	background-color: #351886;
	border-radius: 4px;
}

.workexperience {
	background-color: #FFFFFFAA;
	border: #785ACE 3px solid;
	color: #fff;
	border-radius: 20px;
}

.text-work {
	font-size: 50px;
}

.text-subtitles {
	font-weight: 600;
	color: #351886;
}

#projects h3 {
	color: #fff;
}

.viewallp_button {
	display: inline-block;
	background-color: #351886;
	color: #fff;
	border-radius: 6px;
	width: 140px;
	height: 40px;
	font-size: 30px;
	font-family: "Just Another Hand";
	text-align: center;
	text-decoration: none;
}

.viewallp_button:hover {
	background-color: white;
	color: #785ACE;
}

#contact {
	background-color: #785ACE;
	color: #fff;
}

.icono-contact {
	width: 40px;
	background-color: #fff;
	border-radius: 5px;
	padding: 5px;
}

#footer {
	background-color: #351886;
	color: #fff;
	height: 80px;
}

.texto-footer {
	margin: auto;
}

.container-footer {
	height: 100%;
	display: flex;
	justify-content: center;
}

.sin-deco {
	color: #fff;
}

/* Animation */

.home-animation-container {
	position: absolute;
	width: 40%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

#big-square-1 {
	background-color: #FFFFFFAA;
	height: 100%;
	width: 25vw;
	transform: rotate(20deg);
	border-radius: 15px;
	left: 19%;
	top: 17%;
	position: absolute;
	animation-name: background-big-square-1;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
}

#big-square-2 {
	background-color: #785ACE;
	height: 100%;
	width: 25vw;
	transform: rotate(-10deg);
	border-radius: 15px;
	left: 5%;
	top: 10%;
	position: absolute;
	animation-name: background-big-square-2;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
}

@keyframes background-big-square-1 {
	0% {
		background-color: rgb(188, 186, 193);
	}

	35% {
		background-color: rgb(188, 186, 193);
	}

	45% {
		background-color: #785ACE;
	}

	85% {
		background-color: #785ACE;
	}

	95% {
		background-color: rgb(188, 186, 193);
	}
}

@keyframes background-big-square-2 {

	0% {
		background-color: #785ACE;
	}

	35% {
		background-color: #785ACE;
	}

	45% {
		background-color: rgb(188, 186, 193);
	}

	85% {
		background-color: rgb(188, 186, 193);
	}

	95% {
		background-color: #785ACE;
	}
}

.small-square {
	width: 30px;
	height: 30px;
	background-color: red;
	border-radius: 6px;
	margin-left: 10px;
}

.smaller-square {
	width: 25px;
	height: 25px;
	background-color: #351886;
	border-radius: 6px;
	margin-top: 10px;
}

#small-squares-1 {
	transform: rotate(-35deg);
	top: 0%;
	left: 0%;
	width: 40px;
	animation-name: small-squares-1;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	position: absolute;
}

#small-squares-2 {
	transform: rotate(-215deg);
	top: 50%;
	left: 100%;
	width: 40px;
	animation-name: small-squares-2;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	position: absolute;
}

#small-squares-1 div:nth-child(1) {
	background-color: rgb(188, 186, 193);
}

#small-squares-2 div:nth-child(1) {
	background-color: #785ACE;
}

@keyframes small-squares-1 {
	0% {
		transform: rotate(-35deg);
		top: 0%;
		left: 0%;
	}

	15% {
		transform: rotate(-35deg);
		top: 0%;
		left: 0%;
	}

	25% {
		transform: rotate(-125deg);
		top: 50%;
		left: 0%;
	}

	40% {
		transform: rotate(-125deg);
		top: 50%;
		left: 0%;
	}

	50% {
		transform: rotate(-215deg);
		top: 50%;
		left: 100%;
	}

	65% {
		transform: rotate(-215deg);
		top: 50%;
		left: 100%;
	}

	75% {
		transform: rotate(-305deg);
		top: 0%;
		left: 100%;
	}

	90% {
		transform: rotate(-305deg);
		top: 0%;
		left: 100%;
	}
}


@keyframes small-squares-2 {

	0% {
		transform: rotate(-215deg);
		top: 50%;
		left: 100%;
	}

	15% {
		transform: rotate(-215deg);
		top: 50%;
		left: 100%;
	}

	25% {
		transform: rotate(-305deg);
		top: 0%;
		left: 100%;
	}

	40% {
		transform: rotate(-305deg);
		top: 0%;
		left: 100%;
	}

	50% {
		transform: rotate(-35deg);
		top: 0%;
		left: 0%;
	}

	65% {
		transform: rotate(-35deg);
		top: 0%;
		left: 0%;
	}

	75% {
		transform: rotate(-125deg);
		top: 50%;
		left: 0%;
	}

	90% {
		transform: rotate(-125deg);
		top: 50%;
		left: 0%;
	}

}

.menu-icon-hamburger {
	width: 35px;
}

/* md */
@media (max-width: 768px) {
	.home-animation-container {
		overflow: hidden;
		width: 100%;
	}

	.img-aboutme {
		width: 100%;
		object-fit: cover;
		object-position: 50% -50px;
		height: 320px;
		margin-bottom: 20px;
	}
}

/* lg */
@media (max-width: 992px) {
	.nav-item {
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}
}