.carousel-item {
    height: 32rem;
    background: #7d7d7d;
    color: white;
    position: relative;
}
.project {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
}
.project-image {
    background-position: center;
    background-size: cover;
}
.text-shadow {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.533);
}
img.small-image {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg:#6610f2;
    --bs-btn-border-color: #6610f2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3d0a91;
    --bs-btn-hover-border-color: #3d0a91;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #520dc2;
    --bs-btn-active-border-color: #520dc2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}
.tag {
    background-color: gray;
}
.image-container {
    position: relative;
    max-width: 100%; /* Ensure the image does not exceed its original size */
}
.overlay {
    position: absolute;
    bottom: 0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dark semi-transparent background */
    color: white; /* Text color */
}
.blue {
    color:#96c0ff;
}