@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2&display=swap');

* {
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    margin: 0 0 0 0;
    font-family: sans-serif;
    box-sizing: border-box;
    max-width: 100%;
}



/*      header      */

header { 
    display: flex;
    flex-direction: column;
    background-color: #af00af;
}


#Logos {display: block;
    text-align: center;
    margin: 0.5em;
    
}

#fadu {
    display: inherit;
}

#dgpc {
    display:inherit;
    text-align: center;
     width: 60%;
    padding: 1em;
}


/*       NAV    */



nav{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#trabajo {
    display: flex;
    flex-direction: column;
    justify-content: center;
     width: 70%;
}


nav li {
    list-style: none;
}


nav ul li a {
    display: block;
    background-color: #ffec5c;
    margin: 0 0 0.4em 0em;
    text-align: center;
    color: #44016b;
    text-decoration: none;
    padding: 0.4em;
    border-radius: 20px 20px 20px 20px;
    font-family: 'Concert One', cursive;
    font-weight: 400;
    font-size: 1.5em;
}


nav ul li a:hover{ 
    color: #ffec5c;
    background-color: #44016b;
}


/*      MAIN   */



h1 , h2 , h3 {
    padding: 1em;
    text-align: center;
    font-family: 'Concert One', cursive;
    font-weight: 400;
    font-size: 1.5em;
}


main ul {
    list-style: none;
}

main a { 
    text-decoration: none;
    color: #af00af;
    
}


main {
    display: flex;
    align-items: center;
    flex-direction: column;
     background-image: url(Imagenes/Star.svg);
    background-repeat: repeat;
    background-size: contain;
    font-size: 70%;
}



/*         Mi INFO      */



#Yo {
    padding: 2em;
}

p{font-family: 'Baloo Da 2', cursive;
line-height: 1.2em;}

#Alumna {display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    padding: 3em 2em 3em 2em;
    color: #44016b;
    width: 70%;
    background-color: #ffec5c;
    outline: 6px double #ffec5c;
    outline-offset: 10px;
    border-radius: 30px 30px 30px 30px;
    margin: 2em 0 2em 0;
    
}

#Alumna a {font-family: 'Baloo Da 2', cursive;
    font-weight: 700;
    line-height: 1.2em;
    
}

#Alumna p{font-family: 'Baloo Da 2', cursive;
    font-weight: 700;
}
    



/*         Mis  TPS      */


#titulo {
    display: block;
    color: #ffec5c;
    background-color: #af00af;
    border-radius: 30px 30px 30px 30px;;
    margin-top: 2em;
}



.tp {display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    padding: 3em 2em 3em 2em;
    color: #ffec5c;
    width: 70%;
    background-color: #af00af;
    border-radius: 30px 30px 30px 30px;
    margin: 2em 0 2em 0;
    
}

#tapa img { padding: 2em 0 0 0; }

#separador{
    display: inherit;
    padding-top: 1em;
    padding-left: 3em;
width: 80%;
}


#aparato img {padding: 3em 0 0 0;}






/*     FOOTER    */





footer {
    color: #44016b;
    padding: 2em 1em 2em 1em;
    background-color: #af00af;
    font-size: 70%;
}

footer p {
    font-family: 'Baloo Da 2', cursive;
    font-weight: 700;
    line-height: 1.2em;
    padding: 1em 0 0 0;
}


footer ul {
    list-style: none;
}

footer a { font-family: 'Baloo Da 2', cursive;
    font-weight: 700;
    text-decoration: none;
    color: #ffec5c;   
}


footer li { font-family: 'Baloo Da 2', cursive;
    font-weight: 700;
    line-height: 1em;
}




footer h2 {
    color: #ffec5c;
text-align: center;
    padding-top: 2em;}



#catedra {display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 2em;
    border-bottom: .1rem solid #ffec5c;
}

#dgpc2 img{display:inherit;
    text-align: left;
    width: 90%;
}


#materia {
    padding-top: 0.5em;
}


 #compañeras {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: .1rem solid #ffec5c;
     padding-bottom: 2em;
}


#compañeras li {
    list-style: none;
    padding: 0.3em;
}


#compañeras li a {
    display: block;
    background-color: #44016b;
    margin: 0 0 0.4em 0em;
    text-align: center;
    color: #ffec5c;
    text-decoration: none;
    padding: 0.4em;
    border-radius: 20px 20px 20px 20px;
     font-family: 'Concert One', cursive;
    font-weight: 400;
    font-size: 1.2em;
}


#compañeras li a:hover{ 
    color: #44016b;
    background-color: #ffec5c;
}









/*      MEDIA      */




@media screen and (min-width:420px){
    
    
    
    #Logos {
    display: block;
    text-align: center;
         
    }  
    
    #fadu {  display: inherit;
        width: 50%}
    
    #dgpc {  display: inherit;
        width: 30%}
    
    
    
    #Alumna {
    padding: 3em 4em 3em 4em;}
    
    
    #materias h3 {
        padding-left: 0;
    }
    
    
    
    
    .tp {padding: 3em 4em 3em 4em;}
    
    #separador {
    display: inherit;
    padding-top: 2em;
    padding-left: 4em;
width: 80%;
}
    
    
    #aparato img {padding: 4em 0 0 0;
    width: 100%}
    
    
    
    
    footer {
    padding: 2em 3em 2em 3em;
}
    
    #catedra {
    padding-bottom: 1em;
    border-bottom: .1rem solid #ffec5c;}
    
    #dgpc2 img{display:block;
    text-align: left;
    padding-top: 0.5em;
    padding-right: 2em;
    width: 100%;
    
}
    #materia {
        padding-top: 1em;
    }
    
    
}



@media screen and (min-width:600px){
    
    
    
    main {font-size: 80%}
    
     #Alumna {
    padding: 3em 6em 3em 6em;}
    
    .tp {padding: 3em 6em 3em 6em;}
 
    
    footer {font-size: 80%;
    padding: 2em 5em 2em 5em}
    
     #materia {
        padding-top: 1.3em;   }
    #materia li {
        line-height: 2em;
    }
    
    #dgpc2 {
        width: 30%
    }
    
    
    
    
    
}

    
    
    
    

@media screen and (min-width:748px){
    
    
   
    #Logos {
    display: block;
    text-align: center;
         
    }  
    
    #fadu {  display: inherit;
        width: 50%}
    
    #dgpc {  display: inherit;
        width: 30%}
    
     #trabajo {
    display: flex;
    flex-direction: row;
    padding: 0.3em 0 1em 0;
}
    
    nav ul li a {
        margin: 0 1em;
        padding: 1em 0;
        font-size: 1em;
    
    }
    
    nav li {width: 100%;}
    
    
    
    
      #Alumna {
    padding:3em 4em 3em 4em;
    display: flex;
    flex-direction: row;
          justify-content: center;
    }
    
    #Alumna p {
        padding: 0 3em 0 3em;
    }
    
    
    #titulo {
        width: 70%
    }
    
    
    #materias{padding-left: 2em;
        
    }
    
    
    
.tp {padding: 0;
width: 90%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: transparent;
    }

    
    .tp img {
        width: 60%;
        align-self: center;
    }
    
    
#separador {
    display: inherit;
    padding-top: 1em;
          padding-left: 0;
          padding-right: 0;
          margin: 0;
width: 58%;
}
    
    
    #Libro {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #af00af;
        align-self: flex-start;
        width: 80%;
        border-radius: 30px 30px 30px 30px;
        padding: 3em;
        margin: 2em;
    }
    
    #tapa img {
        padding: 1em 0 0 2em;
        width: 90%;
    }
    
    #Generador {
           display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: flex-start;
        background-color: #af00af;
        width: 80%;
        border-radius: 30px 30px 30px 30px;
        padding: 3em;
        margin: 2em;
    } 

    
      #pastillas {
        padding-top: 2em;
        
    }
    
    
      #aparato img {padding: 1em 0 0 3em;
    width: 80%}
    
    
    
    
    
  
    footer p {
        padding-left: 12em;
    padding-right: 12em;
    }
    
footer {padding: 2em 9em 2em 9em}
        
          #catedra {padding-bottom: 2em;
    border-bottom: .2rem solid #ffec5c;
}
    #compañeras { padding-bottom: 2em;
    border-bottom: .2rem solid #ffec5c;
}  
    
    footer p { display: inherit;
        margin-top: 1em;
        padding-right: 0;
        padding-left: 0}
    
    #materia {
        padding-top: 0.5em;
    }
    
     #dgpc2 img{
            text-align: left;
         padding-right: 1em;
}
        #dgpc2 {
            width: 20%;
        }
    
    
    
}





@media screen and (min-width:840px){
    
    
    
      
    
    
   #trabajo {
    display: flex;
    align-content: flex-start;
    flex-direction: row;
    padding: 0.3em 0 1em 0;
}
    
    nav ul li a {
        margin: 0 1em;
        padding: 1em 0;}
    
    nav li {width: 100%;}
    
     #Logos {
    display: block;
    text-align: center;
         
    }   
    
    #fadu {
    display: inherit;
     width: 40%;
    height: auto;
    max-width: 100%;
    padding: 1em;
}

#dgpc {
    display:inherit;
     width: 20%;
    height: auto;
    max-width: 100%;
    padding: 1em;
}
  
         
         
          footer p { display: inherit;
        margin-top: 1em;
        padding-right: 5em;
      padding-left: 10em}
    
            #materia {
            padding-top: 1em;
        }
        
        #dgpc2 img{
            text-align: left;
}
        #dgpc2 {
            width: 20%;
        }
        
         #catedra {
    border-bottom: .2rem solid #ffec5c;
}
    #compañeras {
    border-bottom: .2rem solid #ffec5c;
}     
        

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



      #Alumna {
    padding:3em 4em 3em 4em;
    flex-wrap: nowrap;
        background-color: transparent;
    }
    
    
     #Alumna p {
        padding: 0;
    }
    
    
    #Yo {
        width: 30%;
    }
    
     #materias {
        display: block;
        background-color: #ffec5c;
         border-radius: 20px 20px 20px 20px;
          padding: 3em 2em;
         margin: 0.5em;}
    
    #datos {
        display: block;
        background-color: #ffec5c;
         border-radius: 20px 20px 20px 20px;
         padding: 2em;
    width: 100}


    #materia {
        padding-top: 2em;
    }
    
    
    
}  
    
    
@media screen and (min-width:1200px){
    
    
    
    
    
    nav ul li a {font-size: 1.3em}
        p {font-size: 1.3em}
        main li , footer li {font-size: 1.3em}
           h1 , h2 , h3 {
        font-size: 2em;
    }
        
    
    #materias {
        padding: 4em 2em;
    }
    
    
    
    
    #tapa {
        margin-left: 1em;
    }
    
    #aparato img {
        margin-left: 2em;
    }
    
    
       #materia {
            padding-top: 2.5em;
        }
    
    #materia li {
        line-height: 2em;
    }
    
    
    
    
    
    
    
    
}
    

@media screen and (min-width:1400px){
    
    
    
    
    
    
       nav ul li a {font-size: 1.5em}
        p {font-size: 1.5em}
        main li , footer li {font-size: 1.5em}
        h1 , h2 , h3 {
        font-size: 2em;
    }
        
    
    
    #Yo {padding: 0 4em 0 1em;
        margin-right: 0;
    align-self: center;
    width: 30%}
    
    
    #materias {
        padding: 4em 2em;
    }
    
    
    
    #aparato img{padding-left: 7em;
        
    }
    
    #tapa img{padding-left: 4em;
        
    }
    
    

    #Generador figure img { margin-left: 8em;
        
    }
    
     #separador {
         padding-top: 3em;
        width: 40%;
    }
        
    footer p { display: inherit;
        margin-top: 1em;
        padding-right: 5em;
        padding-left: 7em}
    
   #materia {
            padding-top: 3em;
        }
    
     #materia li {
        line-height: 5em;
    }
    
}



    
    
    @media screen and (min-width:1500px){
        
              
        nav ul li a {font-size: 2em}
        p {font-size: 2em}
        main li , footer li {font-size: 2em}
        
        #Alumna {margin-top: 6em}
        
        #materias {
            padding: 6em 0;
        padding-left: 2em;
        }
        
         #Yo {padding: 0;
             margin: 1em;
    align-self: center;
             width: 60%}
        
               h1 , h2 , h3 {
        font-size: 3em;
    }

        
        
        
        #catedra {
    border-bottom: .4rem solid #ffec5c;
}
    #compañeras {
    border-bottom: .4rem solid #ffec5c;
}    
        
    footer p { display: inherit;
        margin-top: 1em;
        padding-right: 0;
        padding-left: 0}
        
        #materia {
            padding-top: 3em;
        }
        
        #dgpc2 img{
            text-align: left;
}
        #dgpc2 {
            width: 20%;
        }
        
        
        
        
    }



@media screen and (min-width:1752px){
    
    
     h1 , h2 , h3 {
        font-size: 3em;
    }
    
    #materias {
        padding: 4em;
    }    
    
}

@media screen and (min-width:1800px){
    
    
    #materias {
        padding: 3.6em;
    } 
    
     #materia {
            padding-top: 4em;
        }
    
    
}




@media screen and (min-width:2416px){
    
    
    h1 , h2 , h3 {
        font-size: 3em;
    }
    
    
    #Yo {
        width: 30%;
    }
    
    #datos {
        padding: 2.5em 6em 2.5em 6em;
    }
    
    #materias {
        padding: 2.6em;
    }
    
    
    
    .tp p {
        margin: 0 7em 0 7em;
        font-size: 2.2em;
    }
    
    
    #separador {
        width: 40%;
    }
    
    
    #tapa img{padding-left: 9em;
        
    }
    
    
    #Generador img{
        width: 45%;
    }
    
    
    #aparato img{
        width: 60%;
        margin-left: 13em;
        
    }
    
     #materia {
            padding-top: 4em;
        }
       
    #materia li {font-size: 2.5em;
        line-height: 1.5em;
        
    }
    
   #dgpc2 {
            width: 15%;
        } 
    
    footer p {
        font-size: 2.2em;
        margin-left: 8em;
    }
    
    
}