@font-face {
    font-family: 'Lil Grotesk';
    src: url('../lilgrotesk/LilGrotesk-Regular.otf') format('truetype');
}

@font-face {
    font-family: 'Blinds Audience';
    src: url('../blindsaudience/Blinds\ Audience.otf') format('woff');
}

footer {
    display: grid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width:100%;
    background:var(--green);
    color:var(--gold);
    font-family:'Blinds Audience',serif;
    font-weight:600;
}

footer a {
    text-decoration:none;
    color:inherit;
}

footer a:hover {
    color:var(--gold);
}

.partners {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    border-bottom: solid 2px var(--gold);
    width:100vw;
    gap:3em;
    padding-bottom:1em;
}

.sub-partners {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

}

footer h1 {
    display:flex;
    color:var(--gold);
    justify-content:center;
    align-items:center;
    font-size:1.5em;
    font-family:'Blinds Audience',serif;
    padding-top:1em;
    padding-bottom:1em;
}

footer h1 a {
    color:var(--gold);
}

.ml {
    display:flex;
    flex-direction:row;
    color:var(--white);
    font-size:0.8em;
    justify-content:center;
    padding:0;
    gap:10em;
}

.ml h1 {
    display:flex;
    color:var(--gold);
    font-size:1.2em;
    justify-content:left;
}

.ml:hover {
    color:var(--white);
    cursor:pointer;
}

.sub-ml {
    display:flex;
    flex-direction:column;
    justify-content:top;
    align-items:top;
}


.partner-logo {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100px;
    height:100px;
    padding-bottom:1em;
}

.social {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    padding-bottom:1rem;
}

.social img {
    width:30px;
    height:auto;
}

.plain {
    display:flex;
    justify-content:left;
}


@media screen and (max-width: 700px) {
    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .partners {
        flex-direction: column;
        gap:1em;
    }

    .ml {
        display:flex;
        flex-direction:column;
        color:var(--white);
        font-size:0.8em;
        justify-content:j;
        padding:0;
        gap:0em;
    }

    .sub-ml {
        align-items: center;
        width: 100%;
    }

    .sub-ml h1 {
        justify-content: center;
    }

    .plain {
        justify-content: center;
    }

    .social {
        width: 100%;
        justify-content: center;
        gap:2em;
    }
}