.container:before {
    content: '';
    background: #2BC0E4;
    /* background: #26D0CE 100%; */
    /* dark mode */
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 70px;
}
/* aqui é onde pega o efeito hover */
.container:hover:before {
    opacity: 1;
}
.squares li{
    background: var(--bg);
    width: 40px;
    height: 40px;
    border-radius: 20px;
    display: block;
    position: absolute;
    bottom: -40px;
    animation: up 6s infinite;
    animation-direction: alternate;
}
@keyframes up {
    from{
        opacity: 0;
        transform: translateY(90);
    }
    50%{
        opacity: 1;
    }
    to{
        opacity: 0;
        transform: translateY(-900px);
    }
}