footer {
    background: linear-gradient(135deg, #4a90e2, #8a2be2);
    color: #fff;
    padding: 1.25rem; /* 20px to rem */
    text-align: center;
    box-shadow: 0px -1rem 2rem rgba(0, 0, 0, 0.1); /* 0px -10px 20px to 0px -1rem 2rem */
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #f2f2f2;
    padding: 1.25rem; /* 20px to rem */
    text-align: center;
    width: 100%;
}

footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

footer a:hover {
    color: #ffd700;
}

@media (max-width: 48rem) {
    /* 768px to rem */
    footer {
        padding: 0.9375rem; /* 15px to rem */
    }
}