/* ------------------------- Colors -------------------------------------------------- */

:root {

    --color-dark: #1C1D20;
    --color-dark-dark: #141517;
    --color-light: #FFFFFF;
    --color-blue: #455CE9;
    --color-blue-dark: #334BD3;
    --color-gray: #999D9E;
    --color-lightgray: #E9EAEB;
    --color-white: #FFFFFF;
    
    --color-border: rgba(28, 29, 32, 0.175);
    --color-border-solid: #D2D2D2;
    --color-border-light: rgba(255, 255, 255, 0.2);
    --color-border-solid-light: #545557;

    --color-text: #1C1D20;
    --color-text-light: #FFF;

    --alert-error: #ff4444;
    --alert-success: #24C958;

    --animation-primary: all .5s cubic-bezier(.7, 0, .3, 1);
    --animation-fast: all .3s cubic-bezier(.7, 0, .3, 1);
    --animation-smooth: all .7s cubic-bezier(.7, 0, .3, 1);
    --animation-slow: all .9s cubic-bezier(.7, 0, .3, 1);

    --section-padding: clamp(5em, 21vh, 12em);
    --container-padding: clamp(2.5em, 8vw, 8em);
    --gap-padding: clamp(1.5em, 4vw, 2.5em);
  
}

@media screen and (max-width: 1200px){
    :root { 
        --container-padding: 6vw;
    }
}

@media screen and (max-width: 720px){
    :root { 
        --section-padding: 12vh;
    }
}

@media screen and (max-width: 540px){

    :root { 
        --color-border: rgba(28, 29, 32, 0.225);
        --color-border-light: rgba(255, 255, 255, 0.225);
        --container-padding: clamp(1.25em, 4vw, 2.5em);
        --section-padding: max(2.5em, 12vh);
    }
}