:root {
    --ending-contacts-fs: var(--fs-400);
    --ending-socials-fs: var(--fs-700);
    --ending-socials-logo-fs: var(--ending-socials-fs);
    --ending-socials-logo-spacing: calc(var(--ending-socials-fs) * 0.121);

    --ending-gradient-size: 15vh;
    --ending-box-size: calc(var(--ending-socials-fs) * 5);
}

@media (max-width: 50em) {
    :root {
        --ending-socials-logo-spacing: calc(var(--ending-socials-fs) * 0.121);
        --ending-socials-fs: 0;
        --ending-socials-logo-fs: calc(var(--fs-700) * 1.2);
        --ending-box-size: calc(var(--fs-700) * 5);
    }
}


.ending {
    margin: 0;
    padding: 0;
}


.ending.endingbody {
    color: white;
    margin: 0;
    padding: 0;
    padding-top: 5vh;
    border: 0;
    background-color: rgba(0,0,0,255);
    height: var(--ending-box-size);
}

.ending.topgradient {
    margin: 0;
    padding: 0;
    border: 0;
    background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,255));
    height: var(--ending-gradient-size);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

section.ending {
    z-index: 10;
    margin-top: calc(-1 * var(--ending-gradient-size));    
}



.ending ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.ending ul li {
    float: right;
    display: inline;
    padding-right: 3vw;
}

.ending ul li a {
    text-decoration: none;
    color: white;
    font-size: var(--ending-socials-fs);
}


.ending ul li.contacts {
    padding-left: 5vw;
    padding-bottom: calc(var(--ending-socials-fs) * 0.4);
    float: left;
    font-size: calc(var(--ending-socials-fs) * 1.2);
}

img.logo {
    color: white;
    height: calc(0.9 * var(--ending-socials-logo-fs));
    width: calc(0.9 * var(--ending-socials-logo-fs));
    transform: translateY(calc(0.15 * var(--ending-socials-logo-fs)));
    padding-right: var(--ending-socials-logo-spacing);
    filter: invert();
    -webkit-text-stroke: 0em black;
}

img.black {
    filter: none;
    height: 1em;
    width: auto;

}

.contact_details {
    padding-top: calc(var(--ending-contacts-fs) * 0.5);
    font-size: var(--ending-contacts-fs);
    -webkit-text-stroke: 0em black;
    text-align: center;

    color:lightgray;
}

.icon_subtexts {
    -webkit-text-stroke: 0.02em black;
}