:root {
    --blue: #4183c4;
    --blue-light: #cbd8ff;
    --heading-color: rgba(0, 0, 0, 0.7);
    --dark: rgba(34, 44, 44, 1);
    --dark-opacity: rgba(34, 44, 44, 0.5);
    --green: #154b50;
    --background-without-opacity: rgba(255, 255, 255, 0.7);

    /* need proper names */
    --primary-color: rgba(18, 19, 34, 1);
    --primary-color-70: rgba(18, 19, 34, 0.7);
    --primary-color-50: rgba(18, 19, 34, 0.5);
    --primary-color-20: rgba(18, 19, 34, 0.2);
    --secondary-color: rgba(75, 85, 136, 1);
    --tertiary-color: rgba(7, 31, 53, 1);
    --accent-color: #ff3e00;

    --primary-opposite: rgba(227, 223, 193, 1);

    --white: rgba(213, 222, 221, 1);
    --white-50: rgba(213, 222, 221, 0.5);
    --black: #ffffff;

    --dark: rgba(34, 44, 44, 1);
    --dark-opacity: rgba(34, 44, 44, 0.5);
    --error: rgba(208, 42, 42, 1);
    --warning: rgba(221, 81, 81, 1);

    --text-color: var(--white);

    font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    /*Global Variables*/
    --font-mono: "Fira Mono", monospace;

    /* Spacing */
    --column-width: 42rem;
    --column-margin-top: 4rem;
    --radius: 10px;
    --grid-gap: 5px;
    --thumbnail-width: 200px;
    --content-width: 660px;
    --vertical-margin: 10px 0;
    --side-margin: 1rem;
    --btn-margin: 0 0.3em 0.3em 0;
    --margin-bottom: 50px;

    /* Font */
    --h-margin: 0.5em 0;
    --bold: 500;

    /* Grid */
    --grid-sm: 2;
    --grid-md: 3;
    --grid-lg: 5;

    /* misc */
    --blur: 3rem;

    background: var(--primary-color);
    overflow-y: scroll;
}