:root {
    --font-serif: "basic-sans", sans-serif;
    --font-sans-serif: "basic-sans", sans-serif;
    --font-icon: "Font Awesome 6 Pro";
    --font-code: "Share Tech Mono";
    --base-font-size: 14px;
    --base-line-height: 1em;
    --text-font: 400 1rem/1.4rem var(--font-serif);
    --input-font: 400 1rem/1rem var(--font-sans-serif);
    --footer-font: 400 1rem/1.5rem var(--font-serif);
    --nav-font: 400 1rem/1rem var(--font-sans-serif);
    --nav-text-transform: none;
    --color-1: #002e4d;
    --color-2: #457b9d;
    --color-3: #c9e3e0;
    --color-4: #eeeef1;
    --color-5: #ab4545;
    --color-6: #00574d;
    --color-7: #73ab00;
    --color-8: #FFc700;
    --color-9: #bece38;
    --color-10: #9c459d;
    --color-1-reverse: var(--color-4);
    --color-2-reverse: var(--color-4);
    --color-3-reverse: var(--color-1);
    --color-4-reverse: var(--color-1);
    --color-5-reverse: var(--color-4);
    --color-dark: #8f8f8f;
    --color-darker: #5f5f5f;
    --color-darkest: #2f2f2f;
    --color-light: #c3c3c3;
    --color-lighter: #e9e9e9;
    --color-lightest: #ffffff;
    --color-gray: #939393;
    --color-grayer: #737373;
    --color-success: #73ab00;
    --color-success-light: #73ab0044;
    --color-info: #fffddd;
    --color-warning: #fffddd;
    --color-warning-light: #e6e64644;
    --color-error: var(--color-5);
    --color-error-light: #ab454533;
    --color-success-reverse: #ffffff;
    --color-info-reverse: #3f3f3f;
    --color-warning-reverse: #3f3f3f;
    --color-error-reverse: #ffffff;
    --color-star: #d1a400;
    --shadow: 0 0 5px rgba(0, 0, 0, .2);
    --shadow-near: 0 0 2px rgba(0, 0, 0, .2);
    --shadow-far: 0 0 15px rgba(0, 0, 0, .2);
    --shadow-very-far: 0 0 35px rgba(0, 0, 0, .2);
    --text-color: var(--color-darkest);
    --sub-text-color: var(--color-darker);
    --reverse-text-color: var(--color-1-reverse);
    --reverse-color: var(--color-1);
    --link-color: var(--color-2);
    --link-color-reverse: var(--color-2-reverse);
    --border-color: rgba(0,0,0,.2);
    --border-light-color: rgba(0,0,0,.1);
    --border-lightest-color: rgba(0,0,0,.025);
    --border-color-reverse: rgba(255,255,255,.2);
    --modal-background-color: var(--color-lightest);
    --modal-close-background-color: var(--color-darkest);
    --modal-close-color: var(--color-lightest);
    --button-radius: 1.2rem;
    --background-color: var(--color-4);
    --gutter-width: 10vw;
    --gutter-width-wide: 5vw;
    --gutter-width-tight: 15vw;
    --gutter-width-extra-tight: 20vw;
    --alternating-band-background-color: rgba(0, 0, 0, .05);
    --alternating-reverse-background-color: var(--reverse-color);
    --alternating-reverse-color: var(--reverse-text-color);
    --white-out-color: rgba(255,255,255,.8);
    --header-background-color: var(--color-lightest);
    --header-reverse-background-color: var(--color-4-reverse);
    --header-over-hero-background-color: transparent;
    --header-vertical-padding: 20px;
    --header-gutter-width: 5vw;
    --nav-width: 250px;
    --nav-background-color: var(--color-1);
    --nav-menu-icon-color: var(--color-1);
    --nav-link-color: rgba(255, 255, 255, .8);
    --footer-background-color: var(--color-dark);
    --footer-color: var(--color-lightest);
    --footer-h5-color: var(--color-light);
    --logo-width: 200px;
    --logo-height: 113px;
    --logo-small-width: 200px;
    --logo-small-height: 178px;
    --logo-image: url('/images/logo-yellow-no-background.png');
    --logo-small-image: url('/images/logo-circle-with-shadow.png');
    --logo-reverse-image: url('/images/logo-yellow-no-background.png');
    --logo-over-hero-image: url('/images/logo-white-no-background.png');
    --hero-fade-color: rgba(0,0,0,.7);
    --hero-aspect-ratio: 16/6;
    --hero-short-aspect-ratio: 16/6;
    --search-bar-background-color: var(--background-color);
    --search-bar-radius: 10px;
    --rental-photo-aspect-ratio: 3/2;
    --card-radius: 1rem;
}

.success-color {
    color: var(--color-success) !important;
}

.info-color {
    color: var(--color-info) !important;
}

.warning-color {
    color: var(--color-warning) !important;
}

.error-color {
    color: var(--color-error) !important;
}

.color-1 {
    color: var(--color-1) !important;
}

.color-2 {
    color: var(--color-2) !important;
}

.color-3 {
    color: var(--color-3) !important;
}

.color-4 {
    color: var(--color-4) !important;
}

.color-5 {
    color: var(--color-5) !important;
}

.color-6 {
    color: var(--color-6) !important;
}

.link-color {
    color: var(--link-color) !important;
}

.star-color {
    color: var(--color-star) !important;
}

.success-background-color {
    background: var(--color-success) !important;
}

.info-background-color {
    background: var(--color-info) !important;
}

.error-background-color {
    background: var(--color-error) !important;
}

.font-serif {
    font-family: var(--font-serif) !important;
}

.font-sans-serif {
    font-family: var(--font-sans-serif) !important;
}

.font-code {
    font-family: var(--font-code) !important;
}

@media screen and (min-width: 1366px) {
    :root {
        --gutter-width: 15vw;
        --gutter-width-tight: 20vw;
        --gutter-width-extra-tight: 25vw;
    }
}

@media screen and (min-width: 1920px) {
    :root {
        --gutter-width: 20vw;
        --gutter-width-tight: 25vw;
        --gutter-width-extra-tight: 30vw;
    }
}

@media screen and (max-width: 834px) {
    :root {
        --logo-width: 80px;
        --logo-height: 45px;
        --logo-small-width: 80px;
        --logo-small-height: 35px;
    }
}