main,
body {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    list-style: none;
    text-decoration: none;
    margin: 0; 
}
 
body {background: linear-gradient(#99cccc, #cccc66);}

/* HEADER */


header {
    height: 3.5em;
    background: #3f3f3f;
    font-weight: 400;
    text-transform: capitalize;
    font-size: 0.8rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    display: flex;
    justify-content: center;
    text-transform: lowercase;
    letter-spacing: 0.2em;
}

#cajaheader {
    padding: 0 5vh; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;}


#vm35 {
   color: #99cccc;   
   font-weight:700;
   justify-content: flex-start;
    font-size: 1rem;
}

#menu {height: 1.6em; cursor: pointer;} 

#vm35:hover {color: #f8f8f8;}

#menudesplegable {
    position: absolute; 
    top: 2.9em; 
    right: 5vw; 
    width: auto;
    height: auto;
    background-color: #3f3f3f; 
    font-size: 1em;
}

#menudesplegable li {height: 2.5em; list-style: none; margin-right: 2em; }

#menudesplegable {display: none;} 

#menudesplegable a {color: #ff9999;}

#menudesplegable a:hover{color: #f8f8f8;}

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

/* YO */

#micaelagushiken {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center; 
    height: 90vh;
}

#fotomica {
    border-radius: 50%;
    max-width:100%;
    height: auto;
}



#fotoflecha {
    max-width:7%;
    height: auto; 
}

@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

#fotoflecha {
    animation: blink 0.6s;
    animation-iteration-count: infinite;
}


#listamaterias {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-self: center; 
}

.materiasaprobadas {display: flex; flex-direction: column; width: auto;}

.materiascurso {display: flex;flex-direction: column; width: auto; }

#comitente {
    display:flex;
    flex-direction: column;
    align-self: center;
}

h1 {
    color: #ffffff;
   font-family: 'Roboto', sans-serif;
   font-size: 2em; 
   font-weight: 300;
   text-transform: lowercase;
    letter-spacing: 0.2em;   
}


h2 {
    color: #575757;
   font-family: 'Roboto', sans-serif;
   font-size: 1em; 
   font-weight: 400;
   text-transform: uppercase;
    letter-spacing: 0.5em;   
}


h3 {
    color: #ffffff;
   font-family: 'Roboto', sans-serif;
   font-size: 1.3em; 
   font-weight: 400;
   text-transform: lowercase;
    letter-spacing: 0.2em;
   
}

#listamaterias li {
    color: #575757;
   font-family: 'Roboto Slab', serif;
   font-size: 1em; 
   font-weight: 400;
    text-transform: none;
    height: 2.5em;
    list-style: none;
}

#comitente p {
    color: #575757;
   font-family: 'Roboto Slab', serif;
   font-size: 1em; 
   font-weight: 400;
    text-transform: none;
    margin: 10px 0;
    list-style: none;
    
}


/* FOOTER */

footer{
    background:#333333;
    width: 100%;
    height: auto;
    color: #ffffff;  
    font-family: 'Roboto slab', serif;
    font-size: 0.8em;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#datos {
    display: flex; 
    flex-direction: row;    
}

#datos a {display: flex; flex-direction: row; height: 8vh; }

#datos p {
    color: white;
    width: 25vw; 
    display: flex; 
    align-self: center;
}

#datos img {
    width: auto; 
    height:4vh;
    display: flex;
    align-self: center;
    margin-right: 1em;
}

#fadu {
    display: flex; 
    align-items: center;
    flex-direction: row; 
}

hr {
    size: 1px;
    width:90%;
    color:#ffffff;
}


/*MEDIA*/

@media (max-width: 700px) {
    /*main {margin: 0px; padding: 0.1em;}*/ 
    #menudesplegable {font-size: 1.2em;}
    h1 {font-size: 1.8em;} 
    h2 {font-size: 1em;margin: 7em 0px;}
    h3 {font-size: 1.5em;}
    #listamaterias li {font-size: 1em;}
    #fotomica {width:50%; height:auto; }
    #fotoflecha {width:35%; height:auto; }
    #micaelagushiken{height: 90vh;} 
   /* .materiasaprobadas {margin: 1em 0.8em ;}
    .materiascurso {margin: 1em 0.8em ;} */
    #comitente {margin: 1em 0.8em;}
    footer {height: auto;}
    #datos {margin: 2em;
            width: 90vw;
            height: auto;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            }
    #datos a {height:auto; flex; flex-direction: column; align-content: center;}
    #datos img {width: auto; height: 4vh; }
    #autoria {width: 85%;}  
          }
            
@media (min-width:1000px){
    #micaelagushiken{height: 90vh;}
    h1{margin: 1em 0px; }
    h2{margin: 5em 0px; }
    .materiasaprobadas {margin: 0px 5em;}
    .materiascurso {margin: 0px 5em;}
    #comitente {margin:5em;  width: 55%;}
    #datos {margin: 2.5em 0px; 
        display: flex;
        flex-direction: row;
        align-items:center;}
    #autoria {margin: 2em; width: 90%;}        
            
        }