@charset "utf-8"
    
* {
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Poiret+One&display=swap');

@font-face{
      font-family: 'mate_scregular';
    src: url('matesc-regular-webfont.eot');
    src: url('matesc-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('matesc-regular-webfont.woff2') format('woff2'),
         url('matesc-regular-webfont.woff') format('woff'),
         url('matesc-regular-webfont.ttf') format('truetype'),
         url('matesc-regular-webfont.svg#mate_scregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.mapa h1 {
    background-color: rgba(136, 79, 165, 0.36);
    color: rgba(112, 41, 157, 0.83);
    width: 90%;
    font-family: 'Amatic SC', cursive;
    font-size: 3rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.mapa img{
    background-image: #ddd6f0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.plan h1{
    background-color: rgba(136, 79, 165, 0.36);
    color: rgba(112, 41, 157, 0.83);
    width: 90%;
    font-family: 'Amatic SC', cursive;
    font-size: 2.5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.plan img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

body{
    background-color: #ddd6f0;
    font-family: "Verdana", Geneva, sans-serif;
}



.title-style{
    font-family: 'Amatic SC', cursive;
    font-size: 2.2em;
    border-top: .1em solid rgba(112, 41, 157, 0.83);
   
    color: rgba(112, 41, 157, 0.83);
    height: 2rem;
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.contenido{
    font-family: 'Amatic SC', cursive;
    font-size: 1.5em;
    color: rgba(112, 41, 157, 0.83);
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.texto{
    font-size: 1.2em;
    font-family: 'Poiret One', cursive;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.image{
    border-radius: 4em;
    margin-left: auto;
    margin-right: auto;
}

ol li {
    background-color: #ebe7f4;
    width: 12rem;
    text-align: center;
}

ol li:hover:not(.active) {
    background-color: rgba(136, 79, 165, 0.26);
}

section h1 a{
    background-color: #ebe7f4;
}

section h1 a:hover:not(.active) {
    background-color: rgba(136, 79, 165, 0.26);
}

h3 a{
    background-color: #ebe7f4;
}

h3 a:hover:not(.active) {
    background-color: rgba(136, 79, 165, 0.26);
}

a{
    color: rgba(158, 52, 212, 0.53);
    text-decoration: none;
    font-family: 'mate_scregular';
}

header{
    background-color: rgba(136, 79, 165, 0.36);
    padding: .1em .2em;
    margin: .5em;
    width: 100%;
    box-sizing: border-box;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
}

header div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

nav ul {
    list-style: none;
    box-sizing: border-box;
    background-color: #ddd6f0;
    padding: .2em 1em;
    margin: .1em;
    
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

nav ul li a{
    background-color: #ebe7f4;
    font-family: 'mate_scregular' cursive;
    font-variant: small-caps;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: .3em;
    margin: .1em .2em;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
}

body header nav ul li a:hover:not(.active) {
    background-color: rgba(136, 79, 165, 0.26);
}

#dgpc{
    display: flex;
    flex-direction: row;
    align-self: center;
    padding: .3em .3em .3em .1em;
}

ol{
    list-style: upper-roman;
    font-size: 1.1em;
    padding: 0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

ol li{
    padding: .5em;
    margin: .2em;
    font-family: 'mate_scregular';
}

main section ul li{
    list-style: none;
    padding: .3em 0em;
    display: flex;
    justify-content: flex-start;
    
}

h3 {
    display: flex;
    flex-direction: row;
}

aside { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

aside div {
    display: flex;
    flex-basis: 18em; 
    margin: 1em; 
}

aside ul{
    padding: 0;
    list-style: none;
    
}
aside ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .95em
    
}

aside h5{
    background-color: rgba(136, 79, 165, 0.36);
    border-radius: 1em;
    box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    height: 8rem;
    width: 18rem;
    
}


aside img{
    margin: 1rem;
}

footer > * {
    color: rgba(82, 100, 147, 0.78);
    font-size: .9em;
    padding: .7em;
}



@media (min-width:30em) {
    body{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    
    header {
        width: auto;
    }    
    
    .body-media{
        font-size-adjust: auto; 
    }
    
    .body-media img{
        width: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
   
}