@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@900&family=Open+Sans&display=swap');

/*Versión mobile*/

*{transition: all 1s;}
body{
    background: whitesmoke; 
    font-family: open sans, sans-serif; 
    text-align: center; 
    color: ;}

body img{
    padding: 1rem}

header{
    font-family: open sans, sans-serif;
    color: lightgray;}

h1{
    padding: 2rem;
    background-color: black;
    color: whitesmoke;
    font-family: epilogue;
    font-size: 4rem;}

h2{
    color: darkblue;}

footer p{
    color: darkgray; 
    font-family: open sans, sans-serif; 
    font-size: 0.7rem; 
    text-align: center;
    border-bottom:1px;
    margin-left:auto;
    margin-right:auto;
    width: 400px}

article h2{
    font-family: epilogue}

nav a{
    padding: 1rem}

.estudiantes {
    background-color: lightgrey;
    padding: 2rem}

a{
    outline: none;
    text-decoration: none;
    padding: 0.6rem}

a:link{color:darkcyan}
a:visited{color:grey}
a:hover{color:black; background-color: gainsboro}

footer img{
    width: 200px}

footer a:hover{
    background-color: whitesmoke}

/*Versión desktop*/

@media (min-width:576px){
    h1{
    font-family: epilogue;
    padding: 2rem;
    background-color: black;
    color: whitesmoke;
    font-size: 3rem;
    text-align: center;}
    
.estudiantes {
    background-color: lightskyblue;
    padding: 2rem}

a{
    outline: none;
    text-decoration: none;
    padding: 0.6rem}

    a:link{color:darkslateblue}
    a:visited{color:grey}
    a:hover{color:black; background-color: gainsboro}
    
article{
    background-color: lightskyblue;
    display: flex; 
    width:100%; 
    justify-content:space-around}