footer {
    margin-top: 120px;
    padding-bottom: 50px;
    text-align: center;
}

.social-footer {
    padding-bottom: 36px;
}

.footer-link {
    background-color: rgba(255, 255, 255, 0.01);
    border: 1px solid rgb(255, 255, 255);
    font-size: 25px;
    width: 50px;
    height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 200px;
    text-decoration: none;
    margin: 0 5px;

    transition: background-color var(--transition-time), color var(--transition-time), border-color var(--transition-time);
}

.youtube:hover {
    background-color: #f00;
    border-color: #f00;
}

.instagram:hover {
    background-image: linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
    );
    border-color: transparent;
}

.facebook:hover {
    background-color: #4267b2;
    border-color: #4267b2;
}

.spotify:hover {
    background-color: #1db954;
    border-color: #1db954;
}

@media only screen and (max-width: 1200px) {
    footer {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 992px) {
    footer {
        margin-top: 80px;
    }
}


@media only screen and (max-width: 768px) {
    footer {
        margin-top: 60px;
    }

    .copyright {
        font-size: 13px;
    }
}