@import url('https://fonts.googleapis.com/css?family=Roboto');


*{margin: 2;}
body {
    
    background: #000000;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;}

header {
    font-family: 'Roboto', sans-serif;
   background:#ffffff;
    margin: 0;}

h1{text-align: center; color: #eb00ff; font-size: 5rem}

h2{ text-align: center; color:#ffffff; margin-top: 1rem;}


nav {width: 100%;background:#000000;padding: 1rem ;margin: 0rem;text-align: center; }

nav ul{padding: 0;margin: 0;justify-content: center;}


nav ul li a:hover{background: #fff;color: #a52f38; }


ul li {display: inline;list-style-type: none;}

ul li a {text-decoration: none; color: white;background: black;margin: 4rem 5rem 2rem 2rem;font-size: 1rem;font-family:'Roboto'; }

section article {text-align: center; }
section article img {border-radius: 50%; margin: 9% auto 2% auto;}
section article h3 a {text-decoration: none;color: #eb00ff}

footer { font-size: 0.8rem;
         margin-top: 2rem;
         margin-left: 1rem;
         margin-right: 1rem;
         text-align: justify;}

/*fotos*/
.alumnos{ display: flex; justify-content: center;}
.alumnos article{ padding: 3%;margin: 1rem 1rem 1rem 1rem; }
.alumnos article a { color: #ffffff;text-decoration:none;margin: 2rem 0rem 0rem 0rem;}
.alumnos article {text-align: center;}

/*responsive*/
/*desde 0 hasta 974px*/



@media (max-width:1280px) {
    ul li a {
        text-decoration: none;
        color: white;
        background: black;
        margin: 4rem 2rem 2rem 2rem;
    }
    .separador a {
        margin: 4rem 2rem 2rem 14rem;
    }
   
    h1 {
        color: #49cceb;
        padding: 0.5rem 0rem 0.5rem 3rem;
    }
    .alumnos img {
        border-radius: 50%;
        width: 40%;
        margin: 0 0 1rem 0;
    }
    .alumnos {
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin: 4rem 2rem 2rem 2rem;
    }
    .alumnos h3 a {
        text-align: right text-decoration: none;
        color: #49cceb;
    }
    .alumnos article h3 a:hover {
        border: 0.0625em solid #49cceb;
        border-radius: 0.125em;
        /*segun conversor w3schools son 2px basado en 16px*/
        background: #efecec;
        padding: 0.125em;
    }
    footer p {
        color: white;
        text-align: center;
        font-size: 0.8125em;
        /*segun conversor w3schools son 10px*/
        padding: 2rem 2rem 2rem 2rem;
        margin: 2rem 0 0 0;
    }
    @media (max-width:768px) {
        ul li a {
            text-decoration: none;
            color: white;
            background: black;
            margin: 2rem 1rem 2rem 2rem;
        }
        .separador a {
            margin: 4rem 1.5rem 2rem 4rem;
        }
        h1 {
            color: #49cceb;
            padding: 0.5rem 3rem 0.5rem 1rem;
        }
        .alumnos img {
            border-radius: 50%;
            width: 40%;
            margin: 0 0 1rem 0;
        }
        .alumnos {
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin: 4rem 2rem 2rem 2rem;
        }
        .alumnos h3 a {
            text-align: right text-decoration: none;
            color: #49cceb;
			font-size: 1rem;
        }
		
        .alumnos article h3 a:hover {
            border: 0.0625em solid #49cceb;
            border-radius: 0.125em;
            /*segun conversor w3schools son 2px basado en 16px*/
            background: #efecec;
            padding: 0.125em;
        }
        footer p {
            color: white;
            text-align: center;
            font-size: 0.6rem;
            /*segun conversor w3schools son 10px*/
            padding: 1.5rem 1.5rem 1rem 1.5rem;
            margin: 1rem 0 0 0;
        }
    }
    @media (max-width:400px) {
        header {
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
        }
        
        nav {
            width: 100%;
            height: 20%;
            padding: 0;
            background: black;
           
            
        }

        .subtitulo {
            margin-top: 0.7rem;
        }
        .alumnos {
            display: flex;
            flex-direction: column;
            text-align: center;
            margin: 2rem 2rem 3rem 3rem;
        }
        .alumnos article h3 a {
            margin: 0.5rem 0 2rem 0;
        }
		h3{
			margin-bottom: 1rem;
			padding-bottom: 1rem;
		}
        footer p {
            color: white;
            text-align: center;
            font-size: 0.6em;
            /*segun conversor w3schools son 10px*/
            padding: 1rem 1rem 1rem 1rem;
            margin: 1rem 0 0 0;
        }
        @media (max-width:320px) {
            .alumnos {
                display: flex;
                flex-direction: column;
                text-align: center;
                margin: 3rem 2rem 3rem 3rem;
            }
            .alumnos article h3 a {
                margin: 0.5rem 0 2rem 0;
            }
            h1 {
                color: #49cceb;
                padding: -3rem -1rem -3rem -3rem;
            }
            footer p {
                color: white;
                text-align: center;
                font-size: 0.6em;
                /*segun conversor w3schools son 10px*/
                padding: 1rem 1rem 1rem 1rem;
                margin: 1rem 0 0 0;
            }