* {
    --my-light-red: 204,0,0;
    --my-light-grey: 242,242,242;
    --my-medium-grey: 124,124,124;
    --my-dark-grey: 33,37,41;
    --my-bg-opacity: 0.25;
}

.navbar {
    background-color: #CC0000;
    border-radius: 50px;
}

.navbar-brand, .navbar-brand a {
    font-size: 24px;
    font-family: arial black;
    text-transform: uppercase;
    border-radius: 50px;
    float: left;
    /* To keep same formatting for links under navbar-brand */
    text-decoration: none;
    color: rgba(var(--my-medium-grey),1)
}

.navbar-brand-shimmer, .navbar-brand a:hover, .navbar-list a:hover {
    /* Apply shimmer animation to navbar-brand on load/scroll to top and to all navbar links when hovering */
    background: linear-gradient(
        -45deg,
        rgba(var(--my-dark-grey),1),
        rgba(var(--my-dark-grey),1) 44%,
        rgb(var(--my-light-grey)) 48%,
        rgb(var(--my-light-grey)) 52%,
        rgba(var(--my-dark-grey),1) 56%,
        rgba(var(--my-dark-grey),1) 100%
    ) right/400% 100%;
    background-repeat: no-repeat;
    animation: shimmer 1.5s ease;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.my-footer a {
    text-decoration: none;
}

.accordion-button:not(.collapsed) {
    color: #e40c0c;
    background-color: rgba(var(--my-light-red), var(--my-bg-opacity));
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--my-light-red), 0.5);
}

@keyframes shimmer {
  100% {
    background-position: left;
  }
}

.my-bg-grey {
    background-color: rgba(var(--my-light-grey), 1);
}

.my-bg-red {
    background-color: rgba(var(--my-light-red), 1);
}

.my-bg-red-opaque {
    background-color: rgba(var(--my-light-red), var(--my-bg-opacity));
}

.my-nav-link {
    color: rgba(var(--my-medium-grey), 1);
}

.my-btn-outline {
    color: rgba(var(--my-medium-grey), 1);
    border: 1px solid rgba(var(--my-medium-grey), 1);
    border-radius: 0.375rem;
}