/*SCROLL SUAVIZADO CON ESTA REGLA CSS MAS PROPIEDAD window.scrollTo(0,0); DE JAVASCRIPT*/
html{
    scroll-behavior:smooth;
}



#logotipo{
    margin-left:-9%;
    border-radius: 50%;
    padding:2%;
    background: linear-gradient(to bottom,#117ba7,white);
    transition:all 300ms;
}

#logotipo h1{
    
    transition:all 500ms;
}

#logotipo h1:hover{
    transform:scale(1.5);
    color:mediumblue;
    /*font-size:120%;*/
}



/*ENCABEZADO DE LA WEB  QUE DICE RED SOCIAL PARA COMPARTIR IMÁGENES*/
#presentacion{
    text-align: center;
    font-weight:bold;
    color:white;
    text-shadow: 15px 3px 29px black;
}

/*ESTILOS DE LA BARRA SUPERIOR DEL MENU PRINCIPAL*/
.navbar-expand-md .navbar-collapse{
    padding-top:1%;
}

.navbar-nav ml-auto li:hover a{
    color:blue;
}

/*ESTILOS DEL SALUDO DEL USUARIO ARRIBA A LA DERECHA DEL MENÚ PRINCIPAL (HOLA FULANITO) */
#navbarDropdown{
    margin-left:81%;
    color:mediumblue;
    text-transform:uppercase;
    font-size:110%;
    transition:all 300ms;
}

#navbarDropdown:hover{
    color:deepskyblue !important;
}





/*ESTILOS DE LOS BOTONES DE BORRAR Y ACTUALIZAR IMAGEN*/
.actions{
    margin-left:2%;
    margin-bottom:2%;
    
}



/*ESTILOS DEL AVATAR DEL USUARIO QUE SE MUESTRA EN LA MINIATURA AL EDITAR DATOS USUARIO*/ 
 form .avatar{
    display: block;
    width: 100px;
    margin-bottom: 15px;
}

/*ESTILOS LABEL QUE PONE CAMBIAR AVATAR EN LA EDICION DE DATOS DE USUARIO*/
.labelavatar{
    display:block;
    margin-left: -39%;
    margin-top: 14%;
    margin-bottom: -10%;
}


/*ESTILOS DEL AVATAR QUE APARECE CUANDO UN USUARIO SUBE UNA IMAGEN EN EL LISTIN DE IMAGENES*/
.imagen_publicada .container-avatar{
    width: 65px;
    height: 65px;
    border-radius: 900px;
    overflow: hidden;
    float:left;
}

/*ESTILOS DE LA IMAGEN DEL AVATAR QUE SALE EN EL MENU ARRIBA A LA DERECHA AL LOGARNOS */ 
.navbar .container-avatar{
    width: 65px;
    height: 65px;
    border-radius: 900px;
    overflow: hidden;
    margin-left: 191%;
    margin-top: -14%;
}

.profile-user{
    height: 200px;
    margin-bottom: 40px;
}




/*Estilos de la imagen de la foto que aparece en el perfil de usuario*/
.profile-user .container-avatar{
    width:200px;
    height: 200px;
    border-radius:900px;
    overflow: hidden;
    float: left;
}
/*EStilos de la imagen en si de la foto de perfil*/
.profile-user .container-avatar img{
    height: 100%;
}

.profile-user .user-info{
    padding-left:30px;
    float: left;
    padding-top:30px;
}








/*ESTILOS DE LA ETIQUETA IMG DE LA IMAGEN DEL AVATAR QUE ESTA EN EL MENU Y DEL AVATAR QUE APARECE
CUANDO SE SUBE UNA IMAGEN*/
.navbar .container-avatar img,
.imagen_publicada .container-avatar img{
    height:100%;
    width: 100%;
}

/*ESTILOS DEL NOMBRE Y APELLIDOS  QUE APARECEN AL LADO DEL AVATAR AL PUBLICAR UNA IMAGEN*/
.imagen_publicada .data-user{
    font-weight: bold;
    margin-left:11%;
    margin-top: 6%;
}

/*ESTILOS DEL NOMBRE Y APELLIDOS  QUE APARECEN AL LADO DEL AVATAR AL PUBLICAR UNA IMAGEN
CUANDO ESTAMOS EN LA PANTALLA DE DETALLE DE LA IMAGEN DONDE SE VE LA IMAGEN MAS AMPLIADA*/
.imagen_publicada .data-user-detail{
    font-weight: bold;
    margin-left: 7%;
    margin-top: 4%;
}


/*ESTILOS DEL ENLACE DEL NOMBRE Y NICK PARA VER EL DETALLE DE LA FOTO*/
.imagen_publicada .data-user a{
    color:#444;
}

/*ESTILOS DEL DIV PRINCIPAL QUE CONTIENE TODO EL CONTENIDO*/
.py-4{
    min-height:100vh; ;
}

/*ESTILOS DEL NICK QUE SALE CON LA ARROBA AL LADO DEL NOMBRE DEL USUARIO CUANDO PUBLICA IMAGEN*/
.imagen_publicada .nickname{
    color:gray;
}


/*ESTILOS DE LAs TARJETAS */
.card{
    margin-bottom: 5%;
}

/*ESTILOS DEL CUERPO DE LA TARJETA */
.card .card-body{
    padding:3%;
}


/*ESTILOS A LA HORA DE MOSTRAR LAS IMAGENES SUBIDAS EN EL HOME INDEX ES DECIR EN PAGINA PRINCIPAL*/
.image-container{
    /*width: 100%;*/
    max-height: 400px;
    overflow: hidden;
}

/*ESTILOS DE LAS IMAGENES EN SI QUE ESTAN EN LA PANTALLA PRINCIPAL DE TODAS LAS FOTOS SUBIDAS*/
.image-container img{
    width: 100%; /*ESTO HACE QUE LA IMAGEN SE VEA TODA ENTERA Y SE AJUSTE AL ESPACIO DE LA TARJETA*/
}

/*ESTILOS DEL CONTENEDOR DE LA IMAGEN CUANDO ESTAMOS EN LA PANTALLA DE DETALLE DE LA FOTO*/
.image-container-detail{
    /*width: 100%;*/
    max-height: 100vh;
    overflow: hidden;
}
/*ESTILOS DE LA IMAGEN CUANDO ESTA EN LA PANTALLA DE DETALLE DE LA IMAGEN */ 
.image-container-detail img{
    width: 100%;
}


/*ESTILOS DE LA DESCRIPCION QUE INCLUYE EL NICK Y LA DESCRIPCION*/
.imagen_publicada .description{
    padding: 2% 2% 0 2%;    
}


/*ESTILOS DEL BOTÓN AMARILLO COMENTARIOS  QUE APARECE EN CADA IMAGEN SUBIDA*/
.imagen_publicada  .btn-comments{
    margin:2%;
    margin-top: 0;
}

/*ESTILOS DEL DIV QUE CONTIENE LA IMAGEN DEL CORAZON DE LIKE*/
.likes{
    padding: 1% 2% -1% 2%;
}

/*ESTILOS DE LA IMAGEN DEL CORAZON DE LIKE*/
.likes img{
    width:40%;
}

/*ESTILOS DEL CONTENEDOR FLEXBOX DEL BOTON COMENTARIOS Y EL CORAZON DE LIKES DE CADA IAMGEN*/
.container-comentarios-likes{
    display:flex;
    justify-content:flex-end;
    margin-top: -5%;
}

/*ESTILOS DEL CONTENEDOR FLEXBOX DE COMENTARIOS Y CORAZON DE LIKES DENTRO DE DETALLE DE IMAGEN*/
.container-comentarios-likes-detail{
    display: flex;
    margin:-5% 0 4% 1.7%; 
    justify-content: flex-end;
}


/*ESTILOS DEL TÍTULO COMENTARIOS(NUMERO COMENTARIOS) DEL H2 QUE ESTÁ EN EL DETALLE DE LA IMAGEN ANTES DE COMENTARIOS*/
#comentarios{
    color:blue;
}



/*ESTILOS DEL FORMULARIO PARA INTRODUCIR COMENTARIO A LA IMAGEN DENTRO DE DETALLE IMAGEN*/
.card .formulario-comments{
    padding: 0 2% 2% 2%;
}


/*ESTILOS DEL NUMERO DE LIKES QUE TIENE LA PUBLICACION AL LADO DE LOS CORAZONES*/

.number_likes{
    color:gray;
    font-size:11px;
}



/*ESTILOS DEL DIV  DE LOS BOTONES DE EDITAR DATOS DEL USUARIO(GUARDAR CAMBIOS Y CANCELAR*/
#botones-editar{
    display:flex;
    justify-content:space-between;
}


/*BOTON DE CANCELAR LA EDICIÓN DEL USUARIO*/
#cancelaredicion{
    height:51%;
    
}


/*ESTILOS DE LA CARD DE ACERCA DE DEL MENÚ DE AYUDA ACERCA DE Y DE SOPORTE TÉCNICO*/

#ayudaacercade .card-body,
#ayudasoporte .car-body{
   padding:3%;
}

#ayudaacercade .card-header,
#ayudasoporte .card-header{
    background: skyblue;
}
#ayudaacercade .card-footer,
#ayudasoporte .card-footer{
    background:powderblue;
}




/*ESTILOS ICONOS TECNOLOGIAS USADAS EN ACERCA DE*/

#tecnologias{
    display: flex;
    margin-top:1.5%;
    justify-content: space-evenly;
    align-items: flex-end;
}


/*TAMAÑO ICONOS DE TECNOLOGÍAS USADAS*/

#html5 img{
    width:50%;
}

#css3 img{
    width:50%;
}

#javascript img{
    width:50%;
}

#jquery img{
    width:50%;
}

#ajax img{
    width:50%;
}

#php img{
    width:50%;
}


#laravel img{
    width:50%;
}

/*ESTILOS SOPORTE TÉCNICO/CONTACTO*/
#soporte-tecnico{
    width:98%;
    margin:3% 0 3% 0;
}
/*ESTILOS DE LA CARD DE SOPORTE TECNICO CONTACTO*/

#ayudasoporte{
    padding:2%;
}

#ayudasoporte .card-header h4{
    text-decoration:underline;
}


/*ESTILOS DEL PARRAFO DE ACEPTACION DE LA POLÍTICA DE PRIVACIDAD AL REGISTRARTE*/
#aceptarpolitica{
    color:#ccc;
    font-size:100%;
}


/*ESTILOS DEL ICONO DE LA FLECHA QUE HACE SCROLL HACIA ARRIBA AL PULSAR*/
#scroll img{
    width: 2.5%;
    float: right;
    margin-right: 2%;
    cursor: pointer;
}


/*ESTILOS FOOTER*/
footer{
    display:flex;
    Height: 80px;
    /*border:1px solid #c9c9c9;*/
    text-align: center;
    background: linear-gradient(to bottom,#b5dbeb,white);
    padding: 1%;
    padding-top:2%;
    font-weight: bold;
    justify-content:flex-start;
}






/*ESTILOS DE IMAGEN DEL ICONO DE LINKEDIN*/
footer #linkedin img{
    margin-top:-7%;
    width:20%;
}




/*MEDIA QUERIES*/

@media(min-width:1000px){
    #logotipo{
        margin-left:-12%;
    }
}

@media(max-width:800px){
    #logotipo{
        margin-left:5%;
    }
}


@media(max-width:500px){
    /*ESTILOS DE LOS ICONOS DE LAS TECNOLOGÍAS EN LA PANTALLA DE ACERCA DE   */
    #html5 img,
    #css3 img,
    #javascript img,
    #jquery img,
    #php img,
    #laravel img{
        width:40%;
    }
    
    /*ESTILOS PIE DE PÁGINA*/
    
    
    
    /*ESTILOS DE LA FUENTE DE AVISO LEGAL PRIVACIDAD Y AUTOR*/
    footer #autor,
    footer #avisolegal,
    footer #privacidad{
        font-size:10px;
    }
    
    
    
    /*ESTILOS DEL ICONO DE LINKEDIN DEL PIE DE PÁGINA*/
    footer #linkedin img{
        width:90%;
    }
    
    .card{
        padding:5%;
    }
    
    /*ESTILOS DEL AVATAR CUANDO ES EN MOVIL Y EL MENU SE DESPLIEGA HACIA ABAJO CUANDO SE PULSA ENCIMA*/
    .navbar .container-avatar {
        margin-left: 81%;
    }
    
    /*ESTILOS DE LA CABECERA DE CADA IMAGEN EL TITULO DEL USUARIO QUE LA PUBLICA */
    .imagen_publicada .data-user{
        margin-left:25%;
    }
    
    
    /*BOTON AMARILLO COMENTARIOS */
    #comentarios{
        margin-top:7%;
        margin-right: 46%;
    }
    
    
    
    
}