@import url("https://fonts.googleapis.com/css2?family=Archivo&display=swap");
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100dvh;
    width: 100dvw;

    font-family: var(--primary-font);
    font-weight: var(--font-weight-n);
    font-size: var(--font-size-text);
    letter-spacing: var(--text-tracking);
    color: var(--secondary-4-color);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
    font-family: var(--secondary-font);
}

h1 { margin-bottom:0.5rem; }

h2, h3 { margin-bottom:0.5rem; }

.page {
    display: block;
    max-width: 100dvw;

    h1{
        font-weight: 400;
    }
}

.container {
    padding: 0 min(3%, 1rem) min(3%, 0.5rem) min(3%, 1rem);
    background: var(--background-background-primary);
}

.hidden { display: none!important; }

.card {
    padding: min(7%, 2rem);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 0 auto;
    background: var(--secondary-1-color);
}

.text-wrap {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

:root{
    --primary-light-color: #EDEDED;
    --primary-dark-color: #0A0A0A;
    --secondary-1-color: #7EBEC5;
    --secondary-2-color: #4D96A3;
    --secondary-3-color: #606060;
    --secondary-4-color: #333333;

    --secondary-5-color: #FFC857; /* warm highlight, pairs with your dark navy */
    --secondary-6-color: #6ec1a2; /* success/positive */
    --secondary-7-color: #E0525E; /* error/destructive that’s softer than pure red */
    --secondary-8-color: #4DA3D9; /* info/state, lighter than your indigo */

    --success-color: var(--secondary-6-color);
    --error-color: var(--secondary-7-color);
    --info-color: var(--secondary-8-color);
    --warning-color: var(--secondary-5-color);

    --radius-M: 0.5rem;
    --radius-XL: 1rem;
    --radius-full: 62.4375rem;
    
    --background_topic_ongoing: linear-gradient(270deg, var(--color-paideia-Paideia_Roos, rgba(216, 73, 233, 0.75)) 0.09%, var(--color-paideia-Paideia_Paars, rgba(128, 107, 234, 0.75)) 33.03%, var(--color-paideia-Paideia_Blauw, rgba(63, 196, 221, 0.75)) 65.97%, var(--color-paideia-Paideia_Groen, rgba(90, 227, 202, 0.75)) 99.91%);
    
    border-right: 1px solid var(--border-border-primary, #E3E3E3);
       
    --color-paideia-Paideia_Wit: rgb(255, 255, 255);
    --color-paideia-Paideia_Wit_25: rgba(255, 255, 255, 0.25);
    --color-paideia-Paideia_Zwart: rgb(0, 0, 0);
    --color-paideia-Paideia_Zwart_25: rgba(0, 0, 0, 0.25);
    --color-paideia-Paideia_Grijs_1: rgb(241, 241, 241);
    --color-paideia-Paideia_Grijs_2: rgb(227, 227, 227);
    --color-paideia-Paideia_Grijs_3: rgb(192, 192, 192);
    --color-paideia-Paideia_Grijs_4: rgb(124, 124, 124);
    --color-paideia-Paideia_Grijs_5: rgb(64, 64, 64);
    --color-paideia-Paideia_Grijs_6: rgb(32, 32, 32);
    --color-paideia-Paideia_Roos: rgba(216, 73, 233, 0.5); 
    --color-paideia-Paideia_LichtPaars: rgb(156, 141, 230);
    --color-paideia-Paideia_LichtPaars_60: rgba(156, 141, 230, 0.6);
    --color-paideia-Paideia_Paars: rgba(128, 107, 234, 0.5);
    --color-paideia-Paideia_Paars_20: rgba(128, 107, 234, 0.2); 
    --color-paideia-Paideia_Paars_35: rgba(128, 107, 234, 0.35);    
    --color-paideia-Paideia_Blauw: rgba(63, 196, 221, 0.5);
    --color-paideia-Paideia_Groen: rgba(90, 227, 202, 0.5);
    --color-paideia-Paideia_Groen_20: rgba(90, 227, 202, 0.2);
    --color-paideia-Paideia_Groen_35: rgba(90, 227, 202, 0.35);
    --color-paideia-Paideia_Turquoise: rgb(38, 194, 183);
    --color-paideia-Paideia_Turquoise_60: rgba(38, 194, 183, 0.6);
    --Paideia-Gradient-50:linear-gradient(180deg, var(--color-paideia-Paideia_Roos) 0%, var(--color-paideia-Paideia_Paars) 33%, var(--color-paideia-Paideia_Blauw) 66%, var(--color-paideia-Paideia_Groen) 100%);

    /*linear-gradient(180deg,  0%, rgba(199, 87, 128, 1) 40%, rgba(47, 72, 126, 1) 100%)*/
    --gradient-1: 180deg,rgba(210, 43, 138, 1) 0%, rgba(199, 87, 128, 1) 40%, rgba(47, 72, 126, 1) 100%;

    /*--gradient-1: #F2FAFE 0%, #9DC6E5 100%; !* example  linear-gradient(90deg, var(--gradient-1)); *!*/
    /*    --gradient-2: #D2E9E6  0%, #C9E8E4 100%; !* example  radial-gradient(circle, var(--gradient-1)); *!
        --gradient-3: #DEEBE9  0%, #BDE6E0 100%; !* --gradient maybe not working*!*/

    --drop-shadow-color: rgb(10, 10, 10, .25);
    --drop-shadow: 0 0.2rem 0.5rem var(--drop-shadow-color);
    --drop-shadow-title: 0 0.2rem 0 var(--drop-shadow-color);
    --drop-shadow-top: 0 -0.2rem 0.5rem var(--drop-shadow-color);

    --primary-font: Open Sans, sans-serif;
    --secondary-font: Montserrat, sans-serif;

    --font-size-title: 3rem;
    --font-size-subtitle: 2rem;
    --font-size-subtext: 1.5rem;
    --font-size-text: 17px;
    --font-size-text-sm: 14px;
    --font-size-quote: 1.5rem;

    --font-weight-n: 400;
    --font-weight-l: 200;
    --font-weight-b: 600;

    --text-tracking: 1px; /* Space between letters (css letter-space)  */
    --text-leading: normal; /* space between lines (css line-height)    */

    --border-radius: 16px;
    --border-radius-sm: 4px;

    --margin: 1rem;
    --margin-sm: calc(var(--margin) * 0.5);
    --margin-md: calc(var(--margin) * 2);
    --margin-lg: calc(var(--margin) * 3);

    --padding: 1rem;
    --padding-sm: calc(var(--padding) * 0.5);
    --padding-md: calc(var(--padding) * 2);
    --padding-lg: calc(var(--padding) * 3);
}