/*=============================================
=            General Styling           =
=============================================*/

:root {
	--bkgnd-color: #313131;
	--btn-color: #ca3e47;
	--box-color: #414141;
	--dflt--color: #525252;
	--font-color: #fafafa;
	--bkgnd-gradient: linear-gradient(60deg, #29323c 0%, #485563 100%);
	font-size: 62.5%;
	--basic-font: 'Montserrat', system-ui, -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	scroll-behavior: smooth;
}

body {
	/* Add fonts */
	font-family: var(--basic-font); /* wght@200;400;600;900 */
	line-height: 1.15;
	font-size: 1.6rem;
	color: var(--font-color);
	min-height: 100%;
}

.container {
	display: flex;
	flex-direction: column;
	max-width: 2250px;
	margin: 0 auto;
	background-image: var(--bkgnd-gradient);
}

.main__content {
	flex: 1 0 auto; /* To keep the foot on place */
}

.responsiveImg {
	max-width: 100%;
}

.subTitles {
	text-align: center;
	margin-bottom: 1em;
	font-weight: 600;
	font-size: clamp(2.45rem, calc(12px + 2.8vw), 3.15rem); /*Using clamp in order to size different viewports */
	line-height: 1.1;
	min-width: 30rem;
}

a,
a:link,
a:visited {
	text-decoration: none;
}

/*=====  End of Section comment block  ======*/

/*=============================================
=           Header            =
=============================================*/

header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	height: 5rem;
	top: 0;
	right: 0;
	width: 100%;
	transition: top 0.5s;
	background-color: #dcd9d4;
	background-color: #dcd9d4;
	background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
	box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.75);
	z-index: 100;
}

/* Navgation style */
nav {
	display: flex;
	align-items: center;
	max-width: 600px;
	justify-content: space-around;
	font-size: 1.7rem;
	font-weight: 400;
	text-transform: uppercase;
}

nav a {
	display: block;
	color: var(--bkgnd-color);
	padding: 0.5em;
	margin: 0.5em 0 0.5em 0.9em;
}

nav a:hover {
	color: #ca3e47;
	text-decoration: underline;
}

/*=====  End of Section   ======*/

/*=============================================
=           Hero Section          =
=============================================*/

.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	word-spacing: normal;
	margin-top: 3rem;
	padding-left: 5rem;
}

.avatar {
	width: 30rem;
}

.avatar img {
	border-radius: 50%;
}

.avatarHidden {
	display: hidden;
}

.middle-line {
	max-height: 20em;
	min-height: 18em;
	width: 2px;
	background-color: var(--font-color);
	margin: 0 2em 0 2em;
}

.slogan {
	padding: 2rem;
	max-width: 60rem;
	min-width: 7rem;
	min-height: 20%;
}

.slogan h1 {
	font-size: 6rem;
}

.specificWordStyle {
	color: var(--btn-color);
}

h1 {
	font-size: 6.5rem;
	line-height: 1.1;
	font-family: 'Big Shoulders Text', cursive, sans-serif; /* Different font family */
}

.sloganMty {
	font-size: clamp(1.45rem, calc(12px + 2.8vw), 2.15rem); /*Using clamp in order to size different viewports */
	line-height: 1.1;
	font-weight: 400;
}

/* Icons style */
.icons {
	margin-top: 1em;
}

.fa {
	padding: 0.3em;
	font-size: 2.5rem;
	text-align: center;
	text-decoration: none;
	border-radius: 15%;
	background: var(--bkgnd-color);
	color: white;
	transition: 0.6s;
}

.fa:nth-last-child(-n + 3) {
	margin-left: 0.2em;
}

.fa-linkedin:hover {
	background: #3b5998;
	color: white;
}

.fa-github:hover {
	background: #000000;
	color: white;
}

.fa-youtube:hover {
	background: #b93c3c;
	color: white;
}

.fa-reddit:hover {
	background: #d34904;
	color: white;
}

/*=====  End of Section   ======*/

/*=============================================
=           Acerca           =
=============================================*/

.about__sctn {
	background-color: var(--font-color);
	color: var(--bkgnd-color);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4em 0 8em 0;
}

.about__items {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	letter-spacing: normal;
	max-width: 85.5rem;
	min-width: 35rem;
	padding: 4em;
}

.about__items p {
	font-size: clamp(1.61rem, calc(12px + 0.84vw), 2rem);
	line-height: 1.9;
	margin-top: 2em;
	text-align: justify;
	text-justify: distribute;
	word-spacing: 1px;
}

/*=====  End of Section   ======*/

/*=============================================
=           Aplicaciones         =
=============================================*/
.apps__sctn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5em 0 10em 0;
}

.apps__flex {
	width: 65%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	position: relative;
}

.apps__flex h3 {
	width: 100%;
}

.flexHeight {
	min-height: 35rem;
	max-height: 45rem;
}

.imgOne {
	width: 100%;
	background: #fff url(../images/demo-horiseon.png) top center/cover no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	box-shadow: 9px 13px 19px 0px rgba(0, 0, 0, 0.75);
	position: relative;
}

.imgOne h4 {
	color: var(--font-color);
	font-size: clamp(2.25rem, calc(12px + 1vw), 3.5rem);
	line-height: 1.1;
	font-weight: 400;
	text-align: center;
	border-radius: 15px;
	width: 100%;
	height: 100%;
	position: absolute;
	transition: 1s;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* TODO Blur the imgOne box when hovering */

.imgOne h4 a {
	visibility: hidden;
}

.imgOne h4:hover a {
	visibility: visible;
}

.imgOne h4:hover {
	background: rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(15px);
}

.apps__sctn h4 a:visited,
.apps__sctn h4 a:link {
	color: var(--font-color);
}

.flexStyle {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 1 auto;
	background-color: rgb(177, 177, 177);
	font-size: clamp(2.25rem, calc(12px + 1vw), 3.5rem);
	color: var(--bkgnd-color);
	box-shadow: 9px 13px 19px 0px rgba(0, 0, 0, 0.75);
	transition: 0.5s;
	border-radius: 15px;
	padding: 2rem;
}

.apps__flex h4:not(.imgOne):hover {
	background: rgba(30, 30, 30, 0.46);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(6.4px);
	-webkit-backdrop-filter: blur(6.4px);
	color: var(--font-color);
}

.imgTwo {
	background: #fff url(../images/synesthesia-app.png) center top/cover no-repeat;
}

/*=====  End of Section   ======*/

/*=============================================
=           Footer          =
=============================================*/

footer {
	background-color: var(--font-color);
	color: var(--bkgnd-color);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 3em;
}

.footer__items {
	font-size: clamp(1.375rem, calc(12px + 1.1vw), 1.65rem);
	font-weight: 600;
	text-align: center;
}

/*=====  End of Section   ======*/

/*=============================================
=           Footer          =
=============================================*/

@media screen and (max-width: 975px) {
	/* ! Media Queries: for hero section */
	.hero {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		padding: 6rem;
	}

	.middle-line {
		display: none;
	}

	.avatar img {
		width: 18rem;
	}

	.slogan h1 {
		font-size: 4.2rem;
	}

	.sloganMty {
		font-size: 1.5rem;
	}

	.avatar,
	.slogan h1,
	.sloganMty,
	.slogan .icons {
		text-align: center;
	}

	/* ICONS */
	.fa {
		padding: 0.7rem;
		font-size: 2.4rem;
		text-align: center;
		text-decoration: none;
		border-radius: 15%;
		background: var(--bkgnd-color);
		color: white;
		transition: 0.6s;
	}

	/* Media Queries: for acerca section */

	/* Footer */
	footer {
		background-color: var(--font-color);
		color: var(--bkgnd-color);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 3rem;
	}

	.footer__items {
		margin-top: 5rem;
	}

	@media screen and (max-width: 600px) {
		nav a {
			font-size: 1rem;
			font-weight: 400;
			text-transform: uppercase;
			transition: 0.6s;
		}
	}
}
/*=====  End of Section   ======*/