/* CSS Document */

#footer {
    background-color: var(--footerback-color);
    padding: 24px 0;
}

#footer .workspace {
    grid-gap: 32px;
}

.footer-item {
    display: grid;
    grid-gap: 8px;
    justify-content: center;
}

.footer-icon-container {
    display: grid;
    width: 64px;
    height: 64px;

    justify-self: center;
    align-self: center;

    border: solid var(--tertiary-color) 1px;
    border-radius: 100%;
}

.footer-icon {
    justify-self: center;
    align-self: center;
    font-size: 32px;
    color: var(--tertiary-color);
}

.footer-item h3 {
    color: var(--footercontent-color);
    justify-self: center;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-size: 1em;
    /*margin-top: -32px;*/
}

.footer-item h4 {
    color: var(--footercontent-color);
    justify-self: center;
}

.footer-item a {
    color: var(--footercontent-color);
    justify-self: center;
    text-decoration: none;
    font-family: "Lato", sans-serif;
    font-size: 1em;
}

.footer-item h3,
.footer-item a {
    overflow-wrap: anywhere;
}

.footer-icon-container a {
    align-content: center;
}

#bottom-bar {
    display: grid;
    padding: 10px 0;
    width: 100%;
    justify-content: center;
    background-image: repeating-linear-gradient(
        to right,
        #a2682a 0%,
        #be8c3c 8%,
        #be8c3c 18%,
        #d3b15f 27%,
        #faf0a0 35%,
        #ffffc2 40%,
        #faf0a0 50%,
        #d3b15f 58%,
        #be8c3c 67%,
        #b17b32 77%,
        #bb8332 83%,
        #d4a245 88%,
        #e1b453 93%,
        #a4692a 100%
    );
    filter: drop-shadow(0 0 1px rgba(255, 200, 0, 0.3));
    animation: MoveBackgroundPosition 6s ease-in-out infinite;
}

#bottom-bar p {
    text-align: center;
    color: #444;
}