/* Footer CSS */

/* - */

#footer {
    background-color: #204478;
    padding: 48px 0 16px;
}

#footer-content {
    background-color: #222;
    display: grid;

    padding: 32px 16px;

    grid-gap: 32px;
}

@media (min-width: 768px) {
    #footer-content {
        grid-template-columns: repeat(3, auto);
    }
}

#footer-content .element {
    justify-self: center;
    width: 80%;
    justify-content: start;
    align-content: start;
}

@media (min-width: 768px) {
    #footer-content .element {
        width: 100%;
        justify-content: center;
        border-left: dashed #39abc8 1px;
    }
}

#footer-content .element:first-of-type {
    border: none;
}

/* - */

.footer-title-container {
    display: grid;
    grid-template-columns: max-content auto;
}

/* - */

#footer-content p,
#footer-content a {
    color: #ececec;
    text-decoration: none;
}

.footer-icon {
    background-color: #39abc8;
    justify-self: start;
    transition: background-color ease 0.2s;
    width: 32px;
    grid-row: 1;

    align-self: center;
    margin-right: 8px;
}

.footer-icon:hover {
    background-color: #fff;
    cursor: pointer;
}

.footer-txt {
    grid-row: 2;
    grid-column: 1 / span 2;
    justify-self: start;
}

.footer-title {
    grid-row: 1;
    height: 24px;
    align-self: center;
    color: #39abc8;
}

#footer-shadow {
    margin-top: -32px;
}

/* - */

#bottom-bar {
    background-color: #222;
    padding: 16px 0;
}

#bottom-bar p {
    color: #fff;
}

#bottom-bar a {
    text-decoration: none;
    color: #fff;
}

#bottom-bar .container {
    justify-self: center;
    align-self: center;
}

/* - */