:root {
    --background-color: #030A19;
    --text-color: white;
    --border-color: rgba(8, 34, 80, 0.5);
    --primary-color: #02cf81; /*#00F1FF;*/
    --secondary-color: #e1e138;
    --tertiary-color: #e1e138;
    --background-image-url: url(../images/spacehud-bg-dark.jpg);
    --border-color:  rgba(255, 255, 255, 0.1);
    --background-card-color: rgba(255, 255, 255, 0.01);
    --text-on-lightbg: #030A19;
    --logo-color: #e1e138;
    --card-shadow-color: #293251;
    --background-color-modal: rgba(0, 0, 0, 0.7); 
    --modal-bg-color: rgba(3 10 25 /94%); 
}

* {
    transition: all 1s;
}

body.hud-body {
    background: var(--background-color);
    mix-blend-mode: difference;
    color: var(--text-color);
}
select option {
    background: var(--primary-color);
    color: var(--background-color);
}


.vector-flat-map .st2 {
    fill: var(--primary-color);
}

.inner-container.main .inner-column.left-inner {
    mix-blend-mode: plus-lighter;
    filter: hue-rotate(318deg) saturate(90%);
    transition: filter 2s ease-in-out;
    opacity: 0.9;
}
.inner-container.main .inner-column.right-inner {
    mix-blend-mode: plus-lighter;
    filter: sepia(0%) hue-rotate(351deg) saturate(110%);
    transition: filter 2s ease-in-out;
    opacity: 0.8;
}
#iss-location-widget {
    mix-blend-mode: plus-lighter;
    filter: contrast(120%) hue-rotate(340deg) saturate(320%) brightness(1);
    opacity: 1;
}
#earth-container {
    background: url('../images/map1.svg') repeat-x;
}
.outlined {
    background: var(--background-card-color);
    position: relative;
    box-shadow: -1px 3px 16px 0 #02c56d42;
    border: 1px solid #ffffff24;
}
#iss-crew img {
    width: 48px;
    border-radius: 8px;
    margin-right: 8px;
    filter: grayscale(1);
    mix-blend-mode: hard-light;
}
#launch-info img {
    width: 160px;
    border-radius: 16px;
    mix-blend-mode: plus-lighter;
    filter: unset;
    opacity: 1;
}
.highlight-text {
    color: var(--primary-color);
    padding: 0 4px;
    text-transform: uppercase;
}