footer {
    display: flex;
    flex-direction: column;
    background-color: rgb(22, 22, 22);
    color: rgb(214, 214, 214);
    font-weight: 300;
    gap: 2rem;
    font-size: 1.3rem;
}

footer .top {
    display: flex;
    justify-content: center;
    gap: 9rem;
    margin-top: 2rem;
}

footer .left {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

footer a {
    text-decoration: none;
    color: rgb(214, 214, 214);
    position: relative;
    padding: 0.7rem 0;
    transform: translateZ(0);
    transition: color 0.2s ease;
}

footer a::after {
    content: '';
    position: absolute;
    bottom: 0.4rem;
    left: -2%;
    height: 1px;
    width: 104%;
    background-color: rgb(255, 255, 255);
    opacity: 0;
    transition: opacity 0.2s ease;
}

footer a:hover {
    color: rgb(255, 255, 255);
}

footer a:hover::after {
    opacity: 1;
}

footer .right {
    font-size: 1.4rem;
    text-align: center;
    padding: 1.33rem 0 1.33rem 3rem;
    border-left: 1px solid rgb(83, 83, 83);
    white-space: nowrap;
}

footer .bottom {
    text-align: center;
    letter-spacing: 0.1rem;
    background-color: rgb(20, 20, 20);
    padding: 0.6rem 0;
    color: rgb(155, 154, 154);
    font-weight: normal;
}
@media screen and (max-width: 650px) {
    footer{
        gap: 0;
    }
    footer .top {
        gap: 0;
        flex-direction: column;
        margin-right: 1.5rem;
        margin-left: 1.5rem;
    }

    footer .left {
        margin: 0;
        padding-bottom: 2rem;
        padding-left: 3%;
        gap: 0;
    }

    footer .right {
        border: none;
        border-top: 1px solid rgb(83, 83, 83);
        padding: 3rem 0;
        white-space: normal;
    }
}