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

* {
    transition: 1s;
    text-align: center;
}

body {
    background-color:skyblue;
    font-family: 'Open Sans', sans-serif;
}
header {
    background-color:navy;
}
h1 {
    color:seashell;
}
a {
    text-decoration: none;
}
ul {
    background-color: paleturquoise;
    list-style-type: none;
    text-align: center;
}

footer p {
    font-size: 0.7rem;
}
.avatar {
    border-radius: 50%;
    max-width: 70%;
    max-height: 70%;
}
img .banner {
	max-height: 40%;
    border-radius: none;
}

.menu-principal {
    background-color:royalblue;
    padding: 0.5rem;
    display: inline-block;
}
.link-activo {
    color: cornsilk;
}
.nombre {
    font-family: 'Italianno', cursive;
    font-size: 300%;
    color: seashell;
    font-weight: lighter;
}

ul {
    padding: 1rem;
}

.año {
    font-weight: bold;
    font-size: large;
    padding: 1rem 0 0 0;
}
.año li {
    font-weight: normal;
    font-size: small;
}

.datos {
    font-size: small;
}

@media (min-width:576px) {
    .materias {
        display: flex;
    }
    body {
        background-color: pink;
        padding-left: 5%;
        padding-right: 5%;
    }
    ul {
        padding: 2rem;
    }
    .avatar {
        max-width: 300px;
        max-height: 300px;
    }
    .materias {
        background-color: #fccd8e;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        align-content: stretch;
        padding: 0rem;
    }
    header {
        background-color: salmon;
    }
    .menu-principal {
        background-color: blueviolet;
    }
}