* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: var(--myfont);
}

:root {
    /* todo global colors with light &dark mode */
    --bg-lightc0:   rgb(253, 253, 253);
    --bg-light:     #f6f2fa;
    --bg-dark:      #1c053a;
    --bg-lightc2:   #e8d0ff;
    --bg-lightc3:   #B88AE6;
    --bg-lightc4:   #A062DD;
    --fg-lightc5:   #631DB0;
    --fg-lightc6:   #552594;
    --fg-lightc6l:  #55259430;
    --fg-lightc6lc2:#55259480;
    --fg-lightc7:   #320074;
    --fg-lightc7l:  rgba(50, 0, 116, 0.726);
    --fg-lightc8:   #1c053a;
    --fg-contrast: #FF5D73;
    --fg-contrastc: #f28d9a;
    --heart-color:  #c34a5c;
    --grad-light1: linear-gradient(37deg, var(--fg-lightc5) 0%, var(--bg-lightc4) 100%);
    --myfont: system-ui, -apple-system, BlinkMacSystemFont;
    --mx-width: 1600px;
    --facebook-main: #1877F2;
    --instagram-main: #E1306C;
    --linkedin-main: #0077B5;
    --x-main: #000000;
    --telegram-main: #24A1DE;
    /* logo color palette */
    --logo-light: #1c053a;
    --span12-light: #631DB0; 
    --hy-light: #1c053a;
    --span3-light: #1c053a;

    --logo-dark: #f6f2fa;
    --span12-dark: #A062DD;
    --hy-dark: #f6f2fa;
    --span3-dark: #B88AE6;
}