:root {
    --bg-image: url("/assets/space.webp");
    --bg-wash: rgba(11, 11, 11, 0.6);
    --link-transition: color 160ms ease, transform 160ms ease;
    --primary: #003057;
    --blue: #2b6cdf;
    --lightblue: #abc;
    --danger: #b22222;
    --success: #2a9d8f;
    --warning: #e9c46a;
    --disabled: rgba(211, 211, 211, .8);
    --mediumgray: #345678;
    --darkgray: #123456;
    --dark: #001620;
    --light: #eee;
    --dev: #0B6F0B;
    --link: steelblue;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: var(--primary);
    background-image: url('../assets/space.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Fallback base color for very small viewports or when image fails to load */
    background-color: var(--disabled);

    /* Layer 1: semi-opaque white wash. Layer 2: background image (see --bg-image).
     The gradient ensures text remains readable over busy photos. */
    background-image: linear-gradient(var(--bg-wash), var(--bg-wash)), var(--bg-image);
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;

    /* Improve rendering on mobile/low-powered devices */
    background-attachment: scroll;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main.middle .page-bg {
    width: 100%;
    background-color: var(--bg-wash);
}

#app.appContent {
    border: 2px solid var(--blue);
}

/** Color classes **/
.primary-bg {
    background-color: var(--primary);
}

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

.light-bg {
    background-color: var(--light);
}

.blue-bg {
    background-color: var(--blue);
}

.lightblue-bg {
    background-color: var(--lightblue);
}

.danger-bg {
    background-color: var(--danger);
}

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

.warning-bg {
    background-color: var(--warning);
}

.disabled-bg {
    background-color: var(--disabled);
}

.mediumgray-bg {
    background-color: var(--mediumgray);
}

.darkgray-bg {
    background-color: var(--darkgray);
}

.dev-bg {
    background-color: var(--dev);
}

/* bright */
.accent1-bg {
    background-color: var(--accent1);
}

.accent2-bg {
    background-color: var(--accent2);
}

/* alert */
.accent3-bg {
    background-color: var(--accent3);
}

.active {
    background-color: var(--accent1);
}
.btn-primary {
    background-color: var(--primary);
    border-color: var(--blue);
    color: var(--light);
}
.btn-primary:hover {
    background-color: var(--blue);
    border-color: var(--light);
    color: var(--light);
}
.btn-primary:focus {
    background-color: var(--lightblue);
    border-color: var(--light);
    color: var(--dark);
}
.primary-txt {
    color: var(--primary);
}

.mediumgray-txt {
    color: var(--mediumgray);
}

.darkgray-txt {
    color: var(--darkgray);
}

.dark-txt {
    color: var(--dark);
}

.light-txt {
    color: var(--light);
}

.blue-txt {
    color: var(--blue);
}

.lightblue-txt {
    color: var(--lightblue);
}

.danger-txt {
    color: var(--danger);
}

.success-txt {
    color: var(--success);
}

.warning-txt {
    color: var(--warning);
}

.disabled-txt {
    color: var(--disabled);
}

.mediumgray-txt {
    color: var(--mediumgray);
}

.darkgray-txt {
    color: var(--darkgray);
}

.dev-txt {
    color: var(--dev);
}

li.nav-item a.nav-link {
    color: var(--disabled);
    transition: var(--link-transition);
}

li.nav-item a.nav-link:hover {
    outline:var(--warning) solid 1px;
    border-radius: 2rem;
    transform: scale(1.0);
}

li.nav-item a.nav-link:focus {
    color: var(--lightblue);
    transform: scale(1.05);
}
/* while being clicked on */
li.nav-item a.nav-link:active {
    color: var(--blue);
    transform: scale(0.95);
}
/* currently selected view/page */
li.nav-item a.nav-link.active {
    color: var(--warning);
    transform: scale(0.95);
}


.primary-border {
    color: var(--primary);
}

.accent1-border {
    color: var(--accent1);
}

.accent2-border {
    color: var(--accent2);
}

/* alert */
.accent3-border {
    color: var(--accent3);
}

.success-border {
    color: var(--success);
}

.warning-border {
    color: var(--warning);
}

.dev-border {
    color: var(--dev);
}