:root {
    --globe-fill: #000000;
    --globe-outline: #ffffff;
    --globe-outline-width: 14;
    --star-fill: #ffffff;
    --constellation-fill: #ffffff;
    --constellation-width: 2;
    --constellation-opacity: 0.425;
    --graticule-fill: #ffffff;
    --graticule-opacity: 0.6;
    --graticule-dash: 1;
}

#background * {
    fill: var(--globe-fill);
}

#constLines * {
    fill: none;
    stroke-width: var(--constellation-width);
    stroke-opacity: var(--constellation-opacity);
    /* To change constellation color, change stroke */
    stroke: var(--constellation-fill);
}

#mapBorder * {
    stroke: var(--globe-outline);
    stroke-width: var(--globe-outline-width);
}

#stars * {
    fill: var(--star-fill);
    stroke: var(--star-fill);
}

#gridLines * {
    fill: none;
    stroke-width: 0.27px;
    stroke-dasharray: var(--graticule-dash);
    /* To change globe lines color, change stroke */
    stroke: var(--graticule-fill);
    /* To make globe lines less noticable, decrease stroke-opacity */
    stroke-opacity: var(--graticule-opacity);
    fill-opacity: var(--graticule-opacity);
}

input[type="color"] {
    margin: .4rem;
}

label {
    font: 1rem 'Fira Sans', sans-serif;
}

.card {
    margin: 0 0.5em;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
    border-radius: 0;
    height: 12rem;
}

.carousel {
    max-width: 550px;
}

.carousel-inner {
    padding: 3rem;
}