@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Coral+Pixels&family=Felipa&family=Julius+Sans+One&family=Just+Me+Again+Down+Here&family=Limelight&family=Mouse+Memoirs&family=Quicksand:wght@300..700&family=Quintessential&family=Splash&display=swap");
:root {
	--eri1    : #3b1650;
	--eri2    : #4d4d4d;
	--eri3    : #c21f80;
	--eri4    : #88ff8c;
	--eri5    : #e8e8e8;
	--eri6    : #060606;
	--eri7    : #6a0dad;
	--eri8    : #ff006e;
	--eri9    : #a3a3a3;
	--eri10   : #e4b1f4;
	--eire1   : #c9e4ff;
	--eire2   : #82aae9;
	--eire3   : #fff6f6;
	--eire4   : #f2d8e8;
	--eire5   : #b1e0c5;
	--eire6   : #f5e6cc;
	--eire7   : #f0a48f;
	--eire8   : #ffd6e0;
	--eire9   : #75aec0;
	--eire10  : #8a817c;
	--reyi1   : #1B1B1B;
	--reyi2   : #007FFF;
	--reyi3   : #0B0C10;
	--reyi4   : #B30E2A;
	--reyi5   : #a4bfd1;
	--reyi6   : #ff896c;
	--reyi7   : #FFD447;
	--reyi8   : #00A8FF;
	--reyi9   : #5C636E;
	--reyi10  : #1B263B;
	--juli1   : #caba96;
	--juli2   : #5C8374;
	--juli3   : #38556b;
	--juli4   : #602437;
	--juli5   : #BFC4C6;
	--juli6   : #F1EEE9;
	--juli7   : #54793f;
	--juli8   : #66461e;
	--juli9   : #255023;
	--juli10  : #4C5C68;
	--bibi1   : #f7adc7;
	--bibi2   : #f7f4f4;
	--bibi3   : #c79d7d;
	--bibi4   : #E7CBA9;
	--bibi5   : #F7B5A3;
	--bibi6   : #F6C6C6;
	--bibi7   : #b6173e;
	--bibi8   : #d4497f;
	--bibi9   : #a839be;
	--bibi10  : #C8C9A3;
	--mathy1  : #3B2F2F;
	--mathy2  : #556B2F;
	--mathy3  : #D8C4A4;
	--mathy4  : #501414;
	--mathy5  : #eb8274;
	--mathy6  : #4E342E;
	--mathy7  : #D7CCC8;
	--mathy8  : #2E4A36;
	--mathy9  : #9e2b2b;
	--mathy10 : #8D8C87;
	--vanes1  : #7FB77E;
	--vanes2  : #faf0c1;
	--vanes3  : #422b1b;
	--vanes4  : #F8F4E3;
	--vanes5  : #EAC435;
	--vanes6  : #A8BBA1;
	--vanes7  : #f1e09b;
	--vanes8  : #B78752;
	--vanes9  : #A9B8C0;
	--vanes10 : #ffce1b;
}

* {
	transition: all .2s;
}

body {
	background-color: var(--mathy2);
}

header {
	margin: 10px auto;
	background-image: url("../media/mainHeader.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding: 10%;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 50px;
	color: var(--vanes4);
	text-shadow: 0 0 25px var(--eire5);
}

header img {
	border-radius: 50%;
	width: 250px;
	padding: auto;
	margin: auto;
}

header h1{
	font-size: 40px;
	margin: 0;
}

nav {
	margin: 10px auto;
	background-color: var(--vanes5);
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

nav #logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: center;
}
#logo p {
	width: 60px;
	margin-right: 10px;
	font-weight: bolder;
}

#logo img {
	margin-left: 10px;
	width : 75px;
	height: 75px;
}

nav a {
	padding: 1.4%;
	color: var(--eri6);
	text-decoration: none;
}

nav #active {
	background-color: var(--eri6);
	color: var(--eri4);
}

nav a:hover {
	background-color: var(--eri6);
	color: var(--vanes10);
}

#active:hover {
	background-color: var(--eri6);
	color: var(--vanes8);
}

main {
	margin: auto;
	padding: 1%;
	background-color: var(--vanes3);
	color: var(--bibi2);
}

#logoEco {
	text-align: center;
}

#logoEco img {
	width: 250px;
	filter: drop-shadow(0 0 15px var(--vanes8));
	z-index: -99;
}

.ecoClub {
	margin: 1% auto;
	padding: 1%;
	background-color: var(--juli6);
	color: var(--reyi10)
}

.ecoClub h1 {
	font-size: 30px;
	padding: 0;
	margin: 0;
	margin-top: 25px;
}

.ecoClub h3 {
	font-size: 18px;
}

.ecoClub h1, h2, h3, h4, h5, h6, p, b, i, li, ul, ol {
	margin-left: 5px;
}

.ecoClub > .ecoClub {
    display: flex;
    align-items: center;
		flex-direction: row-reverse;
    gap: 16px;
    padding: 14px;
    box-sizing: border-box;
}

.ecoClub > .ecoClub p {
  flex: 1 1 auto;
  margin: 0;
  padding-right: 12px;
}

/* avatar a la derecha, tamaño fijo, recorte limpio (hombros) */
.ecoClub .avatar {
	width: 90px;
	height: 90px;
	overflow: hidden;
	border-radius: 50%;
	border: 2px solid;
	filter: drop-shadow(0 0 25px);
	flex: 0 0 auto;
	margin-left: auto; /* empuja el avatar a la derecha */
	display: block;
}

/* imagen dentro del contenedor: cover y posición para mostrar hombros */
.ecoClub .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
	transform: scale(1.75) translate(0px, 15px);
  display: block;
}
/* 1: Érika */

.érika {
	background-color: var(--eri1);
	color: var(--eri4);
}

.érika h1, h2 {
	font-family: splash;
}

/* 2: Eirene */

.eirene {
	background-color: var(--eire2);
	color: var(--eire3);
}

.eirene h1, h2 {
	font-family: Felipa;
}

/* 3: Ricardo */

.ricardo {
	background-color: var(--reyi10);
	color: var(--reyi6);
}

.ricardo h1, h2 {
	font-family: Bangers;
}

/* 4: Julián*/

.julián {
	background-color: var(--juli7);
	color: var(--juli6);
}

.julián h1, h2 {
	font-family: "Coral Pixels";
}

/* 5: Bianca */

.bianca {
	background-color: var(--bibi1);
	color: var(--bibi7);
}

.bianca h1, h2 {
	font-family: Just Me Again Down Here;
}

/* 6: Thiago */

.thiago {
	background-color: var(--mathy9);
	color: var(--mathy7);
}

.thiago h1, h2 {
	font-family: Julius Sans One;
}

/* 7: Vanessa */

.vanessa {
	background-color: var(--vanes10);
	color: var(--vanes3);
}

.vanessa h1, h2 {
	font-family: Mouse Memoirs;
}

#compromy {
	text-align: center;
}

#compromy iframe {
	width: 270px;
	height: 350px;
}

footer {
	margin: 10px auto;
	padding: 1%;
	background-color: var(--vanes5);
	color: var(--eri1);
}

h1, h2 {
	font-family: Limelight;
}

h3, h4, h5, h6 {
	font-family: Quintessential;
}

p, i, b, em, li, td, th, tr, footer, a {
	font-family: Quicksand;
	text-decoration: none;
}

a {
	color: var(--eri4);
	font-weight: bold;
}

nav a {
	font-weight: 400;
}

@media (min-width: 768px){
	header {
		margin: 10px auto;
		padding: 10%;
		gap: 50px;
	}

	header img {
		border-radius: 50%;
		width: 250px;
		padding: auto;
		margin: auto;
	}

	header h1{
		font-size: 40px;
		margin: 0;
	}

	nav {
		margin: 10px auto;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}

	nav #logo {
		display: flex;
		align-items: center;
		gap: 10px;
		text-align: left;
		padding: 1%;
	}

	#logo img {
		width : 50px;
		height: 50px;
	}

	.ecoClub h1 {
		font-size: 44px;
		padding: 0;
		margin: 0;
		margin-top: 25px;
	}
	
	.ecoClub h3 {
		font-size: 20px;
	}

	.ecoClub p {
		font-size: 20px;
	}

	nav a {
		padding: auto;
	}

	main {
		margin: auto;
		padding: 1%;
	}

	#compromy iframe {
		width: 650px;
	}

	footer {
		margin: 10px auto;
		padding: 1%;
	}
}

@media (min-width: 1024px){
	header {
		margin: 10px auto;
		padding: 1%;
		padding: 10%;
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 50px;
	}
	
	header img {
		border-radius: 50%;
		width: 250px;
		padding: auto;
		margin: auto;
	}

	header h1 {
		font-size: 75px;
		margin: 0;
	}

	nav {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
	}
	
	nav #logo {
		display: flex;
		align-items: center;
		text-align: left;
		padding: 0;
		margin: 0;
	}
	
	#nav img {
		margin: 0;
		width : 50px;
		height: 50px;
	}

	.ecoClub p {
		font-size: 18px;
	}
	
	#compromy iframe {
		width: 950px;
	}
}