@charset "utf-8";
    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap');
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        background-color: rgb(26, 25, 25);
        font-family: 'Roboto', sans-serif;
    }
    
    a {
        text-decoration: none;
    }
    
    ul,
    ol {
        list-style: none;
        padding: 0;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    .contenedora {
        max-width: 75rem;
        margin: 0 auto;
        padding: 1rem;
    }
    
    header,
    footer {
        background-color: rgb(248, 192, 72);
        color: rgb(26, 25, 25);
    }
    
    #logo {
        background-color: white;
        border-radius: .35em;
        padding: .35em;
        width: 6em;
    }
    /* ----------------
   header
   ---------------- */
    
    .menu-btn,
    .menu-fondo {
        border-radius: 50%;
        padding: .75rem;
        width: 3rem;
        height: 3rem;
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 9000;
        cursor: pointer;
        transition: all 0.3s ease-out;
    }
    
    .menu-fondo {
        background: rgba(255, 255, 255, 0.25);
        box-shadow: -5px 5px 5px rgba(0, 20, 20, 0.2);
        z-index: 8000;
    }
    
    .menuVisible .menu-fondo {
        background: rgb(248, 192, 72);
        width: 200vw;
        height: 200vw;
        right: -100vw;
        top: -100vw;
    }
    
    .menu-btn .btn-linea {
        width: 25px;
        height: 3px;
        margin: 4px 0 4px 0;
        background: black;
        transition: all 0.3s ease-out;
        position: relative;
        z-index: 9000;
    }
    
    .menuVisible .menu-btn .btn-linea {
        transform: rotate(180deg);
        ;
    }
    
    .menuVisible .menu-btn .btn-linea:nth-child(1) {
        transform: rotate(45deg) translate(4px, 6px);
    }
    
    .menuVisible .menu-btn .btn-linea:nth-child(2) {
        opacity: 0;
    }
    
    .menuVisible .menu-btn .btn-linea:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -6px);
    }
    
    nav ul {
        position: absolute;
        right: 1rem;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
        transition: all .5s ease;
    }
    
    .menuVisible ul {
        visibility: visible;
        opacity: 100%;
        transition: all .5s .2s ease;
    }
    
    nav ul li a {
        border-bottom: solid 4px transparent;
        color: black;
        display: block;
        font-size: 1.5rem;
        margin-bottom: .5rem;
        text-align: right;
        padding: .5rem;
        text-decoration: none;
    }
    
    nav ul li a:hover {
        border-bottom: solid 4px rgba(255, 255, 255, 0.5);
        transition: all .3s;
    }
    /* ----------------
   main
   ---------------- */
    
    section {
        padding-bottom: 2rem;
    }
    
    section:first-of-type {
        font-size: 1.25em;
    }
    
    .titulo {
        padding: .5em;
        color: rgb(248, 192, 72);
        font-size: 2.5em;
        text-align: center;
        min-width: 5em;
        border-radius: 3em;
        letter-spacing: 4px;
    }
    
    h1 {
        color: rgb(248, 192, 72);
        font-family: 'Anton', sans-serif;
    }
    
    p {
        color: rgb(170, 170, 170);
        font-family: 'Roboto', sans-serif;
    }
    
    .alumno img {
        border: solid .4em rgb(248, 192, 72);
        border-radius: 50%;
    }
    
    article>div {
        min-width: 10em;
        display: flex;
        flex-direction: row;
        color: rgb(170, 170, 170);
        ;
        justify-content: center;
    }
    
    .alumno h2 {
        text-align: center;
        padding: 1em;
        color: rgb(248, 192, 72);
    }
    
    .descripcion {
        text-align: center;
        padding: 0em 0em 2em;
    }
    
    h3 {
        color: rgb(248, 192, 72);
    }
    
    .materiasaprobadas {
        padding: 1em;
        color: rgb(170, 170, 170);
    }
    
    .materiasencurso {
        padding: 1em;
        color: rgb(170, 170, 170);
    }
    
    .boceto {
        background-color: rgb(248, 192, 72);
        border-radius: .25rem;
        color: #ffffff;
        font-weight: bold;
        line-height: 1.25em;
        padding: .125em 1em;
    }
    
    .boceto:hover {
        color: rgb(248, 192, 72);
        background-color: #ffffff;
    }
    /*
footer
*/
    
    .contenedora {
        color: black;
    }
    
    .academicos>ul>li:not(:last-of-type) {
        border-bottom: solid 1px rgb(248, 192, 72);
        padding-bottom: 1.5em;
        margin-bottom: 1.5em;
        color: rgb(170, 170, 170)
    }
    
    .academicos img {
        width: 8em;
        height: auto;
        color: rgb(170, 170, 170)
    }
    
    .academicos>ul>li>*:first-child {
        margin-right: 2em;
        width: 8em;
        color: rgb(170, 170, 170);
    }
    
    .academicos h3 {
        margin-top: 0;
        color: rgb(170, 170, 170)
    }
    
    li {
        color: rgb(170, 170, 170)
    }
    
    @media screen and (min-width:1200px) {
        header .contenedora {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        header nav ul {
            display: none;
        }
        header nav ul li {
            min-width: 4em;
            margin: .25em 0 .25em .25em;
        }
        header nav ul li a {
            background-color: rgb(26, 26, 26);
            border-radius: .25em;
            color: rgb(248, 192, 72);
            font-weight: bold;
            padding: .25em .5em;
            text-align: center;
            display: block;
        }
        header nav ul li a:hover {
            background-color: rgb(248, 192, 72);
            color: white;
        }
        .alumno article {
            width: calc(25% - .75em);
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
        }
        .alumno article div {
            width: unset;
            margin-top: 1em;
            color: rgb(248, 192, 72);
        }
        .alumno article h3 {
            text-align: center;
        }
        .contenedora {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .academicos>ul {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }
        .academicos>ul>li {
            width: calc(33.33% - 2em);
            flex-direction: column;
        }
        .academicos>ul>li:not(:last-of-type) {
            border-bottom: 0;
        }
        .academicos>ul>li>div {
            margin-top: 1em;
            width: unset;
        }
    }
    
    @media screen and (min-width:800px) {
        header .contenedora {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        header nav ul {
            display: none;
        }
        header nav ul li {
            min-width: 4em;
            margin: .25em 0 .25em .25em;
        }
        header nav ul li a {
            background-color: rgb(26, 26, 26);
            border-radius: .25em;
            color: rgb(248, 192, 72);
            font-weight: bold;
            padding: .25em .5em;
            text-align: center;
            display: block;
        }
        header nav ul li a:hover {
            background-color: rgb(248, 192, 72);
            color: white;
        }
        .alumno h2 {
            width: 100%;
        }
        .alumno article {
            width: calc(50% - .5em);
        }
        .alumno article div {
            height: 100%;
        }
        .alumno article div a {
            margin: auto 0 0 auto;
        }
    }
    
    @media screen and (min-width:640px) {
        header nav ul {
            display: flex;
        }
        .menu-btn {
            display: none;
        }
        .academicos>ul>li {
            display: flex;
        }
        .academicos>ul>li>div {
            width: calc(100% - 10em);
        }
    }