body {
    margin: 0;
    min-height: 100vh;
    line-height: normal;
    background-color: var(--main-bg);
    display: flex;
    transition: all 0.5s ease-out allow-discrete;
    transition: 200ms linear 50ms;
    /* transition: 0.2s; */
}


:root {
    
    /* fonts */
    --elprocad-h2: 'Space Mono';
    --elprocad-p: Lato;
    
    /* font sizes */
    --font-size-xs: 0.75rem;
    --elprocad-p-size: 0.875rem;
    --elprocad-h2-size: 1rem;
    
    /* Colors */
    /* Colors text*/
    --primary-textcolor: #161616;
    --secondary-textcolor: #2D3135;
    --text-orange-bg: #f0f0f0;
    --text-main-bg: #161616;

    /* Colors background*/
    --main-bg: #F8F8F8;
    --card-light-bg: #fdfdfd;
    --elprocad-orange: #e24c2d;
    
    /* Gaps */
    --gap-base: 1rem;
    --gap-3xs: 0.625rem;
    
    /* Paddings */
    --padding-mini: 0.937rem;
    --padding-3xs: 0.625rem;
    
    /* Border radiuses */
    --br-8xs: 5px;
    
    /* Effects */
    --drop-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.darkmode{
    /* Colors */
    /* Colors text*/
    --primary-textcolor: #161616;
    --secondary-textcolor: #2D3135;
    --text-orange-bg: #d7d7d7;
    --text-main-bg: #d7d7d7;

    /* Colors background*/
    --main-bg: #2D3135;
    --card-light-bg: #d7d7d7;
    --elprocad-orange: #d63d1e;
    

}