* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
    background: #000000;
}

/* Contenedor para los iconos de las redes sociales */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    width: 100vw;
}

/* Título */
.titulo {
    text-align: center;
    color: #fff;
    padding: 11px 19px;
    margin: 0 40px;
    animation: animate 1s linear infinite;
    text-shadow: 0 0 50px #0072ff, 0 0 100px #7700ff, 0 0 150px #9900ff,
        0 0 200px #0072ff;
    margin-top: 2em;
}

/* Lucecitas y tamaño de los iconos */
#address-card,
#youtube,
#twitter,
#github,
#facebook {
    text-align: center;
    font-size: 8em;
    /* Tamaño de los iconos */
    background-color: #18191f;
    color: #fff;
    box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,
        2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,
        inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,
        inset 2px 2px 10px #00000080;
    border-radius: 29px;
    padding: 11px 19px;
    margin: 0 40px;
    animation: animate 3s linear infinite;
    text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
        0 0 200px #0072ff;
}

/* Retraso en los iconos */
#twitter {
    animation-delay: 0.3s;
}

#facebook {
    animation-delay: 0.7s;
}

#github {
    animation-delay: 0.1s;
}

#youtube {
    animation-delay: 0.5s;
}

.titulo {
    animation-delay: 0.9s;
}

@keyframes animate {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(360deg);
    }
}
/* CSS para pantallas menores de 1116px */
@media screen and (max-width: 1116px) {
    .container {
        display: grid;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }

    #address-card,
    #youtube,
    #twitter,
    #github,
    #facebook {
        font-size: 6em;
        padding: 6px 15px;
    }

    .titulo {
        margin-top:0em;
    }
}