*{ margin: 0;
    padding: 0;
    box-sizing: border-box
}

body { font-family: "Raleway",
    "Arial", sans-serif;
    min-height: 100vh;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    }
header {height: 4em;
display: flex;
justify-content: space-between;
align-items: center;
}

#logo { padding: 0em 0em 0em 1em; 
    display: block
    }

header > ul {
    display: flex;
    padding: 0em 1em 0em 0em;
}

header > ul > li {
    width: 4em;
    height: 2em;
    margin-left: .25em;

    display: flex;}

header > ul > li > a {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.75);
    color: white;
    text-decoration: none;
    font-weight: bold;

    display: flex;
    justify-content: center;
    align-items: center;
}

header nav { height: 100vh;
    background-color:  rgba(0,0,0,0.85);
    color: white;

    position: fixed;
    right: -50vw;
    top: 0;
    height: 30vh;
    min-width: 50vw;
    transition: all .6s ease;
    z-index: 999;
    
}

header nav a {
    color: white;
    display: block;
    padding: .5em 1em;
    text-align: right;
    text-decoration: none;
}

header nav a:hover {
    color: orange;}

header nav:target { right: 0;
transition: all .6s ease;
}

#x {position: absolute;
    bottom: 0;
    right: 0; 
    color: gray;
}

#menu #x { font-size: .7em;
    text-transform: uppercase;
}

footer {font-size: 9pt;
    color: white;
    padding: 1em 1em 1em 1em;
    background-color: #252525;
    text-align: center;
    }

.portada { background-image: url(../img/portadaaa.jpg);
    background-size: cover;
    width: 100%;
    height: 10em;
    background-position: bottom;
    background-attachment: local;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

.iconos {text-decoration: none;
    list-style: none;
    padding: 1em 0em 0em 0em;
    width: 50vw;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

li #iconobehance img {width: 100%;
    height: auto;
    padding: 0em 1em 0em 1em;
    }

li #iconofacebook img {width: 100%;
    height: auto;
     padding: 0em 1em 0em 1em;
    }
li #iconopinterest img {width: 100%;
    height: auto;
     padding: 0em 1em 0em 1em;
    }


h1 { color: white;
    font-size: 1.7em;
    font-weight: 600; 
    text-align: center;
    
}


main {padding: 2em 0em em 0em; 
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    }

span { font-weight: 800;
    }

h2 { padding: .5em 0em 0em 0em;
    font-size: 1.2em; 
}

#yo {width: 30%;
    height: 30%;
padding: 0em 1em 0em 0em;
    margin: .7em 0em 0em 0em;
}

.izquierda {background-color: white;
    padding: 0em 0em 0em 2em;
    display: flex;
    flex-direction: column;
    }

.fototexto {display: flex;
flex-direction: row;
}

.fototexto .descripcion {padding: 0em 1em 0em 0em; }

main .izquierda p { font-size: .8em;
    
}

.materias {display: flex;
    padding: 1em 0em 0em 0em;
    
}

.aprobadas {display: flex;
width: 14em;
height: auto;
padding: 0em 1em 1em 0em;
}

.curso {display: flex;
    width: 14em;
    height: auto;
    padding: 0em 1em 1em 0em;
}

.restantes {display: flex;
width: 14em;
    height: auto;
    padding: 0em 1em 1em 0em;
}

main .derecha {display: flex;
    padding: 1em 1em 1em 1em;
    font-size: .6em;
    background-color: gainsboro;
    
    width: 100%;
    height: auto;
}


main .derecha p {width: 100vw;
    height: auto;
margin: 0em 0em 0em 1em;
}

.app {    width: 100%;
    height: 100px;

    background-color: #061f5d;
 display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-decoration: none;
    list-style: none;
        
}
    
#info {  padding: 1em 0em .5em 2em;
    font-size: .8em;
    font-weight: 800;

}

li {text-decoration: none;
list-style: none;
}

.app #gif {width: 60vw;
    height: auto;
    text-decoration: none;
    list-style: none;
    
    align-content: center;
    align-items: center;
    
    
}