@import url('./fonts.css');

/* Footer */
.footer {
    padding: 5rem 0 1.6rem;
    background-color: #fcf9f4;
    border-top: 2px solid rgb(238, 235, 229);
    background-image: url('../img/footer-img.svg');
    background-size: 2.5rem auto;
    background-position: center 1.3rem;
    background-repeat: no-repeat;
}

@media (min-width: 48.75rem) {
    .footer {
        box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    }
}

.footer-nav ul {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.footer-nav ul::before {
    position: absolute;
    top: -1.1rem;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    background-color: rgb(238, 235, 229);
    width: 1.3rem;
    height: 2px;
    border-radius: 1rem;
}

.footer-nav ul li {
    margin: 0 0 0 .5rem;
}

.footer-nav ul li:first-of-type {
    margin: 0;
}

.footer-nav ul li a:link, .footer-nav ul li a:visited {
    font-size: .8rem;
    color: inherit;
    text-decoration: none;
}

.footer-nav ul li a:hover,
.footer-nav ul li a:focus {
    text-decoration: underline;
}