@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap');
/*light300,regular400,bold700*/


html {
    height: -webkit-fill-available;
}

body {
    margin: 0;
    background-color: #ffffff;
    font-family: Raleway, sans-serif;
    font-size: 0.5em;
    color:  #12466d
}

header {
    background-color: #b0eee3;
    padding: 1em 3em 1em 3em;
}

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

#logodgpc {
    width: 8em;
    height: auto
}

#logofadu {
    width: 16em;
    height: auto
}

#menusito {
    width: 5em;
    height: auto
}

.menu {
    display: none
}

main {
    margin: 1em 2em 1em 2em
}

h1 {
    font-weight: 50%;
    font-size: 1.5rem;
}

h1 em {
    font-weight: 100%;
    font-style: normal;
    font-size: 1.6rem;
}

h2 {
    font-weight: 50%;
    font-style: normal;
    font-size: 1.3rem;
}

h3 {
    font-size: 1rem
}

#granseccion {
    display: flex;
    justify-content: column;
    align-items: center;
}

.cajita {
    background: #eaf9f4;
    border-radius: 3em;
    padding: 0.5em 2em 3em 2em;
    box-shadow:  5px 5px 0px #b0eee3
}

.cajita p {
    font-size: 1rem
}

.cajita ul {
    list-style: none;
    padding-left: 0
}

.cajita ul li:before {
    content: '✓ ';
    color: #ef7700
}

.cajita li {
    flex-grow: 0.5;
    border-radius: 1em;
}

.cajita li a {
    text-decoration: none;
}

.botonera {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    border-radius: 3em;
    background-color:  #eaf9f4;
    border-radius: 3em;
    padding: 0.5em 2em 2em 2em;
    box-shadow:  5px 5px 0px #b0eee3
}

.botonera p {
    font-size: 1rem
}

.botonera ul {
    list-style: none;
    padding-left: 0
}

#materiasaprobadas:before {
    content: url(../img/pencil.png)
}

#materiasfavoritas:before {
    content: url(../img/pixel-heart.png)
}

.botonera li {
    border-radius: 0.5em;
    padding-top: 0.5em;
    padding-left: 0em
}

.botonera ul a {
    display: block;
    background-color: #3493a9;
    padding: 0.5em 1em;
    text-decoration: none;
    border-radius: 0.8em;
    border: white solid 1px;
    color: white
}

.botonera ul a:hover {
    background-color: #b0eee3;
    color: #12466d;
    font-weight: 220%
}

#seccion1 {
    display: flex;
    flex-direction: column;
}

#fotoperfil {
    max-width: 100%;
    height: auto;
    border-radius: 3em;
    box-shadow:  5px 5px 0px #b0eee3
}

#cajaperfil {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    margin: 0;
    font-size: 1.5em;
}

#cajaperfil p {
    text-align: justify;
}

footer {
    background-color: #eaf9f4;
    font-size: 0.8rem;
    padding: 1em 1em 1em 1em
}

@media screen and (min-width:768px) {

header {
    justify-content: space-evenly;
    align-items: center
}

header section {
    display: none
}

    .menu {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    
    .menu ul {
        margin: 0;
        list-style: none;
        padding: 0;
        display: flex;
    }
    
    .menu li {
        flex-grow: 0.5;
        border-radius: 1em;
    }
    
    .menu li:hover {
        background: rgba(0, 0, 0, 0.3);
    }
    
    .menu li a {
        display: block;
        padding: 1em 1em;
        color: #12466d;
        text-decoration: none;
        font-size: 0.8rem
    }

    .menu li a:hover {
        color: white
    }

    #granseccion {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .cajita {
        background: #eaf9f4;
        border-radius: 3em;
        padding: 0.5em 2em 3em 2em
    }
    
    .cajita p {
        font-size: 1rem
    }
    
    .cajita ul {
        list-style: none;
        padding-left: 0
    }
    
    .cajita ul li:before {
        content: '✓ ';
    }
    
    .cajita li {
        flex-grow: 0.5;
        border-radius: 1em;
    }
    
    .cajita li a {
        text-decoration: none;
    }
    
    .cajita li a:hover {
        background: rgba(0, 0, 0, 0.3)
    }
    
    h1 {
        font-weight: 50%;
        font-size: 1.5rem;
    }
    
    h1 em {
        font-weight: 100%;
        font-style: normal;
        font-size: 1.6rem;
    }
    
    h2 {
        font-weight: 50%;
        font-style: normal;
        font-size: 1.3rem;
    }
    
    h3 {
        font-size: 1rem
    }
    
    
    /*#yo {
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/banner.jpeg");
        background-repeat: no-repeat;
        background-position: center;
        padding: 20em 0em 20em 0em;
        display: block;
        background-size: cover;
        background-color: red;
    }
    
    #yo p {
        color: white;
        text-align: center;
        font-size: 2em
    }*/
    
    #seccion1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    #seccion1 {
        display: block;
        margin: 1em;
        padding: 0em 0em 1em 5em;
        border-radius: 3em
    }
    
    #fotoperfil {
        max-width: 40%;
        height: auto;
        border-radius: 3em
    }
}