styles.css

/* FUENTES ELEGIDAS

font-family: 'Exo', sans-serif;
font-family: 'Martel', serif;
font-family: 'Nunito', sans-serif; */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f3f3f3;
    font-family: 'Martel', serif;
}

a {
    text-decoration: none;
}

.contenedor {
    width: 90%;
    /* Aquí establezo el ancho máximo de la página */
    max-width: 800px;
    /* Con margin auto, el contenedor principal 
    de la página va a estar siempre centrado */
    margin: auto;
}

/* -------------------------------------------
                    HEADER 
----------------------------------------------*/

header {
    /* De esta manera deja un padding superio e inferior 
    de 40 pixeles */
    padding: 40px 0;
}

header .logo {
    /* Estilos del título y subtítulo de la página */
    text-align: center;
    margin-bottom: 40px;
}

header .logo p {
    /* Estilos específicos del subtítulo */
    color: #9b9b9b;
}
header form {
    width: 100%;
    /* Uso display flex para organizar los 
    elementos internos de los contenedores */
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

header .barra-busqueda {
    /* Estilos de la barra del input (barra de búsqueda) */
    width: 70%;
    height: 40px;
    /* Para centrar el texto dentro del input */
    line-height: 40px;
    background: white;
    /* Cuando se ponene solo dos medidas, css asume
    que la primera es up and bottom y la segunda es
    para los lados */
    padding: 0 20px;
    /* Redondea los lados del field del input para que 
    queden como media circunferencia */
    border-radius: 100px;
    border: none;
    text-align: center;
    font-size: 16px;
}

header .categorias {
    /* Uso de flexbox para organizar los nombres 
    de las categorías */
    display: flex;
    /* Centrar todos los elementos de las categorías */
    justify-content: center;
    /* Flex wrap apila los elementos a medida que la 
    pantalla se va achicando */
    flex-wrap: wrap;
}

header .categorias a {
    /* Estilos de los textos de las categorías */
    color: #9b9b9b;
    margin: 10px 20px;
    font-size: 18px;
    font-weight: 500;

}

header .categorias a.activo {
    /* Estilo del texto de la categoría que 
    está activa por defecto al abrir el index */
    color: #000;
}

#nombre {
    font-family: 'Exo', sans-serif;
}

/* -------------------------------------------
                    GRID 
----------------------------------------------*/

.grid {
    position: relative;
    /* Para que abarque la totalidad del espacio 
    del contenedor previamente creado */
    width: 100%;
    /* Esta configuración se incluye para que todas
    las imagenes carguen al mismo tiempo y no una tras
    otra, dando un mejor efecto visual */
    /* Opacity cero hace que al inicio el espacio 
    donde van las imagenes se vea vacío y luego va a 
    cargar las imagenes con un delay (transición)  */
    opacity: 0;
    transition: opacity 0.5s linear 1s;
}

.grid.imagenes-cargadas {
    opacity: 1;
}

.grid .item {
    /* Para trabajar con la librería de Muuri
    se necesita que la posición sea absoluta. 
    Esta es una condición propia de la librería
    para trabajar correctamente con su algoritmo
    que calcula cómo reorganiza las imagenes en modo
    responsive y al hacer click sobre los elementos */
    position: absolute;
    display: block;
    padding: 0;
    margin: 10px;
    /* De esta manera el espacio queda dividido en 3 partes
    iguales en sentido vertical */
    /* Es necesario restar los pixeles del margin que 
    quedan a lado y lado de la imagen, porque de otra manera 
    se dañaría la disposición de los elementos y la tercera 
    imagen se pasaría hacia abajo al no caber completa */
    width: calc(33.333333% - 20px);
}

.grid .item-contenido {
    position: relative;
}

.grid .item img {
    /*  Para que la imagen abarque el espacio 
    completo que le fue asignado anteriormente */
    width: 100%;
    /* Para que el cursor cambie a una manito al pasarlo 
    por encima de la imagen */
    cursor: pointer;
    vertical-align: top;
    border-radius: 10px;
}

/* -------------------------------------------
        OVERLAY (IMAGEN EN DETALLE) 
----------------------------------------------*/

.overlay {
    /* De este modo la imagen quedará fija 
    en el centro de la pantalla y no se moverá 
    con el scroll del mouse o el dedo */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* El fondo detrás de la imagen quedará de color 
    negro pero con un factor alpha que le de transparencia */
    background: rgba(0,0,0,.9);
    /* Para que la imagen abarque el 100% del ancho 
    del dispositivo */
    width: 100%;
    /* Este abarca el 100% del viewport height */
    height: 100vh;
    /* Por defecto no debe mostrar la imagen, solo tomará el 
    efecto flex y se verá la imagen al hacer click en una de 
    la imagenes */
    display: none;
    /* Alinea de en sentido vertical */
    align-items: center;
    /* Alinea de en sentido horizontal */
    justify-content: center;
    /* Coloca los elementos uno encima del otro, en columna */
    flex-direction: column;
}

.overlay.activo {
    /* Esto hará que se muestre la imagen activa en el momento */
    display: flex;
}

.overlay img {
    /* Para que tome una medidad del ancho máximo del contenedor */
    max-width: 80%;
    border-radius: 10px;
}

.overlay .descripcion {
    display: block;
    background: #ffff;
    padding: 20px;
    text-align: center;
    margin-top: 5px;
    border-radius: 10px;
    max-width: 50%;
}

.contenedor-img {
    position: relative;
    text-align: center;
    display: block;
}

.overlay #btn-cerrar-popup {
    /* Le puedo quitar el background al 
    botón para dejar solo la silueta png */
    background: none;
    font-size: 20px;
    color: #fff;
    border: none;
    /* Para que cambién la apariencia del puntero 
    al posarlo sobre el botón de cerrar */
    cursor: pointer;
    /* Esto ubica el botón dentro del contenedor */
    position: absolute;
    /* Para ubicar el botón arriba hacia la derecha y 
    por fuera de la imagen (por fuera del contenedor)*/
    right: 20px;
    top: -20px;
}

/* -------------------------------------------
        ESTILOS PARA EL FOOTER 
----------------------------------------------*/

footer .redes-sociales {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 20px;
    /* Para que los iconos se acomoden 
    debajo de los otros cuando el tamaño
    de pantalla sea muy pequeño */
    flex-wrap: wrap;
}

footer .redes-sociales a {
    display: block;
    width: 60px;
    height: 60px;
    background: #000;
    color: #fff;
    margin: 20px;
    text-align: center;
    /* Para que el fondo del ícono se vea 
    de forma circular */
    border-radius: 100px;
    /* Incluye transición de 3 seg */
    transition: .3s ease all;
}

footer .redes-sociales a i {
    font-size: 25px;
    /* Esta medida debe corresponder 
    con la del height del bloque anterior */
    line-height: 60px;
}


/* Asignación de color para los íconos de redes sociales */
footer .redes-sociales .twitter {
    background: #1da1f2;
}

footer .redes-sociales .github {
    background: #211F1F;
}

footer .redes-sociales .linkedin {
    background: #0072b1;
}

/* ANIMACIÓN DEL LOGO GIRATORIO 
Se activa cuando el usuario pase el mouse 
sobre el icono  */

footer .contenedor-icono:hover a {
    animation: icono .5s ease;
}

@keyframes icono {
    from {
        transform: rotate3d(0,0,0,0);
    }
    to {
        /* El sentido de la rotación se establece 
        con los 3 ejes (y,x,z) y la cantidad de giros
        se ajusta en grados (degrees) */
        transform: rotate3d(0,1,0, 360deg);
    }
}

footer .creado-por {
    margin-bottom: 40px;
    text-align: center;
    font-size: 14px;
    color: #0072b1;
}

footer .creado-por a {color: #000;}
/* Para que se vea una línea debajo del texto
indicando que es un link a posar el mouse encima */
footer .creado-por a:hover {text-decoration: underline}

/* DISEÑO RESPONSIVE USANDO MEDIA QUERIES (@) */

@media screen and (max-width: 700px) {
    .grid .item {
        /* Aquí quiero que, cuando las pantallas 
        sean muy pequeñas, el algoritmo sea 
        recalculado para tener 2 columnas de 
        imágenes en vez de las 3 por defecto  */
        width: calc(50% - 20px);
    }
    /* Ampliar tamaño de la barrá de búsqueda
    a un 100% cuando se abra en mobile */
    header .barra-busqueda {
        width: 100%;
    }
}