/*basic.css*/

* {
    box-sizing: border-box;
}

:root {
    /* Colors */
    --cloud10: #F1F1F1;
    --cloud20: #E3E4E4;
    --cloud30: #B3B4B5;
    --cloud40: #4B5158;
    
    --blue00: #F3F7FA;
    --blue10: #B6DAF7;
    --blue20: #80AEE3;
    --blue30: #026EF2;
    --blue40: #0056B9;
    --blue50: #0B318F;
    
    --hot00: #F6CC34;
    --hot10: #FDAE15;
    --hot20: #FF8B03;
    --hot30: #FF5E03;
    --hot40: #D13C06;
    --hot50: #E20505;
    
    --fine00: #C8E27D;
    --fine10: #77CA50;
    --fine20: #2CB54A;
    --fine30: #2CAB81;
    --fine40: #267D82;
    --fine50: #435F65;

    --accent00: #B6DDED;
    --accent10: #FCF9ED;
    --accent20: #00A3BF;
    --accent30: #7F55C2;
    --accent40: #0014C9;
    --accent50: #023E6B;
    --accent60: #A4B3D9 ;
    --accent70: #B8CFCE;
    --accent80: #FCDC94;
    
    
    /* Shadow */
    --shadow10-small: 0 1px 1px rgba(0, 0, 0, 0.10);
    
    --shadow15-small: 0 2px 2px rgba(0, 0, 0, 0.15);
    
    --shadow20-mid: 0 6px 8px rgba(0, 0, 0, 0.2);
    
    --shadow25-nano: 0 1px 1px rgba(0, 0, 0, 0.25);
    --shadow25-small: 0 4px 4px rgba(0, 0, 0, 0.25);
    
    --shadow30-nano: 0 2px 2px rgba(0, 0, 0, 0.3);
    --shadow30-mini: 0 3px 3px rgba(0, 0, 0, 0.3);
    --shadow30-small: 0 3px 6px rgba(0, 0, 0, 0.3);
    --shadow30-mid-small: 0 6px 8px rgba(0, 0, 0, 0.3);
    --shadow30-mid: 0 8px 8px rgba(0, 0, 0, 0.3);
    
    --innerShadow01: inset 0px -2px 6px 2px rgba(0, 0, 0, 0.05);
    
    
}