/* Fonts */
@font-face {
    font-family: 'Lato';
    font-weight: 300;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/lato/light.ttf") format('truetype');
}
@font-face {
    font-family: 'Lato';
    font-weight: 500;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/lato/regular.ttf") format('truetype');
}
@font-face {
    font-family: 'Lato';
    font-weight: 700;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/lato/bold.ttf") format('truetype');
}
@font-face {
    font-family: 'Lato';
    font-weight: 900;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/lato/black.ttf") format('truetype');
}

@font-face {
    font-family: 'Kanit';
    font-weight: 500;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/kanit/light.ttf") format('truetype');
}
@font-face {
    font-family: 'Kanit';
    font-weight: 700;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/kanit/medium.ttf") format('truetype');
}
@font-face {
    font-family: 'Kanit';
    font-weight: 900;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/kanit/bold.ttf") format('truetype');
}


/* Constants */
:root {
    /* Palette */
    --palette-1: #7B52F1;
    --palette-2: #CA79E1;
    --palette-3: #F1A86A;
    --palette-4: #E4A590;
    --palette-5: #9D72E5;
    --palette-6: #DD98AC;
    --palette-7: #A349F5;
    --palette-8: #F284D4;
    --palette-9: #E2ADAA;
    --palette-10: #C49C7C;
    
    /* Theme */
    --accent-color: rgb(50, 125, 220);
    --accent-color-hover: rgb(100, 175, 225);
    --accent-color-active: rgb(20, 100, 200);
    --accent-color-disabled: rgb(117, 130, 146);

    --accent-color-secondary: rgb(210, 60, 200);
    --accent-color-secondary-hover: rgb(220, 90, 240);
    --accent-color-secondary-active: rgb(225, 80, 218);
    --accent-color-secondary-disabled: rgb(150, 144, 150);

    --primary-color: white;
    --text-color: black;
    --text-color-secondary: rgb(75, 75, 75);
    --container-color: rgb(220, 220, 220);
    --container-color-active: rgb(235, 235, 235);

    --control-background-color: rgb(215, 215, 215);
    --control-background-color-first: rgb(205, 205, 205);
    --control-background-color-second: rgb(205, 205, 205);
    --control-background-color-third: rgb(195, 195, 195);
    --control-background-color-third: rgb(180, 180, 180);
    --control-background-color-fifth: rgb(170, 170, 170);

    --info: #0099ff;
    --success: #00ff55;
    --warning: #ffdd00;
    --error: #ff4455;

    /* Special */
    --container-color-blur: #BBBBBBCC;

    --nav-background: rgb(250, 250, 250);
    --nav-background-scroll: rgba(212, 212, 212, 0.5);

    /* System */
    --content-width: 1600px;
    --content-padding-top: 1em;
    --content-padding-bottom: 1em;
    --content-padding: calc(var(--content-padding-top) + var(--content-padding-bottom));

    /* Nav */
    --nav-img-size: 32px;
    --nav-padding: 12px;
    --nav-height: calc(var(--nav-padding) + var(--nav-padding) /*+ 0px*/ + var(--nav-img-size)); /* Padding, border, image */
    --nav-offset: 4px;
    --nav-height-total: calc(var(--nav-height) + var(--nav-offset) + var(--nav-offset));

    --generic-background: #6e6e6e65;
    --generic-white-border: gainsboro;

    /* Scrollbar */
    --scrollbar-width: 10px;
    --scrollbar-track-color: rgba(175, 175, 175, 0.5); 
    --scrollbar-color: rgb(75, 65, 95); 

    /* While these cannot be used in code, they are here for refrence */
    --medium-screen-value: 688px;
    --small-screen-value: 468px;
}

/* Global */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Lato', Arial, sans-serif;
}