@media (max-width:890px){
    header #menu a{
        padding-right: 2%;
        padding-left: 2%;
    }
    
    #contacto p{
        width: 111%;
    }

}


@media(max-width:886px){
    #contacto{
        width:86%;
    }
}

@media(max-width:820px){
    #contacto{
        width:90%;
    }
}

@media(max-width:770px){
    #contacto{
        width:92%;
        font-size:90%;
    }
}



@media(max-width:700px){
    
    /*ESTILOS DE LOS H2 DE TÍTULO DE CADA APARTADO*/
    #contenidoprincipal h2{
        margin-top: 6%;
        margin-bottom:5%;
    }


    /*PONER EN EL SOBRE MÍ LA IMAGEN Y LUEGO MI HISTORIA,COMO ES FLEXBOX UNICAMENTE CAMBIO EL FLEX DIRECTION*/
    #sobremi{
        flex-direction: column;
        padding:7%;
        width:80%;
    }

    /*ESTILOS DEL TEXTO EXPLICANDO SOBRE MI */
    #texto_sobremi{
        padding-top: 10%;
    }

    /*ESTILOS DE LOS DATOS DE CONTACTO*/
    #telefono, #email, #linkedin, #contacto a{
        height: 46px;

    }

    /*Estilos de la tarjeta en sí de contacto (div)*/
    #contacto{
        margin-bottom: 7%;
        font-size: 109%;
        width:91%;
        padding:2%;
        padding-left:4%;
    }
    /*Párrafo de contacto dentro de apartado contacto*/
    #contacto p{
        font-size: 105%;
        width:111%;
    }
}


@media(max-width:657px){
    #contacto{
        width:90%;
        font-size:106%;
    }
}





@media(max-width:635px){
    header #menu a{
        padding-right: 1%;
        padding-left: 1%;
    }
}



@media(max-width:595px){
    #contacto{
        font-size:102%;
    }
}



@media(max-width:580px){
    *{
        animation: none;
    }

    /*ESTILOS DE LOS H2 DE TÍTULO DE CADA APARTADO*/
    #contenidoprincipal h2{
        margin-bottom:10%;
    }



    header h1{
        padding:4%;
    }

    header #menu{
        flex-direction: column;
        background: none;
    }

    header #menu a{
        border-bottom:1px solid cyan;
    }

    header #menu a li {
        color:orangered;
        font-weight: bolder;
    }


    
    /*Ponemos los proyectos en vertical ya que es flexbox para que se vea mejor en pantallas pequeñas*/
    #misproyectos{
        flex-direction: column;
    }


    #misproyectos a{
        width:95%;
        margin:0 auto;
        margin-bottom: 10%;
    }

    #contacto{
        font-size:120%;
    }



}


@media(max-width:553px){
    #contacto{
        padding-left:3%;
        font-size:116%;
    }
}



@media(max-width:533px){
    #contacto{
        font-size:91%;
    }
}




@media(max-width:509px){
    #contacto{
        font-size:85%;
    }
}



@media(max-width:480px){
    #contacto p{
        font-size:124%;
        font-weight: bolder;
    }
}




@media(max-width:456px){
    #contacto p{
        font-size:97%;
    }
}



@media(max-width:426px){
    #contacto p{
        font-size:91%;
    }
}



@media(max-width:394px){
    #contacto p{
        font-size:83%;
    }
}


@media(max-width:363px){
    #contacto p{
        font-size:77%;
    }
}



@media(max-width:340px){
    #contacto a,
    #telefono,
    #email,
    #linkedin{
        height: 37px;
    }

    #contacto p{
        font-size:73%;
    }

}

@media(max-width:318px){
    #contacto p{
        font-size:70%;
    }
}



@media(max-width:307px){
    #contacto p{
        font-size:66%;
        width:100%;
    }
}