@import url(https://fonts.google.com/specimen/Exo+2?query=Exo);
@import url(https://fonts.google.com/specimen/Martel?query=Martel);

*{padding: 0%; margin:0%; box-sizing: border-box;}
body {background: black;}

/*header*/ 
header {background: black; text-align: center;margin-top: 2rem;}

header a {text-decoration: none; color:cornflowerblue; font-family: 'Exo'; font-size: 1rem;}

h1 {color:cornflowerblue; font-family: 'Exo'; font-size: 3rem;margin-top: 1 rem; margin-bottom: 1.5rem;}
h2 {color:cornflowerblue; font-family: 'Exo'; font-size: 2rem; font-weight:300; margin-top: 0.9rem; margin-bottom: 1rem;}

.fotoheader {border-radius: 50%; width: 50%; margin-top: 2rem; border-width: 0.3rem; border-style: solid; border-color: cornflowerblue;}

nav{background:rgb(51, 51, 156); padding:2%; font-family: 'Martel';}

nav a {text-decoration: none; background:rgb(51, 51, 156); color:  rgb(51, 255, 170) ; font-size: 1.5rem; padding-right: 4 rem; padding-left: 4rem;text-align: center;}

.inicio:hover {font-weight: 600;}
.landing:hover {font-weight: 600;}
.plan:hover {font-weight: 600;}
.mapa:hover {font-weight: 600;}
.app:hover {font-weight: 600;}
.catedra:hover {font-weight: 600;}


/* seccion 1 materias */ 

h2 {color: rgb(51, 255, 170); font-family: 'Martel'; font-size: 2rem; font-weight:200; margin: 5rem; text-align: center;}

ul {list-style-type: none; padding: 0%}


.numero {font-size: 2.4rem;}


.materias-1 h4 {color:  rgb(51, 255, 170) ;font-family: 'Martel', sans-serif; font-weight: 500; font-size: 1.2rem;margin-bottom: 1rem;
    justify-items: center;align-content: center;}

.materias-1 { color: rgb(59, 126, 228); font-family: 'Martel'; font-weight:400; font-size:1rem; padding: 2.5rem;border-width: 0.1rem; border-style: solid; border-color: seashell; display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content:center;
    justify-items:center;
	align-items:center;
	align-content:center; box-sizing: border-box; margin: 1.5rem;}
.materias-2 {background: rgb (0,0,0); color:rgb(59, 126, 228); font-family: 'Martel'; font-weight: 400; font-size: 1rem; padding:0.5rem; border-width: 0.1rem; border-style: solid; border-color: seashell;box-sizing: border-box; margin: 1rem;}
.materias-3 {background: rgb (0,0,0); color:rgb(59, 126, 228); font-family: 'Martel'; font-weight: 400; font-size: 1rem; padding:0.5rem; border-width: 0.1rem; border-style: solid; border-color: seashell;box-sizing: border-box; margin: 1.5rem;}
.materias-4{background: rgb (0,0,0); color:rgb(59, 126, 228); font-family: 'Martel'; font-weight: 400; font-size: 1rem; padding: 0.5rem; border-width: 0.1rem; border-style: solid; border-color: seashell;box-sizing: border-box; margin: 1.5rem;} 
.materias-5{background: rgb (0,0,0); color:rgb(59, 126, 228); font-family: 'Martel'; font-weight: 400; font-size: 1rem; padding:0.5rem; border-width: 0.1rem; border-style: solid; grid: 200px; border-color: seashell; box-sizing: border-box; margin: 1.5rem;}
	
.menu {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: baseline;
	align-content: space-around; font-size: 1rem}


/* seccion 2 Integrantes */
.equipo {margin: 4rem;margin-top: 7rem;margin-bottom: 4rem; color: rgb(51, 255, 170);font-family: 'Exo', serif;font-weight: 700;  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	align-content: space-around; }

.seccion2 {text-decoration:none; text-align:center; color: rgb(51, 255, 170); font-family: 'Exo'; margin: 4rem; margin-left:3rem; font-size: 0.5rem; margin-bottom: 2rem; 
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
	align-content: center;}
    
    .seccion2 a {text-decoration: none; text-align:center; color: rgb(51, 255, 170) ; font-family: 'Exo'; font-size: 1.5rem; padding-right: 3rem; padding-left: 8.5rem;}

    .perfil1:hover {font-weight: 100;}
    .perfil3:hover {font-weight: 100;}

    .perfil-1 {border-radius: 55%; width: 55%; margin-top: 1rem; margin-right:3rem; border-width: 0.2rem; border-style: solid; border-color: cornflowerblue;}
    .perfil-3 {border-radius: 50%; width: 50%; margin-top: 1rem; margin-right:3rem;border-width: 0.2rem; border-style: solid; border-color: cornflowerblue;}
    img{
        display:block;
        margin:auto;
        }


/*seccion 3 datos obligatorios */ 

.datos-obligatorios {background: rgb(59, 126, 228) ; padding-top: 2rem; padding-bottom: 1rem; font-family:'Martel'; width:100%; padding-left: 8rem; padding-right: 8rem; padding-bottom: 3rem; padding-top: 3rem;}

.datos {font-size:0.9rem; margin-bottom: 0.6rem; margin-top: 0.6rem;}

.datos-obligatorios p {font-size:300; font-size: 0.9rem;}

.uba-1 {width:100%;}

footer {background: black;}
footer p {color:rgb(59, 126, 228); font-size: 0.9rem; text-align: center; padding:2rem;}


/* VERSIÓN DESKTOP */

@media (min-width:576px) {

    h1 { font-size: 2.7rem; }
    
    h2 {font-size: 1.5rem;}
    
    .fotoheader {width: 15%; }
        
    section { 
        display: flex; 
        justify-content:center;
        width: 90%;
        height:100%;
        margin: 1rem;
        justify-items:center;
        align-content: center;
    }
    
    .materias-1 { color: rgb(59, 126, 228); font-family: 'Martel'; font-weight:400; font-size:1rem; padding: 1.5rem;border-width: 0.1rem; border-style: solid; border-color: seashell;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        justify-items:center;
        align-items: stretch;
        align-content:center; margin: 1.5rem;}

    .primero {padding-right: 1.2rem; padding-left: 1.2rem;}
    
    .segundo {padding-right: 0.4rem; padding-left: 0.4rem;}
    
    .tercero {padding-right: 0.3rem; padding-left: 0.3rem;}
    
    .a1 {padding-right: 5rem; padding-left: 3rem;}
    
    .a3 {padding-right: 2rem; padding-left: 2rem;}
}