* {
	scroll-behavior: smooth;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.6;

}

/* STRUCTURE */

.main-container {
	position: relative;
}

/* HEADER */

#header {
	display: flex;
	height: 100vh;
	justify-content: center;
	align-items: center;
	background-image: url("../img/background.svg");
	background-size: cover;
	background-position: center center;
	overflow: hidden;
}

.header-img {
	width: 100vw;
	background-size: cover;
	background-position: center center;
}

#header .text-artist {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 800px;
	height: 100px;
}

.text-artist h2 {
	font-size: 4.5rem;
}

.main-container>.link-header {
	text-decoration: none;
	color: white;
}

#navbar {
	background-color: white;
	display: flex;
	position: fixed;
	top: 0;
	width: 100%;
	height: 75px;
	align-items: center;
	justify-content: space-between;
	z-index: 3;

}


.logo {
	display: flex;
	height: 60px;
	align-items: center;
	justify-content: center;
	margin-left: 3%;
}

.logo h1 {
	font-weight: bolder;
}

.logo h1 a {
	text-decoration: none;
	color: rgb(17, 17, 17);
}

.container-nav {
	margin-right: 3%;
}

.container-nav a {
	color: rgb(17, 17, 17);
	text-decoration: none;
}

.container-nav ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

.container-nav ul li {
	margin: auto 20px auto 20px;
}

.container-nav li a.link-menu:hover {
	text-decoration: underline;
}


/* BIOGRAPHY */


#biography {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.container-biography {
	display: flex;
	width: 100vw;
	height: 100vh;
	padding-top: 5%;
}

.biography-left {
	display: flex;
	flex-direction: column;
	padding: 2%;
	width: 75%;

}

.biography-right {
	position: relative;
	display: flex;
	width: 25%;

}

.biography-right-photo {
	width: 100%;
}

.biography-right-photo img {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;

}

.biography-right-decoration {
	width: 25%;
	height: 100%;
	background-color: rgb(15, 83, 191);
}

.biography-left-text{
	padding-left: 6%;
}

.biography-left-title h2 {
	font-size: 8.5rem;
	margin: 0;
}

.biography-left-quote p {
	font-size: .8rem;
	font-style: italic;
	margin-top: 68px;
	padding-left: 6%;
}

/* INFLUENCES */

#influences {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(15, 83, 191);
}

.container-influences {
	display: flex;
	width: 100vw;
	height: 100vh;
	padding-top: 5%;

}

.influences-left {
	display: flex;
	flex-direction: column;
	padding: 2%;
	width: 75%;

}

.influences-left-title h2 {
	font-size: 8.5rem;
	margin: 0;
	color: white;
}

.influences-left-text p {

	color: white;
	padding-left: 6%;
}

.influences-left-quote p {
	font-size: .8rem;
	font-style: italic;
	color: white;
	margin-top: 68px;
	padding-left: 6%;
}

.influences-right {
	display: flex;
	position: relative;
	width: 25%;

}

.influences-right-decoration img {
	width: 100%;
	height: 51%;
	object-fit: cover;
}



/* ICONIC WORKS */

#iconic-works {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
}

.container-iconic-works {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	margin-top: 2%;
	padding: 5% 2%;
	margin-left: 11%;
}

.main-content-table {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 10px 10px;
	grid-template-areas:
		"w1 w1 w1 w4 w4 w4 w5 w5 w5 w8 w8 w8"
		"w1 w1 w1 w4 w4 w4 w5 w5 w5 w8 w8 w8"
		"w1 w1 w1 w4 w4 w4 w5 w5 w5 w8 w8 w8"
		"w2 w2 w2 w3 w3 w3 w5 w5 w5 w8 w8 w8"
		"w2 w2 w2 w3 w3 w3 w5 w5 w5 w8 w8 w8"
		"w2 w2 w2 w3 w3 w3 w6 w6 w6 w7 w7 w7"
		"w2 w2 w2 w3 w3 w3 w6 w6 w6 w7 w7 w7"
		"w2 w2 w2 w3 w3 w3 w6 w6 w6 w7 w7 w7";
	min-height: 400px;
	max-width: 1100px;

}

.tit {
	padding-left: 2%;
}

.tit h2 {
	font-size: 8.5rem;
	margin: 0;
	color: white;
	margin-left: -15%;
}


.w1 {
	grid-area: w1;
	background-image: url("../img/w1.jpg");
}

.w2 {
	grid-area: w2;
	background-image: url("../img/w2.jpg");


}

.w3 {
	grid-area: w3;
	background-image: url("../img/w3.jpg");


}

.w4 {
	grid-area: w4;
	background-image: url("../img/w4.jpg");


}

.w5 {
	grid-area: w5;
	background-image: url("../img/w5.jpg");


}

.w6 {
	grid-area: w6;
	background-image: url("../img/w6.jpg");


}

.w7 {
	grid-area: w7;
	background-image: url("../img/w7.jpg");


}

.w8 {
	grid-area: w8;
	background-image: url("../img/w8.jpg");


}

.w1,
.w2,
.w3,
.w4,
.w5,
.w6,
.w7,
.w8 {
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	display: flex;
	align-items: end;
	justify-content: center;
}

.w1 a,
.w2 a,
.w3 a,
.w4 a,
.w5 a,
.w6 a,
.w7 a,
.w8 a {
	text-decoration: none;
	display: block;
	min-width: 100%;
	height: 100%;
}

.w1-txt,
.w2-txt,
.w3-txt,
.w4-txt,
.w5-txt,
.w6-txt,
.w7-txt,
.w8-txt {
	display: flex;
	opacity: 0;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 1);
	border-radius: 10px;
	width: 100%;
	height: 100%;
	transition: background-color 1.5s ease;
	transition: opacity 1.5s ease;
}

.w1-txt>p,
.w2-txt>p,
.w3-txt>p,
.w4-txt>p,
.w5-txt>p,
.w6-txt>p,
.w7-txt>p,
.w8-txt>p {
	font-size: 1.1rem;
	font-weight: bolder;
	text-transform: uppercase;
	color: white;
	text-align: center;
}


.w1:hover,
.w2:hover,
.w3:hover,
.w4:hover,
.w5:hover,
.w6:hover,
.w7:hover,
.w8:hover {

	/* REVISAR ERROR */
	.w1-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w2-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w3-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w4-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w5-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w6-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w7-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w8-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}
}

/* WORKS */

#works {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.container-works {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	margin-top: 2%;
	padding: 5% 2%;
	margin-left: 11%;
}


.main-content-table-2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 10px 10px;
	grid-auto-flow: row;
	grid-template-areas:
		"w9 w12 w13 w16"
		"w9 w11 w13 w15"
		"w10 w11 w14 w15";

	min-height: 400px;
	max-width: 1100px;
}


.tit-2 {
	padding-left: 2%;
}

.tit-2 h2 {
	font-size: 8.5rem;
	margin: 0;
	color: black;
	margin-left: -15%;
}

.w9,
.w10,
.w11,
.w12,
.w13,
.w14,
.w15,
.w16 {
	display: flex;
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	/* align-items: end; */
	justify-content: center;
	/* align-items: center; */
}



.w9 {
	grid-area: w9;
	background-image: url("../img/w9.jpg");

}

.w10 {
	grid-area: w10;
	background-image: url("../img/w10.jpg");
}

.w11 {
	grid-area: w11;
	background-image: url("../img/w11.jpg");
}

.w12 {
	grid-area: w12;
	background-image: url("../img/w12.jpg");
}

.w13 {
	grid-area: w13;
	background-image: url("../img/w13.jpg");
}

.w14 {
	grid-area: w14;
	background-image: url("../img/w14.jpg");
}

.w15 {
	grid-area: w15;
	background-image: url("../img/w15.jpg");
}

.w16 {
	grid-area: w16;
	background-image: url("../img/w16.jpg");
}


.w9 a,
.w10 a,
.w11 a,
.w12 a,
.w13 a,
.w14 a,
.w15 a,
.w16 a {
	text-decoration: none;
	display: block;
	min-width: 100%;
	height: 100%;
}

.w9-txt,
.w10-txt,
.w11-txt,
.w12-txt,
.w13-txt,
.w14-txt,
.w15-txt,
.w16-txt {
	display: flex;
	opacity: 0;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 1);
	border-radius: 10px;
	width: 100%;
	height: 100%;
	transition: background-color 1.5s ease;
	transition: opacity 1.5s ease;
}

.w9-txt>p,
.w10-txt>p,
.w11-txt>p,
.w12-txt>p,
.w13-txt>p,
.w14-txt>p,
.w15-txt>p,
.w16-txt>p {
	font-size: 1.1rem;
	font-weight: bolder;
	text-transform: uppercase;
	color: white;
	text-align: center;
	padding: 0;
	margin: 0;
}


.w9:hover,
.w10:hover,
.w11:hover,
.w12:hover,
.w13:hover,
.w14:hover,
.w15:hover,
.w16:hover {
	.w9-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w10-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w11-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w12-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w13-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w14-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w15-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.w16-txt {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

}


/* CONTACT */

#contact {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(15, 83, 191);
}

.container-contact {
	display: flex;
	justify-content: center;
	width: 90vw;
	height: 100vh;
	padding-top: 10%;
}


.contact-info-text ul li {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 4% auto;
	color: white;
	font-family: monospace;

}

.contact-form-container {
	display: flex;
	flex-direction: column;
}

.contact-info,
.contact-form {
	display: flex;
	flex-direction: column;

}

.contact-info {
	display: flex;
	align-items: end;
	width: 50%;
	padding-right: 4%;
}

.contact-form {
	width: 40%;
}

.contact-info h3,
.contact-form-title h3 {
	font-size: 2rem;
}

.contact-info-text p {
	line-height: 1.8rem;
}

.contact-info h3,
.contact-form-title h3,
.contact-info p,
.contact-info>li {
	color: white;
}

::placeholder {
	color: black;
}



/* FORMATO DE LOS INPUTS  mail[type=text]*/
input[type=text] {
	padding: 10%;
	border: 1px solid rgb(15, 83, 191);
	background-color: white;
	color: black;
	font-weight: lighter;
}

/* TAMAÑO AL AREA DE TEXTO */
#text-area {
	width: 23rem;
	height: 8rem;
}

/* ANCHO DE LOS CAMPOS DEL FORMULARIO */
.contact-form-field {
	width: 23rem;
	margin: 5% auto;

}

#mail {
	padding: 10%;
	font-family: monospace;
}

input[type=submit] {
	padding: 10%;
	width: 10rem;
	background-color: white;
	border: 1px solid black;
}

#form-button-send:hover {
	background-color: rgb(15, 83, 191);
	border: 1px solid white;
	color: white;
}

/* FOOTER */

footer {
	background-color: red;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	height: 25vh;

}

.footer-social-links {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	width: 40%;
}

.link-social-icono {
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-menu-links {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 60%;
}

.footer-menu-links ul {
	display: flex;
	padding: 0;
	align-content: space-around;
	list-style: none;
}

.footer-menu-links ul li {
	margin: 0 20px;
	display: block;
}

.footer-menu-links ul li a {
	text-decoration: none;
	padding: 10px;
	color: white;
}


.footer-menu-links ul li a:hover {
	background-color: black;
	color: white;
	border-radius: 5px;
}

.footer-created-by {
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-created-by span {
	color: white;
	font-style: italic;
	padding-left: 10px;
}