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

:root {
	--verdecito: #56cca3;
	--gris-claro: #b4b4b4;
}

html {
	height: 100%;
}

body {
	background: url('../img/bgimage2.jpg');
	background-size: cover;
	font-family: 'Open Sans', sans-serif;
}

li {
	list-style-type: none;
	font-size: 0.8rem;
	color: var(--gris-claro);
	padding-bottom: 0.4rem;
}
/*header start*/

header {
	display: flex;
	justify-content: space-around;
	padding: 0.7em;
	margin: 0.8em;
	top: 0;
}

h1 {
	letter-spacing: 0.1em;
	width: 50%;
	color: white;
	font-weight: 100;
}

.topnav {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.nav-link-div {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 50%;
}
.volver-div {
	width: 50%;
	display: flex;
	justify-content: center;
}

/* fin header */

.content {
	display: flex;
	justify-content: space-between;
	margin: 1.5rem;
	height: 50vh;
}

/* social buttons*/

a {
	text-decoration: none;
}

.social-box {
	width: 15%;
	float: left;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.fab {
	color: white;
	-webkit-transition: color, 1s;
	-moz-transition: color, 1s;
	-o-transition: color, 1s;
	transition: color, 1s;
}

.fab:hover {
	color: var(--verdecito);
}

/*main*/

.main-col {
	width: 80%;
	padding: 1rem;
	margin-top: 1rem;
}

.descripcion {
	color: var(--gris-claro);
	font-family: 'Open Sans', sans-serif;
	text-align: justify;
	width: 90%;
}

.descripcion-dos {
	font-size: 0.8rem;
}
.descripcion-dos.descripcion {
	margin-top: 1.5rem;
}

.niveltitulo {
	text-decoration: underline;
	color: var(--gris-claro);
	padding-bottom: 0.4rem;
}

.materias-aprobadas-container {
	display: flex;
}

.nivel {
	padding-right: 2rem;
}

/*finmain*/

/*footer*/

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	color: white;
	padding: 1rem;
	font-family: 'Raleway', sans-serif;
	font-size: 0.7rem;
	background-color: rgba(122, 122, 122, 0.123);
}

.footer-p {
	width: 60%;
}

.footer-div {
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-div > p > a {
	color: white;
	transition: color 1s ease-in-out;
}

.footer-div > p > a:hover {
	color: #56cca3;
}

/* todos los links adentro del header van a tener el letter spacing */
.nav-link-span {
	min-width: 33%;
	display: flex;
	justify-content: center;
}

.header-a {
	font-family: 'Open Sans', sans-serif;
	color: white;
	letter-spacing: 0.1em;
	-webkit-transition: letter-spacing, 0.5s;
	-moz-transition: letter-spacing, 0.5s;
	-o-transition: letter-spacing, 0.5s;
	transition: letter-spacing, 0.5s ease-in-out;
}

.header-a:hover {
	color: #56cca3;
	letter-spacing: 0.2em;
}