@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

:root {
    --light-primary: #FFFFFF;
    --light-accent: #D7513E;
    --dark-primary: #9699BA;
    --dark-background: #2a1433;
    --font-primary: 'montserrat', sans-serif;
}

#cookie-banner {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    z-index: 500;
    backdrop-filter: blur(20px);
    animation: fadeIn 0.3s ease-in-out;
}

#cookie-box {
    background: var(--dark-background);
    font-family: var(--font-primary);
    padding: 2rem;
    text-align: center;
    max-width: 90%;
    width: 400px;
    border-radius: 2.00rem;
}

#cookie-box .button-acceptCookies {
    background: var(--light-primary);
    color: var(--dark-background);
    border: 1.5px solid var(--light-primary);
}

#cookie-box .button-declineCookies {
    background: transparent;
    color: var(--light-primary);
    border: 1.5px solid var(--light-primary);
}

#cookie-box button {
    font-family: var(--font-primary);
    margin: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
}

#cookie-box p {
    color: var(--light-primary);
    font-family: var(--font-primary);
}

@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}

@media (max-width: 600px) {
    #cookie-box {
        padding: 1.5rem;
        margin: 1.5rem;
        width: calc(100% - 8rem);
    }
}