/* Footer CSS */

/* - */

#footer {
    background-color: var(--colour1);
    padding: 48px 0 16px;
}

#footer-content {
    position: relative;
    background-color: var(--colour1);
    background-clip: padding-box;
    border: solid 2px transparent;
    border-radius: 1em;

    display: grid;
    padding: 32px 16px;
    grid-gap: 32px;
}

#footer-content::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(to right, #4A4948, #B2B2B1);
}

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


@media(min-width: 768px) {
    #footer-content {
        grid-template-columns: repeat(4, 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 #c1a05a 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: var(--colour2);
    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;
}

@media(min-width: 768px) {
    .footer-title {
        grid-row: 1;
        height: 24px;
        align-self: center;
        color: var(--colour2);
    }
}

@media(max-width: 768px) {
    .footer-title {
        grid-row: 1;
        height: 24px;
        align-self: center;
        color: var(--colour2);
        font-size: 20px;
    }
}

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


/* - */

#bottom-bar {
    background: #81591E;
    background: linear-gradient(64deg, rgba(129, 89, 30, 1) 7%, rgba(193, 160, 90, 1) 50%, rgba(228, 198, 121, 1) 100%);
    padding: 16px 0;
}

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

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

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


.gradient-box {
    display: flex;
    align-items: center;
    /* width: 50vw; */
    width: 90%;
    margin: auto;
    max-width: 22em;

    position: relative;
    padding: 30% 2em;
    box-sizing: border-box;

    color: #FFF;
    background: #000;
    background-clip: padding-box;
    border: solid 5px transparent;
    border-radius: 1em;
}

.gradient-box:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -5px;
    border-radius: inherit;
    background: linear-gradient(to right, #4A4948, #B2B2B1);
}

/* - */