Theme: light css

/* https://google-webfonts-helper.herokuapp.com/fonts/poppins?subsets=latin */

/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/poppins-v8-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Poppins Regular'), local('Poppins-Regular'),
         url('./fonts/poppins-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/poppins-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/poppins-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('./fonts/poppins-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/poppins-v8-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-500 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/poppins-v8-latin-500.eot'); /* IE9 Compat Modes */
    src: local('Poppins Medium'), local('Poppins-Medium'),
         url('./fonts/poppins-v8-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/poppins-v8-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/poppins-v8-latin-500.woff') format('woff'), /* Modern Browsers */
         url('./fonts/poppins-v8-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/poppins-v8-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/poppins-v8-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Poppins Bold'), local('Poppins-Bold'),
            url('./fonts/poppins-v8-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('./fonts/poppins-v8-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
            url('./fonts/poppins-v8-latin-700.woff') format('woff'), /* Modern Browsers */
            url('./fonts/poppins-v8-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
            url('./fonts/poppins-v8-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}


/* ********** */
/* global properties */
/* ********** */

/* extra small screens */
:root {

    /* base colors themeLight */

    --color-primary: #000000;
    --color-primary-dark: #000000;
    --color-primary-light: #000000;

    --color-secondary: #13ffa1;
    --color-secondary-dark: #00ca72;
    --color-secondary-light: #6fffd3;

    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-elevation1: rgba(255, 255, 255, 0.05);
    --color-surface-elevation2: rgba(255, 255, 255, 0.07);
    --color-surface-elevation3: rgba(255, 255, 255, 0.08);
    --color-surface-elevation4: rgba(255, 255, 255, 0.09);
    --color-surface-elevation5: rgba(255, 255, 255, 0.11);
    --color-surface-elevation6: rgba(255, 255, 255, 0.12);
    --color-surface-elevation7: rgba(255, 255, 255, 0.14);
    --color-surface-elevation8: rgba(255, 255, 255, 0.15);
    --color-surface-elevation9: rgba(255, 255, 255, 0.16);
    --color-error: rgba(242, 71, 71, 1);

    --color-contrast-hi: 0.87;
    --color-contrast-medium: 0.40;
    --color-contrast-low: 0.20;

    --settings-color-onPrimary: 255, 255, 255;
    --color-onPrimary: rgba(var(--settings-color-onPrimary), var(--color-contrast-hi));
    --color-onPrimary-medium: rgba(var(--settings-color-onPrimary), var(--color-contrast-medium));
    --color-onPrimary-low: rgba(var(--settings-color-onPrimary), var(--color-contrast-low));

    --settings-color-onSecondary: 255, 255, 255;
    --color-onSecondary: rgba(var(--settings-color-onSecondary), var(--color-contrast-hi));
    --color-onSecondary-medium: rgba(var(--settings-color-onSecondary), var(--color-contrast-medium));
    --color-onSecondary-low: rgba(var(--settings-color-onSecondary), var(--color-contrast-low));

    --settings-color-onBg: 0, 9, 51;
    --color-onBg: rgba(var(--settings-color-onBg), var(--color-contrast-hi));
    --color-onBg-medium: rgba(var(--settings-color-onBg), var(--color-contrast-medium));
    --color-onBg-low: rgba(var(--settings-color-onBg), var(--color-contrast-low));

    --settings-color-onSurface: 0, 9, 51;
    --color-onSurface: rgba(var(--settings-color-onSurface), var(--color-contrast-hi));
    --color-onSurface-medium: rgba(var(--settings-color-onSurface), var(--color-contrast-medium));
    --color-onSurface-low: rgba(var(--settings-color-onSurface), var(--color-contrast-low));

    --settings-color-onError: 255, 255, 255;
    --color-onError: rgba(var(--settings-color-onError), var(--color-contrast-hi));
    --color-onError-medium: rgba(var(--settings-color-onError), var(--color-contrast-medium));
    --color-onError-low: rgba(var(--settings-color-onError), var(--color-contrast-low));

    /* root size */
    font-size: 16px;

    /* typography */
    --font-family: 'Poppins', sans-serif;
    --font-weight: 400; /* regular */
    --font-size: 1rem; /* 16px */

    --title-level-1: 1.75rem; /* 28px */
    --title-level-2: 1.5rem; /* 24px */
    --title-level-3: 1.25rem; /* 20px */
    --title-level-4: 1rem; /* 16px */

    --subtitle: 1.5rem; /* 24px */

    --text: 1rem; /* 16px */
    --text-large: 1.125rem; /* 18px */
    --caption: 0.875rem; /* 14px */
    --button: 0.875rem; /* 14px */

    /* spaces */
    --space-grid: 0.5rem; /* 8px */
    --space: calc(var(--space-grid) * 2); /* 16px */
    --padding-section: calc(var(--space-grid) * 3); /* 32px */

    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;

    /* scroll */
    scroll-behavior: smooth;

    /* background color */
    background-color: var(--color-bg);
}
    /* small screens */
    @media screen and (min-width: 600px) {
        :root {
            --title-level-1: 2rem; /* 32px */
            --title-level-2: 1.75rem; /* 28px */
            --title-level-3: 1.5rem; /* 24px */
            --title-level-4: 1.125rem; /* 18px */
            --button: 1.125rem; /* 18px */
            --padding-section: 3.75rem; /* 60px */
            --space: calc(var(--space-grid) * 3); /* 24px */
        }
    }
    /* medium screens */
    @media screen and (min-width: 900px) {
        :root {
            --title-level-1: 2.25rem; /* 36px */
            --title-level-2: 1.75rem; /* 32px */
            --title-level-3: 1.75rem; /* 28px */
            --title-level-4: 1.25rem; /* 20px */
            --space: calc(var(--space-grid) * 4); /* 32px */
        }
    }
    /* large screens */
    @media screen and (min-width: 1200px) {
        :root {
            --title-level-1: 2.5rem; /* 40px */
            --title-level-2: 2.25rem; /* 36px */
            --title-level-3: 2rem; /* 32px */
            --title-level-4: 1.375rem; /* 22px */
            --text: 1.125rem;
            --text-large: 1.25rem;
            --padding-section: 6.25rem; /* 100px */
        }
    }

/* body definitions */
body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    color: var(--color-onBg);
}

/* global resets */
*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    outline: none;
}

a {
    text-decoration: none;
    color: currentColor;
    transition: color 0.3s;
}
a:hover {
    color: var(--color-secondary-dark);
}