@charset "utf-8";

/* --------- RESPONSIVE --------- */

@media (max-width: 640px) {
   
    #Materiasaprobadas{
        flex-wrap: wrap;
    }
    
    #obligatorio{
        flex-wrap: wrap;
        justify-content: center;
    }
    
    #obligatorio article{
     width: 95%;
    }
}

@media (min-width: 641px) {
    
    #obligatorio article{
     width: 45%;
    }
}
    
@media (max-width: 350px) {
  #equipo div{
        flex-wrap: wrap;
    }
}

@media (max-width: 225px) {
    img{
        max-width: 70%;
    }
}


/* ----------- REGLAS GENERALES ----------- */

{
    box-sizing: border-box;
}

body {
   background-color: rgb(190, 185, 172);
    margin-left: 1em;
    margin-right: 1em;
    font-family: "Calibri", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    
}

header,
footer {
    
    background: rgba(85, 77, 78, 0.88);
}

.contenedor,
main > section {
    max-width: 50rem;
    margin: 0 auto;
    
}

/* ------ HEADER ------ */

.contenedor{
    padding: 1em;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
    
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    
}

nav ul li {
    flex-basis: 24.5%;
}

nav ul li a {
    background-color: rgba(255, 255, 255, 0.46);
    color: rgba(23, 18, 4, 0.67);
    font-size: 13pt;
    font-weight: bold;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: .125em .5em;
    border-radius: 15px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.125);
}

nav ul li a:hover {
    background-color: rgba(0, 0, 0, 0.43);
    color: rgba(255, 255, 255, 0.78);
    
}


/* ----- MAIN ----- */

main {
    flex-grow: 1;
    
}

#rotulo{
    border-radius: 12px;
    background-color: rgba(175, 166, 166, 0.88);
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.25);
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .5em;
    width: calc( 100% - 2rem );
    border: solid .5em rgba(69, 68, 68, 0.42);
}

main > section > img{
    
    border-radius: 7px;
    border-color: beige;
    border: solid .25em rgba(210, 212, 212, 0.82);
    
}

#datosacademicos{
    border-radius: 12px;
    background-color: rgba(175, 166, 166, 0.88);
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.37);
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .5em;
    width: calc( 100% - 2rem );
    border: solid .45em rgba(69, 68, 68, 0.42);
}

main > section h3{
    text-align: center;
    background-color: rgba(240, 248, 255, 0.6);
    font-size: 14pt;
    margin: auto;
    padding: auto;
    border-radius: 6px;
}

main h2{
    font-size: 13pt;
    font-weight: bold;
}

#Materiasaprobadas{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
    /*flex-wrap: wrap;*/
}

h4{
    align-self: center;
    background-color: rgba(240, 248, 255, 0.6);
    border: solid .3em rgb(77, 29, 51);
    border-radius: 3px;
    padding: .3em;
}

#PrimerAño{
    background-color: rgba(221, 221, 221, 0.71);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border: solid .2em rgba(255, 251, 251, 0.78) ;  
    border-radius: 7px;
    margin: .5em;
    padding: .2em;
    max-width: 
}


#SegundoAño{
    background-color: rgba(175, 173, 172, 0.76);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border: solid .2em rgba(255, 251, 251, 0.78) ;  
    border-radius: 7px;
    margin: .5em;
    padding: .2em;
}

#TercerAño{
    background-color: rgba(119, 118, 118, 0.74);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border: solid .2em rgba(255, 251, 251, 0.78) ;  
    border-radius: 7px;
    margin: .5em;
    padding: .2em;
}

#PrimerAño li{
    align-self:center;
    padding: .075em;
}

#SegundoAño li{
    align-self:center;
    padding: .075em;
}

#TercerAño li{
    align-self:center;
    padding: .075em;
}

#equipo{
    
    border-radius: 12px;
    background-color: rgba(175, 166, 166, 0.88);
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.25);
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .5em;
    width: calc( 100% - 2rem );
    border: solid .5em rgba(69, 68, 68, 0.42);
}

#equipo div{
    display: flex;
    justify-content: center;
    font-weight: 600; 
}

div ul a{
    text-decoration: none;
    color: rgba(70, 47, 47, 0.92);
    display: block;
    border-radius: 4px;
}

div ul a:hover {
    background-color: rgba(0, 0, 0, 0.43);
    color: rgba(255, 255, 255, 0.78);
    
}

#equipo img{
    border-radius: 8em;
    border: solid .25em rgba(219, 219, 219, 0.76);
    
}

#obligatorio{
    display: flex;
    border-radius: 12px;
    background-color: rgba(175, 166, 166, 0.88);
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.25);
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .5em;
    width: calc( 100% - 2rem );
    border: solid .5em rgba(69, 68, 68, 0.42);
}

#obligatorio {
    display: flex;
    
}
#obligatorio article {
    display: flex;
    flex-direction: column;
    background-color: rgba(52, 38, 38, 0.53);
    border: solid .2em rgba(255, 251, 251, 0.78) ;  
    border-radius: 7px;
    margin: 1em;
   
}
#obligatorio article p{
    color: rgba(247, 247, 247, 0.85);
    margin: 1em;
}


/* ----- FOOTER ----- */

footer{
    color: rgba(255, 255, 255, 0.86);
    font-size: 8pt;
    text-align: center;
    padding: .5em;
    width: 99.5%;
}