@font-face {
	font-family: 'Raleway Thin';
	font-style: normal;
	src: url("rsc/fonts/Raleway/Raleway-Thin.woff2") format("woff2");
	font-weight: 100;
}
@font-face {
	font-family: 'Raleway ExtraLight';
	font-style: normal;
	src: url("rsc/fonts/Raleway/Raleway-ExtraLight.woff2") format("woff2");
	font-weight: 200;
}
@font-face {
	font-family: 'Raleway Light';
	font-style: normal;
	src: url("rsc/fonts/Raleway/Raleway-Light.woff2") format("woff2");
	font-weight: 300;
}
@font-face {
	font-family: 'Raleway Regular';
	font-style: normal;
	src: url("rsc/fonts/Raleway/Raleway-Regular.woff2") format("woff2");
	font-weight: 400;
}
@font-face {
	font-family: 'Raleway Medium';
	font-style: normal;
	src: url("rsc/fonts/Raleway/Raleway-Medium.woff2") format("woff2");
	font-weight: 500;
}
@font-face {
	font-family: 'Raleway SemiBold';
	font-style: normal;
	src: url("rsc/fonts/Raleway/Raleway-SemiBold.woff2") format("woff2");
	font-weight: 600;
}
@font-face {
	font-family: 'Raleway Bold';
	font-style: normal;
	src: url("rsc/fonts/Raleway/Raleway-Bold.woff2") format("woff2");
	font-weight: 700;
}
@font-face {
	font-family: 'Raleway ExtraBold';
	font-style: normal;
	src: url("rsc/fonts/Raleway/Raleway-ExtraBold.woff2") format("woff2");
	font-weight: 800;
}

@font-face {
	font-family: 'ChivoMono Thin';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-Thin.woff2") format("woff2");
	font-weight: 100;
}
@font-face {
	font-family: 'ChivoMono ExtraLight';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-ExtraLight.woff2") format("woff2");
	font-weight: 200;
}
@font-face {
	font-family: 'ChivoMono Light';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-Light.woff2") format("woff2");
	font-weight: 300;
}
@font-face {
	font-family: 'ChivoMono Regular';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-Regular.woff2") format("woff2");
	font-weight: 400;
}
@font-face {
	font-family: 'ChivoMono Medium';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-Medium.woff2") format("woff2");
	font-weight: 500;
}
@font-face {
	font-family: 'ChivoMono SemiBold';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-SemiBold.woff2") format("woff2");
	font-weight: 600;
}
@font-face {
	font-family: 'ChivoMono Bold';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-Bold.woff2") format("woff2");
	font-weight: 700;
}
@font-face {
	font-family: 'ChivoMono ExtraBold';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-ExtraBold.woff2") format("woff2");
	font-weight: 800;
}
@font-face {
	font-family: 'ChivoMono Black';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-Black.woff2") format("woff2");
	font-weight: 900;
}
@font-face {
	font-family: 'ChivoMono';
	font-style: normal;
	src: url("rsc/fonts/ChivoMono/ChivoMono-VariableFont_wght.woff") format("woff");
}



body {
	padding:0px;
	margin: 0px;
	font-size: 16px;
}

/* Fonts styles */

	p {
		font-family: 'Raleway Regular', Sans-serif;
		font-size: 1em;
		font-weight: 400;
		letter-spacing: normal;
		line-height: normal;
	}

	h1 {
		font-family: 'Raleway Light', Sans-serif;
		font-size: 2em;
		font-weight: 300;
		letter-spacing: normal;
		line-height: normal;
	}

	main h1 {
		font-size: 1.5em;
	}

	@media (max-width: 440px) {
		h1 {font-size: 1.5em;}
	}

	h2 {
		font-family: 'ChivoMono', monospace;
		font-size: 1em;
		font-weight: 400;
		letter-spacing: normal;
		line-height: normal;
		margin-block-start: 0.5em;
		margin-block-end: 0.5em;
	}

	nav button{
		font-family: 'ChivoMono', monospace;
		font-size: 1em;
		font-weight: 400;
		letter-spacing: normal;
		line-height: normal;
	}

	a {
		text-decoration: none;
		color: black;
	}

	footer p{
		font-family: 'ChivoMono', monospace;
		font-size: 1em;
		font-weight: 400;
		letter-spacing: normal;
		line-height: normal;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

	main ul {
		font-family: 'Raleway Regular', Sans-serif;
		font-size: 1em;
		font-weight: 400;
		letter-spacing: normal;
		line-height: normal;
		list-style-type: none;
		padding: 0px;
		margin-block-start: 0em;
		margin-block-end: 2em;
	}

/* Main sections : header, main and footer */
/* Section sizes*/

	header {
		background-color: white;
		padding-right: 8%;
		padding-left: 8%;
		padding-top: 5em;
		padding-bottom: 2em;
		margin-bottom: 0px;;
	}

	main {
		background-color: white;
		padding-right: 8%;
		padding-left: 8%;
		padding-top: 1em;
		padding-bottom: 1em;
	}

	footer {
		background-color: white;
		padding-right: 8%;
		padding-left: 8%;
		padding-bottom: 1rem;
		padding-top: 3rem;
	}

/* HEADER ELEMENTS */

	header .head {
		background-color: white;
		align-content: end;
	}

	h1 {
		padding-bottom: 0px;
		padding-top: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.head h2 {
		padding-bottom: 0px;
		margin-bottom: 0px;
	}

	nav {
		background-color: white;
		align-content: end;
	}

	nav ul{
		list-style: none;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 2em;
		margin-bottom: 0px;
	}

	nav li{
		display: inline-block;
		list-style: none;
		margin-right: 1.6em;
		margin-left: 0px;
	}

	nav button {
		border-width: 0px;
		background-color: white;
		border-bottom: 0.1rem solid white;
		margin-top: 0.5em;
		padding: 0px;
	}


/* MAIN ELEMENTS */

	/* Project container */

	.projects-container {
		display: grid;
		align-content: start;
		justify-content: center;
		padding-top: 1em;
		padding-bottom: 1em;
		gap: 1.5em;
	}

	.projects-container .project-box {
		background-color: white;
		min-width: 200px;
		max-width: 600px;
		overflow: hidden;
	}

	.projects-container .project-box figure {
		padding: 0px;
		margin: 0px;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.projects-container .project-box figure ul {
		position: absolute;
		padding: 0px;
		margin: 0px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.projects-container .project-box ul li {
		padding: 0px;
		margin: 0.5em;
	}

	.project-box img {
		width: 100%;
		z-index: 1;
	}

	/* Section */

	main section {
		padding-top: 1em;
		padding-bottom: 1em;
		align-content: start;
	}

	.details-info {
		display: flex;
		margin-top: 2em;
		justify-content: space-between;
	}

	.content-details ul {
		margin-right: 0px;
		margin-block-end: 1em;
		width: 40%;
	}

	iframe {
		width: 100%;
		height: 100%;
		overflow-clip-margin: content-box;
		overflow: clip;
		border-style: inset;
		border-color: initial;
		border-image: initial;
	}

	.video-box {
		width: 100%;
		aspect-ratio: 16/9;
	}

	.main-content img {
		width: 100%;
		height: 100%;
	}


/* FOOTER ELEMENTS */

	/* Botón volver arriba */

	footer .button-section {
		width: 100%;
		padding: 0px;
		display: flex;
		justify-content: center;
	}

	.boton-volver-arriba {
		background-color: white;
		color: black;
		padding: 5px;
		border: none;
		cursor: pointer;
		border-radius: 50%;
		width: 3em;
		height: 3em;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0.1em 0.3em rgba(0, 0, 0.2, 0.2);
	}

	.boton-volver-arriba:hover{
		box-shadow: 0 0.1em 0.3em rgba(0, 0, 0.2, 0.2);
}


/* RESPONSIVE DESIGN */

	/* Responsive header */

	@media (width > 1000px) {
		header {display: flex; justify-content: space-between;}
	}


	/* Responsive project container */

	@media (min-width: 200px) {
		.projects-container { grid-template-columns: repeat(1, 1fr);}
	}

	@media (min-width: 700px) {
		.projects-container { grid-template-columns: repeat(2, 1fr); }
	}

	@media (min-width: 1200px) {
		.projects-container { grid-template-columns: repeat(3, 1fr); }
	}

	/* Responsive section */

	@media (min-width: 1000px) {
		main section {display: flex; justify-content: space-between;}
		.main-content {width: 60%;}
		.content-details {width: 30%; display: block;}
		.content-details ul {width: 100%; margin-block-end: 2em;}
		.details-info {display: block; margin-top: 0px;}

	
	}

/* HOVER EFFECTS */

	/* Hover button effect */ 

	button:hover {
		transition-timing-function: ease-in-out;
		transition: all 0.3s;
		border-bottom: 0.1rem solid black;
	}

	/* Hover image effect */

	.project-image-descr:hover img{
		transition-timing-function: ease-in-out;
		transition: all 0.5s;
		filter: brightness(50%);
	}

	.project-image-descr ul{
		font-family: 'ChivoMono', monospace;
		font-size: 1em;
		font-weight: 400;
		letter-spacing: normal;
		line-height: normal;
		color: white;
		text-align: center;
		list-style-type: none;
		opacity: 0%;
	}

	.project-image-descr:hover ul{
		transition-timing-function: ease-in-out;
		transition: all 0.5s;
		opacity: 100%;
	}