@charset "ult-8";


* {
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-sizing: border-box;
}

header {
    background-color: #bd99ab;
    padding: .1em;
}

#logodgpc {
    padding: .2em;
    text-align: center;
}

h1 { 
    margin-left: auto;
    margin-right: auto;
    color: #331d24;
    font-size: 1em; 
    background-color: #f8f6da;
    border-radius: .6em;
    width: 70%;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

nav ul li{
    background-color: #d3b3e9;
    border: solid #f8f6da .15em;
    list-style: none;
    margin: auto;
    margin-bottom: .3em;
    border-radius: .6em;
    width: 40%;
    text-transform: uppercase;
}

nav ul li a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:small;
}

nav ul li a:hover {
    color: #158815;
}

nav ul{
    list-style: none;
    text-decoration: none;
    text-align: center;
}

.menu{
    display: block;
    margin: auto;
}

body {
    background-color: #f8f6da;
    margin: 0
}

h2{
    text-align: center;
    color: #f8f6da;
    background-color: #74947c;
    border-radius: .6em;
    width: 60%;
    margin: auto;
    margin-top: 3em;
    margin-bottom: 2em;
    text-transform: uppercase;
}

#nombre{
    background-color: #f8f6da;
}

#abrilcalabria{
    display: block;
    margin: auto;
    margin-top: 2em;
    width: 80%;
    border-radius: .6em;
}

.abrilcalabria {
    background-color: #74947c;
    margin-top: 2em;
    padding: 1em 1em 0em 1em;
    border-radius: .6em;
    color: #f8f6da;
}

.abrilcalabria img {
    width: 100%;
    border-radius: .5em;
}

#abrilcalabria ul{
    list-style: none;
    padding-top: 1em;
    padding-left:.3em;
    margin-bottom: 0;
    color: black;
}

#abrilcalabria h2{
    width: 80%;
}

.menupersonal{
    background-color: #f8f6da;
    width: 80%;
    margin: auto;
    margin-top: 2em;
    text-transform: uppercase;
}

#vm05 {
    background-color:#f8f6da;
    margin-top: 3em;
    padding: 0em 2em;
}

#vm05 a {
    color: #74947c
}

#vm05 a:hover {
    color: #158815;
}

#grupo{
    margin-top: 2em;
}

#melisalevin{
    background-color: #74947c;
    color: #f8f6da;
    width: 60%;
    margin: auto;
    margin-bottom: 1em;
    border-radius: .6em;
    padding: .1em;
    padding-top: 0.2em;
}

#melisalevin img {
    width: 100%;
    border-radius: .6em;
}

#melisalevin a{
    color:#f8f6da
}

#aluhepriano{
    background-color: #74947c;
    color: #f8f6da;
    width: 60%;
    margin: auto;
    margin-bottom: 1em;
    border-radius: .6em;
    padding: .1em;
    padding-top: 0.2em;
}

#aluhepriano a{
    color:#f8f6da
}

#aluhepriano img {
    width: 100%;
    border-radius: .6em;
}

h3{
    margin-top: .1em;
    margin-bottom: .4em;
}

#comitente{
    padding: 0em 2em;
}

#comitente a{
    color:#74947c
}

#comitente a:hover {
    color: #158815;
}

#siamditella img{
    width: 100%;
    border-radius: .6em;
}


#datosacademicos {
    margin-right: 2em;
    margin-bottom: 5em;
}

#datosacademicos h2{
    width: 90%;
}

#datosacademicos ul li{
    list-style: none;
    font-size: 14px;
}

.linea{
    width: 80%;
    margin: auto;
    margin-top: 3em;
    margin-bottom: 3em;
}

h4{
    font-size: 16px;
    color: #74947c;
}

#materias{
    color:#f8f6da;
}

footer {
    background-color: #74947c;
    color:#f8f6da;
    font-size: 11px;
    margin-top: 10em;
    margin-bottom: 2em;
    padding: 0em 2em 1em 1em;
    margin: 0;
}

footer nav ul li {
    width: 40%;
    border: solid #f8f6da .20em;
}

.contactos{
    background-color: #f8f6da;
    width: 70%;
    margin: auto;
    padding-bottom: 1em;
    border-bottom-right-radius:  .5em;
    border-bottom-left-radius:  .5em;
}

#externos img{
    margin: 1em;
    width: 25%;
}

@media (width >= 768px) {

    .menu{
        display: flex;
        margin: 0em 2em;
        padding: 1em;
        padding-inline: 1em;
        gap: 10px;
    }

    .abrilcalabria img {
    width: 60%;
    display: block;
    margin: auto;
    }

    #materiastotales{
        display: flex;
        margin-left: 5em;
        gap: 30px;
    }

    #grupo{
        display: flex;
        margin: 2em;
        gap: 30px;
    }

    #siamditella{
        width: 80%;
        margin: auto;
    }

    .contactos{
        display: flex;
        padding: 1em;
        padding-inline: 1em;
    }
    
    #externos img{
        width: 15%;
        margin-left: 10em;
    }

  }