/*Poppins police with variation : light, medium, semi bold, bold*/
@font-face {
    font-family: Poppins;
    src: url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Poppins;
    src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Poppins;
    src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: Poppins;
    src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/*we always declare variable colors in the :root selector*/
:root {
    /*other variables*/
    --border-radius: 15px;
    --border-round: 30px;
    --padding-rem: 0.8rem;
    --padding: 10px;
    --margin-gap: 30px;

    /*fonts variables*/
    --font-size: 14px;
    --title-font-size: 30px;
    --subtitle-font-size: 24px;
    --menu-item-font: 16px;
    --accent-font-size: 16px;
    --default-font-size: 14px;
    --footer-font-size: 10px;

    /*visual identity of DCO*/
    --main: #05598B;
    --secondary: #BDF4FF;
    --third-blue: #4461d8;
    --blue: #3c9ebf;
    --accent: #9DDBC4;

    --dark: #111;
    --light: #FFF;

    /*font colors*/
    --default-link-color: var(--third-blue);
    --default-font-color: #001C4D;
    --default-accent-color: var(--accent);
    --default-title-color: var(--main);

    /*background colors*/
    --bg-main: #F2f2f2;
    --bg-grey: #f6f6f6;
    --bg-blue: #F2F9FA;

    /*other colors*/
    --bluish-grey: #ABB8C3;
    --border-color: #D4E0ED;
    --moovapps-light-violet: #E5EEFF; /*if possible, get rid of this color */

    /*miscelaneous color palette : used for tags or indicators*/
    --red: rgb(239, 83, 80);
    --orange: rgb(255, 179, 15);
    --yellow: rgb(255, 212, 0);
    --green: rgb(178, 213, 106);
    --valid-green: rgb(95, 201, 74);
    --turquoise: rgb(99, 182, 193);
    --darker-turquoise: rgb(0, 162, 189);
    --violet: rgb(113, 126, 247);
    --pink: rgb(247, 141, 167);

    /*miscelaneous colors, transparent version => opacity 30%*/
    --red-30: rgba(239, 83, 80, 0.3);
    --orange-30: rgba(255, 179, 15, 0.3);
    --yellow-30: rgba(255, 228, 138, 0.3);
    --green-30: rgba(178, 213, 106, 0.3);
    --valid-green-30: rgba(95, 201, 74, 0.3);
    --blue-30: rgba(60, 158, 171, 0.3);
    --turquoise-30: rgba(99, 182, 193, 0.3);
    --darker-turquoise-30: rgba(0, 162, 189, 0.3);
    --violet-30: rgba(113, 126, 247, 0.3);
    --pink-30: rgba(247, 141, 167, 0.3);


    /*gradients color*/
    --main-gradient: linear-gradient(to right, #1685bd, #9DDBC4);
    --second-gradient: linear-gradient(to right, #3C9EBF, #63B6C1);
    --third-gradient: linear-gradient(to right, #1685BD, #9DDBC4);
    --dark-gradient: linear-gradient(to right, hsl(195, 51%, 34%), hsl(187, 33%, 35%));
    --new-gradient: linear-gradient(to right, var(--main), var(--accent));

    /* var used in workplace.css : replace by the colors here */
    /* /!\ IMPORTANT COLORS HERE !! ! /!\ */
    --primary-color: var(--main);
    --button1-hover: var(--blue);
    --button2-hover: var(--secondary);
    --base-link-color: var(--third-blue);

    --font-rgpd: 'Poppins';
}

body {
    background-color: var(--bg-blue) !important;
    font-family: var(--font-rgpd), sans-serif;
    color: var(--default-font-color);
    font-size: var(--default-font-size);
}

.lightbox-background {
    display: none;
}