:root {
    /* COLOR BASICS */
    /* primary */
    --color-primary-100: #006FFF;
    --color-primary-200: #00A8E7;
    --color-primary-300: #18B7FE;
    --color-primary-400: #18D4FE;
    --color-primary-500: #00F2FF;
    --color-primary-600: #FBFCFE;
    /* secondary */
    --color-secondary-100: #030810;
    --color-secondary-200: #0D131C;
    --color-secondary-300: #121A27;
    --color-secondary-400: #172232;
    --color-secondary-500: #151C37;
    --color-secondary-600: #0B3E53;
    /* tertiary */
    --color-tertiary-100: #F55C31;
    --color-tertiary-200: #F68651;
    --color-tertiary-300: #FFDC7A;
    --color-tertiary-400: #B5B5B5;
    /* error */
    --color-error-100: #FA005C;

    /* COLORS TRANSPARENT */
    /* primary */
    --color-opacity-primary-100: rgba(0, 111, 255, 1);
    --color-opacity-primary-200: rgba(0, 168, 231, 1);
    --color-opacity-primary-300: rgba(24, 183, 254, 1);
    --color-opacity-primary-400: rgba(24, 212, 254, 1);
    --color-opacity-primary-500: rgba(0, 242, 255, 1);
    --color-opacity-primary-600: rgba(251, 252, 254, 1);
    --color-opacity-primary-600-06: rgba(251, 252, 254, 0.06);
    --color-opacity-primary-600-08: rgba(251, 252, 254, 0.08);
    --color-opacity-primary-600-18: rgba(251, 252, 254, 0.18);
    /* secondary */
    --color-opacity-secondary-100: rgba(3, 8, 16, 1);
    --color-opacity-secondary-200: rgba(13, 19, 28, 1);
    --color-opacity-secondary-300: rgba(18, 26, 39, 1);
    --color-opacity-secondary-400: rgba(23, 34, 50, 1);
    --color-opacity-secondary-500: rgba(21, 28, 55, 1);
    --color-opacity-secondary-600: rgba(11, 62, 83, 1);
    /* tertiary */
    --color-opacity-tertiary-100: rgba(245, 92, 49, 1);
    --color-opacity-tertiary-200: rgba(246, 134, 81, 1);
    --color-opacity-tertiary-300: rgba(255, 220, 122, 1);
    --color-opacity-tertiary-400: rgba(181, 181, 181, 1);
    /* error */
    --color-opacity-error-100: rgba(250, 0, 92, 1);
}

@font-face {
    font-family: font-primary;
    src: local('Exo'), url('./fonts/Exo.ttf');
    font-display: swap;
}

@font-face {
    font-family: font-secondary;
    src: local('Poppins'), url('./fonts/Poppins.ttf');
    font-display: swap;
}

body, #root {
    margin: 0;
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background-color: var(--color-secondary-100);
    font-family: font-primary;
}

button {
    padding: 0;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

input, textarea {
    outline: none;
}

a {
    -webkit-tap-highlight-color: transparent;
}

a:focus {
    outline: none !important;
}

a:-webkit-any-link {
    color: inherit;
    cursor: inherit;
    text-decoration: inherit;
}