html.is-changing .transition-main {
    transition: opacity 250ms ease-in-out;
}

html.is-animating .transition-main {
    opacity: 0;
}

html, body {
    /* background-color: var(--green)*/
}

main {
    min-height: calc(100vh - 28vh - 120px);
    position: relative;
}

.logo img {
    width: 200px;
    object-fit: contain;
}

footer {
    position: relative;
    bottom: 0;
    left: 0;
    padding-top: 10px;
    color: var(--green);
    height: 28vh;
    display: grid;
    align-content: end;
}

    footer a, footer p {
        --color: black;
        color: var(--color) !important;
    }

@media only screen and (max-width: 768px) {
    .contact {
        padding-top: 0 !important; 
    }

    footer { 
        height: auto; 
    }
}

.logo {
    padding-top: 30px;
    height: 120px;
    text-align: center
}

    .logo img {
        height: 100%
    }

.contact {
    min-width: 300px;
    padding-top: 60px;
    margin: auto;
    height: 100%;
    padding-bottom: 40px;
}

    .contact .added-links {
        margin-top: 30px;
        text-align: center;
        border-top: 1px solid var(--lightgrey);
        padding-top: 10px;
    }

        .contact .added-links p {
            border-bottom: 1px solid var(--lightgrey);
            padding-bottom: 10px;
        }

            .contact .added-links p a {
                color: var(--green);
                text-decoration: none !important
            }

                .contact .added-links p a:hover {
                    color: var(--lightgreen);
                }