:root {
    --main-bg-color: rgb(124, 124, 124);
    --main-text-color: white;
    --alt-text-color: black;
}

body {
    background-color: var(--main-bg-color);
    text-align: center;
    color: var(--main-text-color);
}

.main-text-color {
    color: var(--main-text-color);
}

.alt-text-color {
    color: var(--alt-text-color);
}

.artistic-black-line {
    border-bottom: solid black 2px;
}

.black-underline {
    text-decoration: underline;
    text-decoration-color: black;
}

/* Header Related */
.header {
    background-color: rgba(255, 255, 255, 0.3);
}

.site-title-container {
    width: 100%;
    max-width: 615px;
    margin: auto;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
}

.site-title-text {
    font-size: min(6.5vw, 40px);
    font-weight: 500;
    margin-bottom: 5px;
}

/* Navbar Related */
.nav-link {
    color: var(--main-text-color)
}

.navbar-toggler {
    border-color: var(--main-text-color);
}

/* Gallery Related */
.generic-container {
    margin: auto;
    height: 65vh;
    width: 100%;
    max-width: 950px;
    /* background-color: black; */
}

.photo-outline {
    outline: 2px solid rgb(42, 42, 42);
    outline-offset: -2px;
}

.carousel-indicators [data-bs-target] {
    opacity: 0.0;
}
.carousel-indicators .active {
    opacity: 0.0;
}

.img-copyright {
    z-index: 2;
    font-size: 14px;
    position: absolute;
    opacity: 0.4;
}

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg);  }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.spinner {
    z-index: 0;
    height: 28px;
    width: 28px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    animation: spin 1.5s linear infinite;
}