*{
    box-sizing: border-box;
    font-family: "Roboto", 'Open Sans', sans-serif;
    }

    :root{
        --color-textos: rgb(39, 38, 38);
        --color-fondo: #ffffff;
        --color-1: paleturquoise; 
        --color-2: lightseagreen;
        --textos-cuerpo: serif;
        --textos-titulos: sans-serif;
    }

    img {
        max-width: 100%;
    }

    body {
        width: min( 100rem, 100%);
        margin-inline: auto;
        margin-block-start: 0%;
        margin-block-end: 0%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        background-color: var(--color-fondo);
    }

    a {
        text-decoration: none;
        color: var(--color-textos);
        font-family: var(--tipo-titulos);
        font-weight: bold;
    }

    p {
        margin-block-end: 0%;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
        color var(--color-textos)
    }

    header, footer {
        background-color: var(--color-2);
        margin-inline: 0%;
        align-items: center;
    }
    
    ul,
    ol {
        list-style: none;
        padding: 0;
    }

    header .lista{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    header .contenedora{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1em;
    }

    header img{
        width: 20%;
        height: auto;
        margin: 1em;
    }

    header, footer {
        background-color: var(--color-2);
        margin-inline: 0%;
    }

    main{
        align-items: center;
    }
    
    header nav a {
        /* color del texto */
        color: var(--color-fondo);
        /* color de fondo */
        background-color: var(--color-4);
        /* para darle propiedades de caja (margen, por ejemplo) */
        display: block;
        /* definir ancho igual a su contenido */
        width: max-content;
        /* separa los botones */
        margin: .125rem;
        /* "relleno" arriba y abajo */
        padding-block: .25em;
        /* "relleno" a izquierda y derecha */
        padding-inline: 1em;
        /* border redondeado */
        border-radius: 0.25em;
    }

    header nav a:hover {
        background-color: var(--color-2);
        /* cambia el color de texto */
        color: var(--color-3);
    }
    
    #presentación_alumna {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        justify-content: space-evenly;
        align-items: center;
    }


    .presentación{
        background-color:var(--color-1);
        padding: 1em;
        margin: 2em 4em 2em 4em;
	    border-radius: .30em;
        display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    justify-content: center;
        
    }

    .presentación h1{
         font-size: 30px;
         margin-bottom: 5px;
        font-weight:800;
          
    }

    #foto_dolores {
        width: 300px;
        height: auto;
    }

    .presentación img{
        border: solid .4em var(--color-2);
        border-radius: 50%;
        width: 60em;
        aspect-ratio: 1;
    }

    h1 {color: var(--color-textos);}

    .materias {
        display: block;
        max-width: 80%;
        margin: 2em 4em 2em 4em;
        padding: 1em;
        text-align: center;
        border-radius: .30em;  
        background-color: var(--color-1);
      }

    @media screen and (min-width:768px) {
        .header nav,
        .header nav ul {
                display: contents;
        }
        .header nav ul li:first-of-type{
                margin-inline-start: auto;
        }
     
    }