:root {
    --orange-1655: 252, 76, 2; /* fc4c02 */
    --gray-432: 51, 63, 72;    /* 333f48 */
    --gray-431: 91, 103, 112;  /* 5b6770 */
    --gray-430: 124, 135, 142; /* 7c878e */
    --gray-429: 162, 170, 173; /* a2aaad */
    --gray-428: 193, 198, 200; /* c1c6c8 */
    --gray-427: 208, 211, 212; /* d0d3d4 */
}

#navbarHeader {
    background-color: rgb(var(--gray-431)) !important;
}

.navbar {
    background-color: rgb(var(--gray-432)) !important;
}

#logo {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

h1 {
    color: rgb(var(--gray-432));
}

.text-muted {
    color: rgb(var(--gray-430)) !important;
}

.album {
    background-color: rgb(var(--gray-427));
}

a {
    color: rgba(var(--orange-1655));
}

a:hover, a:active, a:focus {
    color: rgb(var(--gray-430));
}

.btn {
    border-radius: 0;
}

.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--gray-430), 0.5);
}

.btn-sm:focus {
    box-shadow: 0 0 0 0.3rem rgba(var(--orange-1655), 0.5);
}

a:focus, .btn-color:focus {
    box-shadow: none;
}

.btn-primary {
    background-color: rgb(var(--orange-1655));
    border-color: rgb(var(--orange-1655));
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: rgb(var(--gray-430));
    border-color: rgb(var(--gray-430));
}

.btn-outline-primary {
    color: rgb(var(--orange-1655));
    border-color: rgb(var(--orange-1655));
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
    color: white;
    background-color: rgb(var(--orange-1655));
    border-color: rgb(var(--orange-1655));
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--orange-1655), 0.5);
}

.btn-color {
    opacity: 0.3;
    border: none;
}

.btn-color:hover, .btn-color:active, .btn-color:focus, .btn-color.selected {
    opacity: 1;
}

/* .card-image {
    overflow: hidden;
    cursor: zoom-in;
}

.zoom {
    transition: transform 0.3s ease;
}

.zoom:hover {
    transform: scale(1.5)
} */

.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    margin-left: 4px;
    margin-right: 4px;
    opacity: 1;
    background-color: transparent;
    border: 1px solid rgb(var(--gray-431));
    border-radius: 8px;
}

.carousel-indicators .active {
    background-color: rgb(var(--gray-431));
}

.small {
    font-size: small;
}