@import url('https://fonts.googleapis.com/css2?family=Merriweather&family=Roboto:wght@300;500&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
    /* Color Variables */
    --main-bg-color: #00A9B6;
    --main-title-color: #22205B;
    --sec-title-color: #1E3F20;
    --main-txt-color: #11102D;
    --fade-txt-color: #11102Dcf;
    --sec-txt-color: #0D1C0E;
    --input-txt-color: #FBFFFE;
    --contrast-txt-color: #FBFFFE;
    --placeholder-txt-color: #fdfffcb2;
    --placeholder-title-color: #11102Db2;
    --btn-main-color: #E0D8DE;
    --btn-focus-color: #F6F4F5;
    --btn-dis-bg-color: #43373D9e;
    --btn-dis-txt-color: #0D1C0E9e;
    --btn-other-bg-color: #D0CFEC;
    --btn-other-hover-color: #F1F0F9;
    --chk-valid-color: #0ed800;
    --chk-hover-color: #67ff5c;
    --speech-bg-color: rgba(235, 235, 235, 0.65);
    --load-animation-color: #11102D;
    --scrollbar-main-color: #0D1C0E8f;
    --scrollbar-sec-color: #0D1C0E00;
    --edit-bg-color: rgba(235, 235, 235, 0.65);
    --edit-bg-shadow: rgba(235, 235, 235, 0.65);
    --info-bg-pop-up: rgb(153 212 217 / 90%);
    --info-icon-colour: rgb(0, 51, 182);
    
    /* Font Variables */
    --title-h1-font: 'Merriweather';
    --title-h2-font: 'Roboto';
    --ai-font: 'Cairo';
    --main-font: 'Lora';

}