/* GLOBAL */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

body {
	background-image: linear-gradient(to bottom, rgba(188, 136, 231, 0.514), rgba(255, 255, 255, 0.514));
	min-height: 100vh;
	background-size: cover;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Header para desktop */
.header-nav {
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	transform: translateY(20px);
	padding-right: 10px;
	padding-left: 10px;
	width: 60%;
	color: #413a3a;

	& span {
		font-size: 20px;
		color: #b11bc5;
	}
}

/* Header para móvil */
@media screen and (max-width: 800px) {
	.header-nav {
		flex-direction: column;
		padding-bottom: 20px;
	}
}

.header-nav nav {
	display: flex;
	gap: 10px;

	& a {
		text-decoration: none;
		color: #692569;
	}
}

/* HOME */

/* Main */
main {
	width: 60%;
	margin: 0 auto;
	padding-top: 50px;
}

.container {
	display: grid;
	align-items: center;
	justify-content: center;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	gap: 24px;
}

/* Media query para pantallas de móvil */
@media screen and (max-width: 700px) {
	.container {
		grid-template-columns: 1fr;
	}
}

.sobremi {
	background-color: rgb(197, 219, 238);
	border-radius: 15px;
	padding: 10px 10px 10px 10px;
	min-height: 250px;
	max-height: 500px;
	box-shadow: 3px 8px 15px rgba(0, 0, 0, 0.1);

	& h3 {
		color: #2d405c;
	}

	& a {
		text-decoration: none;
	}
}

.container .sobremi img {
	border-radius: 100%;
	width: 200px;
	height: 200px;
	aspect-ratio: 16/9;
	display: block;
	margin: 0 auto;
}

.botica {
	background-color: #e4b4b4;
	border-radius: 15px;
	padding: 10px 10px 10px 10px;
	min-height: 250px;
	max-height: 500px;
	box-shadow: 3px 8px 15px rgba(0, 0, 0, 0.1);

	& h3 {
		color: #b65538;
	}

	& a {
		text-decoration: none;
	}
}

.container .botica img {
	border-radius: 100%;
	width: 200px;
	height: 200px;
	aspect-ratio: 16/9;
	display: block;
	margin: 0 auto;
}

.gatitos {
	background-color: #d4f1b8;
	border-radius: 15px;
	padding: 10px 10px 10px 10px;
	min-height: 250px;
	max-height: 500px;
	box-shadow: 3px 8px 15px rgba(0, 0, 0, 0.1);

	& h3 {
		color: #4d5e1f;
	}

	& a {
		text-decoration: none;
	}
}

.container .gatitos img {
	border-radius: 100%;
	width: 200px;
	height: 200px;
	aspect-ratio: 16/9;
	display: block;
	margin: 0 auto;
}

.ilustraciones {
	background-color: #e4b8f1;
	border-radius: 15px;
	padding: 10px 10px 10px 10px;
	min-height: 250px;
	max-height: 500px;
	box-shadow: 3px 8px 15px rgba(0, 0, 0, 0.1);

	& h3 {
		color: #6e2d74;
	}

	& a {
		text-decoration: none;
	}
}

.container .ilustraciones img {
	border-radius: 100%;
	width: 200px;
	height: 200px;
	aspect-ratio: 16/9;
	display: block;
	margin: 0 auto;
}

.youtube {
	background-color: #f4b8b8;
	border-radius: 15px;
	padding: 10px 10px 10px 10px;
	min-height: 250px;
	max-height: 500px;
	box-shadow: 3px 8px 15px rgba(0, 0, 0, 0.1);
	grid-column: 1 / -1;

	& h3 {
		color: #8b2020;
	}

	& a {
		text-decoration: none;
	}
}

.container .youtube img {
	border-radius: 100%;
	width: 200px;
	height: 200px;
	aspect-ratio: 16/9;
	display: block;
	margin: 0 auto;
}

.contacto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60%;
	margin: 0 auto;
	padding: 25px;

	& a {
		text-decoration: none;
	}
}

/* SOBRE MI - GATITOS */

.main {
	width: 60%;
	padding-top: 150px;
}

.introduccion {
	display: flex;
	flex-direction: row;
	gap: 40px;
	justify-content: center;
	align-items: center;

	& div img {
		width: 200px;
		height: 200px;
		border-radius: 100%;
	}
}

.ilustradora {
	color: rgba(76, 7, 133, 0.959);
	font-weight: bold;
}

.cuento {
	color: rgba(75, 58, 224, 0.959);
	font-weight: bold;
}

.juego {
	color: rgba(167, 30, 167, 0.808);
	font-weight: bold;
}

.intereses {
	display: flex;
	flex-direction: row;
	gap: 40px;
	justify-content: center;
	align-items: center;
	padding-top: 150px;

	& div img {
		width: 200px;
		height: 200px;
		border-radius: 100%;
	}
}

.creatividad {
	color: rgba(221, 13, 82, 0.808);
	font-weight: bold;
}

.aficciones {
	display: flex;
	flex-direction: row;
	gap: 40px;
	justify-content: center;
	align-items: center;
	padding-top: 150px;
	padding-bottom: 150px;

	& div img {
		width: 200px;
		height: 200px;
		border-radius: 100%;
	}
}

.entrevista {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;

	& img {
		border-radius: 25px;
	}
}