@import url('https://fonts.googleapis.com/css2?family=Saira:wght@200;400;600;800&display=swap');


* { padding: 0; margin: 0; box-sizing: border-box; transition: 0.8s all; }



/* Estilos Generales */ 

body { font-family: 'Saira', sans-serif; } 

header { background: #000000; }
h1 {color: #4b75c3; text-align: center; font-size: 3rem; font-weight: 600;}




/* Sección General */ 

main section { background: #000000; padding: 1rem; color: #ffffff; }
main section article { padding: 1rem; }




/* Columnas */ 

.foto {width:230px; height: 230px; border-radius: 100%; border: 0.3rem solid; border-color: #4b75c3; } 
.columna-1 {width: 100%; text-align: center; }
.columna-2 {width: 100%; text-align: left; }
.columna-3 {width: 100%; text-align: left; }
.columna-4 {width: 100%; text-align: left; list-style: none;}

.columna-1 h2 {font-weight: 600;}
.columna-1 h3 a {color: #4b75c3; font-weight: 600; font-size: 1.3rem; text-decoration: none;}
.columna-1 h3 a:hover {color: #ffffff; }

.columna-2 h3 {font-weight: 200; font-size: 1.3rem; }
.columna-2 h4 {font-weight: 600; color: #5f5858; font-size: 1.3rem; line-height: 2.5rem; }
.columna-2 p {font-weight: 400; font-size: 1.2rem; border: 0.02rem solid; border-color: #5f5858; padding-left: 0.5rem; }

.columna-3 h4 {font-weight: 600; color: #5f5858; font-size: 1.3rem; line-height: 2.5rem; padding-top: 1rem; }
.columna-3 p {font-weight: 400; font-size: 1.2rem; border: 0.02rem solid; border-color: #5f5858; padding-left: 0.5rem; }

.columna-4 h3 {font-weight: 200; font-size: 1.3rem; }
.columna-4 h4 {font-weight: 600; color: #5f5858; font-size: 1.3rem; line-height: 2.5rem; }
.columna-4 p {font-weight: 400; font-size: 1.2rem; border: 0.02rem solid; border-color: #5f5858; padding-left: 0.5rem; }




/* Datos */ 

.datos {justify-content: center; background: #000000; color: #5f5858; padding: 1.5rem; }
.datos ul {list-style: none; font-size: 0.9rem; font-weight: 600; }
.datos-1 {border: 0.02rem solid; border-color: #5f5858; width: 100%; text-align: left; margin-right: 2rem; padding-left: 1rem; padding-bottom: 0.5rem; padding-top: 0.5rem; }
.datos-1 h5 {font-weight: 400; font-size: 1.1rem; padding-bottom: 0.5rem; }
.datos-2 {border: 0.02rem solid; border-color: #5f5858; width: 100%; text-align: left; margin-right: 2rem; padding-left: 1rem; padding-right: 1rem; padding-bottom: 0.5rem; padding-top: 0.5rem; margin-top: 1.5rem; }
.datos-2 h5 {font-weight: 400; font-size: 1.1rem; padding-bottom: 0.5rem; }




/* Menús */ 

nav { padding: 0.5rem; background: #4b75c3; font-weight: 600; font-size: 1.4rem; }

nav ul li a { color: #000000; text-decoration: none; }
nav ul li a:hover {color: #ffffff; }
.menu {display: flex; justify-content: center ; list-style: none ; justify-content: space-between; margin: 1rem;}
nav.grupo {font-size: 1.3rem; font-weight: 600; text-align: center; line-height: 3rem; padding: 0.1rem; }




/* Footer */ 

footer { background: #000000; padding: 0.5rem; border-top: solid 0.1rem; border-color: #4b75c3; }
footer p { font-size: 0.9rem; color: #ffffff; font-weight: 200; font-style: italic; text-align: center; margin: 0.8rem; }






/* Responsive */

@media screen and (min-width: 48rem) {
    
            main section {display: flex; flex-wrap: wrap; }
            .foto {width:230px; height: 230px; border-radius: 100%; border: 0.3rem solid; border-color: #4b75c3; } 
            .columna-1 {width: 25%; text-align: center; }
            .columna-2 {width: 25%; text-align: left; }
            .columna-3 {width: 25%; text-align: left; }
            .columna-4 {width: 25%; text-align: left; list-style: none;}
    
    
            .datos {display: flex; justify-content: center; background: #000000; color: #5f5858; flex-wrap: wrap; padding: 2rem; }
            .datos ul {list-style: none; font-size: 0.9rem; font-weight: 600; }
            .datos-1 {border: 0.02rem solid; border-color: #5f5858; width: 100%; text-align: left; margin-right: 2rem; padding-left: 1rem; padding-bottom: 0.5rem; padding-top: 0.5rem; }
            .datos-1 h5 {font-weight: 400; font-size: 1.1rem; padding-bottom: 0.5rem; }
            .datos-2 {border: 0.02rem solid; border-color: #5f5858; width: 100%; text-align: left; margin-left: 2rem; padding-left: 1rem; padding-bottom: 0.5rem; padding-top: 0.5rem; padding-right: 0.1rem; margin-right: -1rem; margin-top: 0rem; }
            .datos-2 h5 {font-weight: 400; font-size: 1.1rem; padding-bottom: 0.5rem; }
    
    
            nav { padding: 0.2rem; background: #4b75c3; font-weight: 600; font-size: 1.6rem; display:flex; justify-content:center; }
            nav ul li { display: inline-block; }
            nav ul li a { color: #000000; text-decoration: none; padding: 1.5rem; text-align: center; }
            nav ul li a:hover {color: #ffffff; }
            nav.grupo {font-size: 1.3rem; font-weight: 600; padding: 0.5rem; }
    
    
            footer { background: #000000; padding: 0.5rem; border-top: solid 0.1rem; border-color: #4b75c3; }
            footer p { font-size: 0.9rem; color: #ffffff; font-weight: 200; font-style: italic; text-align: center; margin: 0.4rem; }
    
    
}


/* Alumno: Marcelo Carabajal */