@charset "UTF-8";

:root{
    --main-color:#e60032;
    /* :hsl(348, 100%, 45%); */
    --main-color-a:#e6003233;
    --sub-color:rgb(0, 91, 172);
    /* rgb(0, 91, 172); */
    /* hsl(208, 100%, 34%) */
    --sub-color-a:#005bac33;
    --em-color:#e60032b3;
    --sub-em-color:hsla(45, 100%, 50%, 0.7);
    --base-bg-color:#fff;
    --light-bg-color:#eee;
    --light-text-color:#fff;
    --middle-bg-color:#D4D2D5;
    --middle-text-color:#666;
    --dark-bg-color:#302B27;
    --dark-text-color:#302B27;
    --border-color:#D4D2D5;
    --shadow-color:#D4D2D5;
    --key-hd-bg-color:#302B27;

    --button-grad-color1:hsl(348, 100%, 45%);
    --button-grad-color2:hsl(42, 100%, 50%);
    --button-grad-color1-hover:hsl(312, 100%, 86%);
    --button-grad-color2-hover:hsl(348, 100%, 75%);
    --button-grad-color3-hover:hsl(42, 100%, 60%);
    --button-grad-l:linear-gradient(120deg, var(--button-grad-color1), 70%, var(--button-grad-color2));
    --button-grad-l-hover:linear-gradient(120deg,var(--button-grad-color1-hover), 1% ,var(--button-grad-color2-hover), 70%, var(--button-grad-color3-hover));

    --border-radius:6px;

    
    --fs-larger:1.5rem;
    --fs-large:1.275rem;
    --fs-normal:1rem;
    --fs-small:0.875rem;
    --fs-smaller:0.75rem;

    --delay:0.2s;
}