@import "var.css";

.cookie-banner {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    width: 100vw;
    background-image: linear-gradient(to bottom, var(--darkerBlue) 0%, var(--darkBlue) 100%);
    backdrop-filter: blur(2.3px);

    .cookie-banner-content {
        margin: 1em;
        padding: 1em 2em 1em 2em;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        transition: var(--mainTransition);
        color: var(--mainTextColor);
        background-color: var(--mainBlue);
        border-radius: var(--mainRadius);

        button {
            margin-top: 0.5em;
            display: flex;
            justify-content: center;
            place-items: center;
            height: 2em;
            width: 4em;
            border: 2px solid var(--lighterBlue);
            border-radius: 1.5em;
            box-shadow: var(--mainShadow);
            transition: var(--mainTransition);
        }

        button:hover {
            transform: scale(1.01);
        }
    }
    div:hover {
        transform: scale(1.01);
    }

}

footer {
    background-color: var(--mainAccentColor);
    color: var(--mainTextColor);
    position: static;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;

    .links {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        border-bottom: 1px solid var(--mainTextColor);

        a {
            color: var(--mainTextColor);
            text-decoration: none;
            padding: 1em;
        }
        a:hover {
            text-decoration: underline;
        }
    }
}