:root {

    /* FOOTER SETTINGS */
    --footer-width:980px;
    --footer-height:260px;
    --footer-background-color:#232A2B;

    /* ICONS */
    --footer-icon-size:48px;
    --footer-icon-scale:1.2;
    --footer-icon-gap:40px;

    /* POSITIONING */
    --footer-icon-top-offset:30px;

    /* FOOTER MESSAGE SETTINGS*/
    --footer-message-offset:30px;
    --footer-message-font-size:16px;
    --footer-message-font-family:'Open Sans', sans-serif;
    --footer-message-color:#DFE6E9;
    --footer-message-transition:.2s ease;

}

/* FOOTER BACKGROUND */
.footer-background {

    width:100vw;

    height:var(--footer-height);

    background:var(--footer-background-color);

}

/* INNER FOOTER */
.footer-container {

    width:var(--footer-width);
    height:100%;

    margin:auto;

    position:relative;

}

/* ICON BAR */
.footer-icon-bar {

    position:absolute;

    top:var(--footer-icon-top-offset);

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:var(--footer-icon-gap);

}

/* ICON BUTTON */
.footer-icon-button {

    width:var(--footer-icon-size);
    height:var(--footer-icon-size);

    transform:scale(var(--footer-icon-scale));

    border:none;
    background:none;

    padding:0;

    cursor:pointer;

    position:relative;

}

/* BOTH IMAGES */
.footer-icon-button img {

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    object-fit:contain;

    transition:.2s ease;

}

/* HOVER */
.footer-icon-highlighted {

    opacity:0;

}

.footer-icon-button:hover
.footer-icon-normal {

    opacity:0;

}

.footer-icon-button:hover
.footer-icon-highlighted {

    opacity:1;

}

/* START OF FOOTER HOVER MESSAGE */
.footer-hover-message {

    position:absolute;

    top:calc(
        var(--footer-icon-top-offset)
        + var(--footer-icon-size)
        + var(--footer-message-offset)
    );

    left:50%;
    transform:translateX(-50%);
    font-family:var(--footer-message-font-family);
    font-size:var(--footer-message-font-size);
    color:var(--footer-message-color);
    text-align:center;
    pointer-events:none;
    white-space:nowrap;
    opacity:0;
    transition:var(--footer-message-transition);

}