@font-face {
    font-family: 'main';
    src:
        url('/assets/fonts/dd-Light.woff') format('woff'),
        url('/assets/fonts/dd-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'main';
    src:
        url('/assets/fonts/dd-Light.woff') format('woff'),
        url('/assets/fonts/dd-Light.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'main';
    src:
        url('/assets/fonts/dd-Medium.woff') format('woff'),
        url('/assets/fonts/dd-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'main';
    src:
        url('/assets/fonts/dd-Semibold.woff') format('woff'),
        url('/assets/fonts/dd-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'main';
    src:
        url('/assets/fonts/dd-Bold.woff') format('woff'),
        url('/assets/fonts/dd-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root{
    --header-height: 75px;
    --sidebar-width: 150px;
    --card-margin: 1rem;
    --card-background-color: rgb(255, 255, 255);
    --card-border-radius: 0.5rem;
    --card-padding: 0.5rem 1rem 0.5rem 1rem;
    --card-border: 1px solid rgb(201, 201, 201);
    --card-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
    --padding-default-section: 1rem;
    --padding-025-rem: 0.25rem;
    --padding-05-rem: 0.5rem;
    --padding-075-rem: 0.75rem;
    --padding-1-rem: 1rem;

    --color-main: rgb(134, 194, 50);
    --color-main-alpha: rgba(134, 194, 50, 0.2);

    --color-main-2: rgb(51, 144, 204);
    --color-main-2-alpha: rgba(51, 144, 204, 0.2);

    --color-main-3: rgb(12, 52, 12);
    --color-main-3-alpha: rgba(12, 52, 12, 0.2);

    --color-main-4: rgb(18, 72, 41);
    --color-main-4-alpha: rgba(18, 72, 41, 0.2);

    --color-main-5: rgb(76, 180, 44);
    --color-main-5-alpha: rgba(76, 180, 44, 0.2);

    --color-main-6: rgb(108, 163, 78);
    --color-main-6-alpha: rgba(108, 163, 78, 0.2);

    --color-main-7: rgb(236, 150, 72);
    --color-main-7-alpha: rgba(236, 150, 72, 0.2);

    --color-main-8: rgb(56, 142, 104);
    --color-main-8-alpha: rgba(56, 142, 104, 0.2);

    --color-main-9: rgb(214, 90, 90);
    --color-main-9-alpha: rgba(214, 90, 90, 0.2);
    
    --color-main-10: rgb(245, 45, 45);
    --color-main-10-alpha: rgba(245, 45, 45, 0.2);

    --color-main-11: rgb(170, 35, 255);
    --color-main-11-alpha: rgba(170, 35, 255, 0.1);
    
    --color-soft-white: rgb(245, 245, 240);
	--color-default-text: rgb(255, 255, 255);
    --color-default-text-alpha: rgba(255, 255, 255, 0.2);
	--color-default-background: rgb(34, 38, 41);
    --color-default-background-2: rgb(52, 57, 61);
    --color-default-background-2-alpha: rgb(52, 57, 61, 0.2);
    --color-default-background-3: rgb(63, 69, 74);
    --color-default-background-3-alpha: rgb(63, 69, 74, 0.2);
    --color-default-background-4: rgb(74, 81, 87);
    --color-default-background-4-alpha: rgb(74, 81, 87, 0.2);
    --color-default-input-background: rgb(28, 32, 35);
	--color-default-error: var(--color-main-10);
    --color-default-section-border: rgb(80, 80, 80);

    --shade-default-color: rgb(0, 0, 0, 0.3);
    --input-default-padding: 0.4rem;
    --input-default-font-size: 0.8rem;
    --input-default-background-color: var(--color-default-input-background);
    
    --nav-item-height: 50px;

    --h1-font-size: 1.875rem;
    --h1-font-color: var(--color-main);
    --h1-font-weight: normal;

    --h2-font-size: 1.1rem;
    --h2-font-color: var(--color-main);
    --h2-font-weight: normal;

    --h3-font-size: 0.9rem;
    --h3-font-color: var(--color-main-2);
    --h3-font-weight: normal;

    --border-radius-3: 3px;
    --border-radius-4: 4px;
    --border-radius-5: 5px;

    --chevron-down-8: 8px;
    --button-default-padding: 0.5rem 0.8rem 0.5rem 0.8rem;
}

*{
    font-family: 'main', 'Helvetica Neue', Arial, sans-serif;
    font-synthesis: none;
    box-sizing: border-box;
}

html, body{
    width: 100%;
    height: 100%;
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: var(--color-default-background);
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
}