@charset "utf-8";

*{
    box-sizing: border-box;
}

    @font-face {
    font-family: 'roboto_condensedbold';
    src: url('fuentes/RobotoCondensed-Bold-webfont.eot');
    src: url('fuentes/RobotoCondensed-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/RobotoCondensed-Bold-webfont.woff2') format('woff2'),
         url('fuentes/RobotoCondensed-Bold-webfont.woff') format('woff'),
         url('fuentes/RobotoCondensed-Bold-webfont.ttf') format('truetype'),
         url('fuentes/RobotoCondensed-Bold-webfont.svg#roboto_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

    @font-face {
    font-family: 'robotolight';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff2') format('woff2'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

    @font-face {
    font-family: 'robotothin';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff2') format('woff2'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

   @font-face {
    font-family: 'robotoblack';
    src: url('Roboto-Black-webfont.eot');
    src: url('Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Black-webfont.woff2') format('woff2'),
         url('Roboto-Black-webfont.woff') format('woff'),
         url('Roboto-Black-webfont.ttf') format('truetype'),
         url('Roboto-Black-webfont.svg#robotoblack') format('svg');
    font-weight: normal;
    font-style: normal;

}

div h3{
   
    color: #333;
}

div ul li{ font-family: 'robotolight';
font-size: 13px;}


h1,h2{ font-family: 'roboto_condensedbold';
    font-size: 30px;
    font-weight: bolder;
    color:crimson;
    text-align: center;
}

#datos-academicos{
    column-count:4;
   column-gap:20px;
     column-rule:4px Outset;
 background-color:rgba(158, 160, 159, 0.24);
      
}
article{
    text-align: center;
}

.fotito img{
  width:  100%;
   height:  auto;
}

p{
    color:coral;
    font-family: 'robotolight';
    margin: 1em;
  
}


nav{
    background-color: rgba(96, 255, 255, 0.4);
    padding: 1em;
    display: flex;
    justify-content: center;
 }

nav ul li a{ text-decoration: none;
    font-family: 'robotoblack';
    font-size: 18px;
}


ul li{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center
}
div a{ color: #939393;
text-decoration:none;
font-family: 'roboto_condensedbold'}



@media screen and ( min-width:32em){
    body{background-color:#fffaf2}

}
    

    @media screen and (max-width:50em){ 
        body{background-color: #ffefeb}
           
        #datos-academicos {
    column-count:2;
   column-gap:20px;
   column-rule:4px Outset;
            margin: 1px;
          
          
}
}
         

#estudiantes{ 
display:flex;
flex-direction: column;}


header nav ul li a{
    display: flex;
    font-family: 'robotolight';
    text-decoration: none;
color: #e6ffff;
    display: block;
text-align: center;
    background: rgba(252, 74, 109, 0.88);
padding: 1em;
}

.destaque{
    background-color: antiquewhite;
color:crimson;
font-weight: bold;
}

h3,h4{ color: dimgrey;
    display: flex;
    font-family:  'roboto_condensedbold';
    justify-content: center;
     background: #a5ffff}

a:hover{ color: aqua}

nav ul li a{ color: crimson}

div { color: #939393;
}

footer{ 
 font-family:'robotolight';
 color: rgba(5, 145, 140, 0.51);
text-align: center;
font-size: 12px;
padding: 2rem;
background-color: #6f6d6d}