body {
	background: var(--accent);
    color: var(--violeta-oscuro);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
	color: var(--violeta-oscuro);
}
a:hover {
		color: var(--violeta-oscuro);
		font-weight: 500;
	}

h5 {
    margin-top: 3rem;
}

header {
	background: var(--violeta-claro);
	background-image: url(/images/hero-image.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 200px;
	position: relative;

	.container {
		height: 100%;
		padding-top: 0;
		padding-bottom: 0;

		img {
			width: 250px;
			height: auto;
			position: absolute;
			bottom: -26px;
		}
	}
}

select {
	float: right;
	margin-top: 1rem;
}

.container {
	padding-top: 5rem;
	padding-bottom: 6rem;
}

.back-button {
	background: var(--accent);
	padding: 1rem 0;
	margin-bottom: 2rem;
	position: sticky;
	top: 0;
	z-index: 2;

	a {
		display: flex;
		align-items: center;
		gap: 1rem;
		text-decoration: none;
		font-size: 1.25rem;
        width: fit-content;

		i {
			font-size: 1.5rem;
		}
	}

}

.team {
	margin-top: 4rem;
}

.team-members {
	display: flex;
	flex-wrap: wrap;
	/* justify-content: center; */
	gap: 4rem;
	margin-top: 3rem;

	.team-member {
		display: flex;
		flex-direction: column;
		align-items: center;
        gap: 1rem;

		h6, p {
			margin-bottom: 0rem;
			text-align: center;
		}

		p {
			font-size: 1rem;
		}

		img {
			width: 100px;
			height: 100px;
			border-radius: 100%;
			object-fit: cover;
			border: 2px solid var(--violeta-oscuro);
			box-shadow: 2px 2px 0 var(--secondary-700);
		}
	}
}

@media (max-width: 750px) {
	header {
		height: 100px;

		img {
			width: 140px !important;
			bottom: -15px !important;
		}
	}

	h1 {
		font-size: 3rem;
	}

    .team-members {
        gap: 2rem;
    }

    .team-member {
        flex-direction: row !important;

		h6, p {
			text-align: left !important;
		}

        img {
            width: 80px !important;
            height: 80px !important;
        }
    }
}