/* Footer CSS */

/* - */

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

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

    padding: 32px 16px;

    grid-gap: 32px;
}

#footer-content p,
#footer-content a {
    overflow-wrap: anywhere;
}


@media(min-width: 768px) {
    #footer-content {
        grid-template-columns: repeat(1, 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 #595959 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: #0066ff;
    justify-self: start;
    transition: background-color ease .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: #0066ff;
}

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


/* - */

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

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

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

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



/* - */