:root {
    --dark-blue: #1e3244;
    --medium-blue: #3f6d92;
    --light-blue: #99c0e1;
    --orange: #f16102;
    --white: #FFFFFF;
    --gray: #343c43;

    --side-padding: 3.75rem;

    --font-size: 12px;

    --font-xxsmall: 1rem;
    --font-xsmall: 1.5rem;
    --font-small: 1.75rem;
    --font-medium: 2.375rem;
    --font-large: 2.75rem;
    --font-xlarge: 4rem;
    --font-xxlarge: 6.25rem;

    --font-family: 'Montserrat', sans-serif;
}

html {
    --background-color: var(--dark-blue);

    --font-color: var(--white);
    --font-color-highlight: var(--light-blue);
    --icon-color: var(--white);
    --icon-color-hover: var(--light-blue);

    --input-border-color: var(--white);
    --input-outline-color: var(--light-blue);

    --heading-color: var(--light-blue);
    --heading-secondary-color: var(--orange);

    --button-border: var(--white);
    --button-color: var(--white);
    --button-background: var(--dark-blue);
    --button-hover-border: var(--light-blue);
    --button-hover-color: var(--white);
    --button-hover-background: var(--dark-blue);

    --button-primary-border: var(--orange);
    --button-primary-color: var(--white);
    --button-primary-background: var(--orange);
    --button-primary-hover-border: var(--light-blue);
    --button-primary-hover-color: var(--dark-blue);
    --button-primary-hover-background: var(--light-blue);

    --border-color: var(--light-blue);
    --layout-width: 100rem;

    --card-background-1: var(--medium-blue);
    --card-background-2: var(--gray);
    --card-background-3: var(--dark-blue);
    --card-color: var(--white);

    --flash-color: var(--dark-blue);
    --flash-background: var(--light-blue);
    --flash-error-background: var(--orange);
}

.dark {
    background-color: var(--gray);
}

.light {
    --background-color: var(--white);
    --font-color: var(--dark-blue);
    --heading-color: var(--medium-blue);
    --icon-color: var(--medium-blue);
    --font-color-highlight: var(--medium-blue);

    --input-border-color: var(--dark-blue);

    --button-border: var(--orange);
    --button-color: var(--orange);
    --button-background: var(--white);
    --button-hover-border: var(--light-blue);
    --button-hover-color: var(--dark-blue);
    --button-hover-background: var(--white);
}

.blue {
    --background-color: var(--light-blue);
    --heading-color: var(--dark-blue);
    --heading-secondary-color: var(--white);
}

body {
    background-color: var(--background-color);
}

@media screen and (max-width: 800px) {
    :root {
        --font-size: 10px;
        --side-padding: 2rem;
    }
}