footer {
    background-color: #224be3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#borda-footer {
    background-color: #2b2bbc;
}

#menus-footer {
    display: flex;
    justify-content: center;
}

#box-redes-sociais-footer {
    display: flex;
    justify-content: center;
}

#titulo-final-footer {
    color: white;
    text-align: center;
    font-family: NotoSans;
}

#texto-final-footer {
    color: white;
    text-align: center;
    font-family: NotoSans;
}

.menu-footer {
    color: white;
    text-align: left;
    font-family: NotoSans_Bold;
}

.menu-footer a {
    color: white;
}

.icone-rede-social-footer {
    display: block;
    margin: 0 auto;
    transition: all .2s cubic-bezier(.22, .61, .36, 1);
}

.icone-rede-social-footer:hover {
    transform: translateY(-2px);
    cursor: pointer;
}

@media screen and (max-width:640px) {
    footer {
        height: 30vh;
    }

    #borda-footer {
        width: 100%;
        height: 4%;
    }

    #menus-footer {
        gap: 10px;
    }

    #box-redes-sociais-footer {
        gap: 20px;
    }

    #box-final-footer {
        width: 100%;
        height: 20%;
    }

    #titulo-final-footer {
        font-size: 80%;
        letter-spacing: 2px;
    }

    #texto-final-footer {
        font-size: 65%;
        letter-spacing: 2px;
    }

    .menu-footer {
        font-size: 65%;
        letter-spacing: 2px;
    }

    .menu-footer a {
        border-bottom: 1px solid white;
    }

    .rede-social-footer {
        width: 15%;
    }

    .icone-rede-social-footer {
        width: 35px;
    } 
}

@media screen and (min-width: 641px) {
    footer {
        height: 35vh;
    }

    #borda-footer {
        width: 100%;
        height: 4%;
    }

    #menus-footer {
        gap: 10px;
    }

    #box-redes-sociais-footer {
        gap: 20px;
    }

    #box-final-footer {
        width: 100%;
        height: 20%;
    }

    #titulo-final-footer {
        font-size: 90%;
        letter-spacing: 2px;
    }

    #texto-final-footer {
        font-size: 90%;
        letter-spacing: 2px;
    }

    .menu-footer {
        font-size: 100%;
        letter-spacing: 2px;
    }

    .menu-footer a {
        border-bottom: 1px solid white;
    }

    .rede-social-footer {
        width: 20%;
    }

    .icone-rede-social-footer {
        width: 40px;
    }
}