/* static/css/style.css */
:root {
    --color-1: #377eb8;
    --color-2: #ff7f00;
    --color-3: #4daf4a;
    --color-4: #e41a1c;
    --color-5: #984ea3;
    --color-6: #a65628;
    --color-7: #e75480;  /* Darker Pink */
    --color-8: #999999;
    --color-9: #8dd3c7;
    --color-10: #ffffb3;
    --color-11: #66c2a5;
    --color-12: #fc8d62;
    --color-13: #8da0cb;
    --color-14: #e78ac3;  
    --color-15: #a6d854;

    --primary-color: #1A73E8; /* Modern Primary Color */
    --primary-light-color: #5A8DF6; /* Lighter Primary Light Color */
    --secondary-color: #008080; /* Colorblind-Friendly Teal */
    --secondary-light-color: #40E0D0; /* Lighter Teal */
    --neutral-light: #F1F3F4;
    --neutral-dark: #202124;
    --background-color: #FFFFFF;
    --text-color: #202124;


    /* Old colors before applying style template */
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --link-color: #1a0dab; /* Distinct link color */
    --copyright-color: #6c757d; /* Lighter color for copyright text */

    /* Typography */
    --font-family: 'Nunito', sans-serif;
    --font-size-base: 16px;
    --font-size-large: 1.25em;
    --font-size-small: 0.875em;
    --font-size-copyright: 12px; /* Smaller font size for copyright */

    /* Other styles */
    --border-radius: 8px;
    --padding-base: 16px;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--dark-color);
}

.footer {
    text-align: center;
    font-size: var(--font-size-copyright);
    color: var(--copyright-color);
    margin-top: 20px;
}

/* Additional styles */
.footer, .content {
    padding: var(--padding-base);
}

.list-group-item a {
    color: var(--link-color);
    text-decoration: none;
}

.list-group-item a:hover {
    text-decoration: underline;
}


#cookieConsent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#cookieConsent .content {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

#cookieConsent button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 10px;
}

#cookieConsent button.reject {
    background-color: #f44336;
}

#cookieConsent button:hover {
    opacity: 0.8;
}