@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Spartan:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gudea&family=Jura:wght@300;400;500;600;700&display=swap');

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

body{display:block;background: #ECECEC; font-family: 'Spartan', sans-serif;text-align: center;}

h1{color: #282828;font-family: 'Jura', sans-serif;font-size:4rem; margin: 1rem;}
h2{color: #4F4C4C;font-family: 'Jura', sans-serif;font-size:1.5rem;}
h3{color:#ECECEC;font-family: 'Jura', sans-serif;font-size: 2rem;font-weight: 700;}
h4{color:white;font-family: 'Jura', sans-serif;font-size: 1.5rem;font-weight: 700;}

.top{
	background: #282828;
	background: linear-gradient(70deg,#282828 0%, #386440 50%, #282828 100%);
	padding:1rem;
	text-align: center;
	border-radius: 5px;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

header nav a{
    color: #ECECEC;
    padding-left: 5rem;
    padding-right: 5rem;
    text-decoration:none;
    font-family: 'Spartan', sans-serif;font-weight: 800;
}

.titulos:hover{
	color:#282828;
	text-shadow: white 0px 0px 15px;
}

.inicio{
	display: flex;
	justify-content: center;
}

.avatar{
	margin: 1rem;
	border-style: solid;
	border-radius: 10rem;
	border:5px solid #386440;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.adriel{
	width: 300px;
	height: 300px;
	margin: 1rem;
	display: flex;
	justify-content: center;
}

.on{
	display: none;
}

.adriel:hover .off{ display: none;}

.adriel:hover .on{display: block;}

.diseñador{
	margin-top: 2rem;
}

.vn04{
	text-decoration: none;
	color: #4F4C4C;
}

.vn04:hover{
	text-shadow: black 0px 0px 15px;
}

.subtitulo{
	background: #282828;
	background: linear-gradient(70deg,#282828 0%, #386440 50%, #282828 100%);
	padding: 1rem;
	text-align: center;
	border-radius: 5px;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.columnas {display: flex; justify-content: space-around;color: #ECECEC;}
.columna1{background: linear-gradient(0deg,#282828 15%, #314534 85%, #386440 100%); width: 30%; border-radius: 5rem; margin: 25px;box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;}

.alumnos{
	font-size: 1.5rem;
	color:#282828;
	text-decoration:none;
}

.alumnos .negrita{font-weight:600;}

.alumnos:hover{
	text-shadow: #386440 0px 0px 15px;
}

.foto{
	margin-top: 1rem;
	border-style: solid;
	border-radius: 10rem;
	border:5px solid #386440;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	width: 150px;
	height: 150px;
}

.integrantes {
	display: flex; 
	justify-content: space-around;
}

.logos{
	display: center;
	justify-content: space-between;
    align-items: center;
    align-content: stretch;
    width: 450px; 
    height: 90px;
    margin-top: 1rem;
}

footer {
 	font-style: italic;
 	font-size: 0.7rem;
 	padding: 1rem;
 	color: grey;
 }