@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-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);}

h1{
    font-family: epilogue; 
    color: crimson;
    font-size: 3rem;
    text-align: center;}

h2{
    font-size: 1rem;
    text-align: center}

h3{
    font-family: epilogue,sans-serif;
    text-align: center;}

h3 a{
    text-decoration: none;}
    
a:hover{background-color: lightgrey; padding: 0.5rem}

.encabezado{text-align: center;font-family: gotham}

.materias{
    font-family: open-sans, sans-serif; 
    margin-left: 30%;
    background-color:antiquewhite;
    align-content: center;
    border-radius: 10px;
    padding: 2rem}

h2 a{
    font-family: open-sans, sans-serif;
    color: whitesmoke;
    text-decoration: none;
    background-color: brown;
    border-radius: 10px;
    padding: 0.4rem}

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}

/*Versión desktop*/

@media (min-width:576px){
    h1{
    font-family: epilogue; 
    color: whitesmoke;
    font-size: 3rem;
    text-align: center;}
    
    body{
        background-color: darkgray;
        background-image: none}
    
    .materias{
        background-color: whitesmoke;
        margin-left: 40%}
    
    article{
        display: flex; width:37%; justify-content:space-between}
    
    section article{
        width: 28%; 
        background: white}}

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