* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {

    &:link, &:visited, &:hover, &:active {
        text-decoration: none;
    }
}

@font-face {
    font-family: "Roboto Flex";
    src: url("font/RobotoFlex-Variable.ttf") format("truetype");
}

body {
    height: 100vh;
    background-color: var(--color-gray-400);
    background-image: url("./svg/background-grid.svg");
    background-position: 50px 50px;
    background-repeat: repeat;
}

a:visited, a:active, a:hover, a:visited, a:link {
    text-decoration: none;
    color: inherit;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

button {
    border: none;
    background: none;
}

:root {

    font-family: "Roboto Flex", Roboto, "Open Sans", sans-serif;
    color-scheme: light;
    
    --color-white: #ffffff;
    --color-black: #000000;

    --color-gray-50: #fcfcfc;
    --color-gray-100: #f3f3f3;
    --color-gray-150: #eaeaea;
    --color-gray-200: #e2e2e2;
    --color-gray-300: #d7d7d7;
    --color-gray-400: #c5c5c5;
    --color-gray-500: #b6b6b6;
    --color-gray-600: #a6a6a6;
    --color-gray-700: #888888;
    --color-gray-750: #5d5d5d;
    --color-gray-800: #424242;
    --color-gray-850: #343434;
    --color-gray-900: #262626;
    --color-gray-950: #1a1a1a;

    --color-muted-blue-25: #f5f9ff;
    --color-muted-blue-35: #e0e9f2;
    --color-muted-blue-50: #e9f1fc;
    --color-muted-blue-100: #cbd7e7;
    --color-muted-blue-150: #b2c1d5;
    --color-muted-blue-200: #a3b9d7;
    --color-muted-blue-250: #a5b9d2;
    --color-muted-blue-300: #a3bbdc;
    --color-muted-blue-350: #789bce;
    --color-muted-blue-400: #456895;
    --color-muted-blue-450: #3e5d85;
    --color-muted-blue-500: #31598c;
    --color-muted-blue-550: #295185;
    --color-muted-blue-600: #1f3f69;
    --color-muted-blue-700: #1a3962;
    --color-muted-blue-800: rgb(22 51 88);
    --color-muted-blue-900: #062141;
    --color-muted-blue-950: #041a33;

    --color-blue-50: #eef5ff;
    --color-blue-100: #d9e9ff;
    --color-blue-150: #bbd7fc;
    --color-blue-200: #b2cff5;
    --color-blue-300: #8bb5eb;
    --color-blue-350: #7face5;
    --color-blue-400: #649be2;
    --color-blue-500: #3d81d8;
    --color-blue-600: #1767ce;
    --color-blue-700: #114f9d;
    --color-blue-750: #073b84;
    --color-blue-800: #0c366c;
    --color-blue-900: #0a2343;
    --color-blue-950: #061629;

    --color-cool-green-50: #e8f7eb;
    --color-cool-green-100: #d0f5d9;
    --color-cool-green-200: #aae4b9;
    --color-cool-green-300: #83d499;
    --color-cool-green-400: #5dc479;
    --color-cool-green-500: #37b359;
    --color-cool-green-600: #10a339;
    --color-cool-green-700: #138031;
    --color-cool-green-800: #0c551f;
    --color-cool-green-900: #052b0e;
    --color-cool-green-950: #001a04;

    --color-cool-mint-50: #e2fafb;
    --color-cool-mint-100: #cbf4f7;
    --color-cool-mint-200: #85e4ed;
    --color-cool-mint-300: #00d5e9;
    --color-cool-mint-400: #00c4d8;
    --color-cool-mint-500: #00b3c7;
    --color-cool-mint-600: #0090a0;
    --color-cool-mint-700: #006c79;
    --color-cool-mint-800: #004952;
    --color-cool-mint-900: #00272e;
    --color-cool-mint-950: #001c21;

    --color-cyan-100: #d0edff;
    --color-cyan-200: #bfe8ff;
    --color-cyan-300: #a1dcff;
    --color-cyan-400: #87cdfc;
    --color-cyan-500: #6ec6ff;
    --color-cyan-600: #59c1ff;
    --color-cyan-700: #4abafd;
    --color-cyan-800: #16a3f8;
    --color-cyan-900: #0e9df3;
    

    --color-warm-mint-50: #dcfaf5;
    --color-warm-mint-100: #bef7ed;
    --color-warm-mint-200: #85e6d6;
    --color-warm-mint-300: #4bd5be;
    --color-warm-mint-400: #12c4a7;
    --color-warm-mint-500: #10ab92;
    --color-warm-mint-600: #0e927c;
    --color-warm-mint-700: #0a705f;
    --color-warm-mint-800: #064e42;
    --color-warm-mint-900: #022c25;
    --color-warm-mint-950: #011c18;

    --color-brown-50: #f3e6e1;
    --color-brown-100: #e5d0c6;
    --color-brown-200: #d0baaf;
    --color-brown-300: #bdaaa2;
    --color-brown-400: #8f7f78;
    --color-brown-500: #846d62;

    --color-red-50: #fff2ee;
    --color-red-100: #ffddd6;
    --color-red-200: #ffc7bd;
    --color-red-300: #ff9e8f;
    --color-red-400: #ff7461;
    --color-red-450: #ff5d46;
    --color-red-500: #f34531;
    --color-red-600: #e81502;
    --color-red-700: #b21002;
    --color-red-800: #7b0a02;
    --color-red-850: #700801;
    --color-red-900: #450502;
    --color-red-950: #290103;

    --color-orange-50: #fff3e8;
    --color-orange-100: #ffe0c7;
    --color-orange-200: #ffc9a1;
    --color-orange-300: #f1a166;
    --color-orange-400: #ff9c54;
    --color-orange-500: #f5802c;
    --color-orange-600: #e56503;
    --color-orange-700: #b94f00;
    --color-orange-800: #7c3500;
    --color-orange-900: #401a00;
    --color-orange-950: #210c00;

    --color-cool-pink-50: #fff0fe;
    --color-cool-pink-100: #f7dff6;
    --color-cool-pink-200: #efb4ed;
    --color-cool-pink-300: #e689e4;
    --color-cool-pink-400: #dd5edb;
    --color-cool-pink-500: #d533d2;
    --color-cool-pink-600: #cc08c9;
    --color-cool-pink-700: #9c069a;
    --color-cool-pink-800: #6b046a;
    --color-cool-pink-900: #3b023b;
    --color-cool-pink-950: #260026;

    --color-warm-pink-50: #fff0f7;
    --color-warm-pink-100: #ffdbee;
    --color-warm-pink-200: #fdafd7;
    --color-warm-pink-300: #fb84c1;
    --color-warm-pink-400: #f958ab;
    --color-warm-pink-500: #f72c94;
    --color-warm-pink-600: #de0072;
    --color-warm-pink-700: #ab0058;
    --color-warm-pink-800: #78003d;
    --color-warm-pink-900: #450022;
    --color-warm-pink-950: #2e0017;

    --color-yellow-50: #fbf8cb;
    --color-yellow-100: #fff7a3;
    --color-yellow-200: #fff36e;
    --color-yellow-300: #ffef3a;
    --color-yellow-400: #ffea05;
    --color-yellow-500: #ffe100;
    --color-yellow-600: #dac100;
    --color-yellow-700: #b5a000;
    --color-yellow-800: #746500;
    --color-yellow-900: #332a00;
    --color-yellow-950: #1a1500;

    --color-indigo-50: #e7e5f0;
    --color-indigo-100: #d3cee2;
    --color-indigo-150: #c4c0e8;
    --color-indigo-200: #a39fc8;
    --color-indigo-300: #8d88bc;
    --color-indigo-400: #6258a1;
    --color-indigo-500: #4f4094;
    --color-indigo-600: #3b2a86;
    --color-indigo-650: #35327d;
    --color-indigo-700: #302e74;
    --color-indigo-750: #2f2d69;
    --color-indigo-800: #2d2b64;
    --color-indigo-850: #262557;
    --color-indigo-900: #21204b;
    --color-indigo-950: #1a193a;
    
    --box-shadow-100: 2px 2px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-200: 2px 2px 6px rgba(0, 0, 0, 0.2);
    --box-shadow-300: 2px 2px 6px rgba(0, 0, 0, 0.3);
    --box-shadow-400: 2px 2px 6px rgba(0, 0, 0, 0.4);
    --box-shadow-500: 2px 2px 6px rgba(0, 0, 0, 0.5);
    --box-shadow-600: 2px 2px 6px rgba(0, 0, 0, 0.6);
    --box-shadow-700: 2px 2px 6px rgba(0, 0, 0, 0.7);
    --box-shadow-800: 2px 2px 6px rgba(0, 0, 0, 0.8);
    --box-shadow-900: 2px 2px 6px rgba(0, 0, 0, 0.9);
    --box-shadow-1000: 2px 2px 6px rgba(0, 0, 0, 1);
    
    --text-shadow: 1px 1px 4px #000;
}

h1, h2, h3, h4, h5, h6 {
    padding-top: 1em;
    padding-bottom: 1em;
}

.centered {
    text-align: center;
}