:root {
    --bs-body-bg: #0c0c12;
    --bs-body-color: #fff;
    --bs-breadcrumb-item-active-color: #fff;

}
.bg-body-tertiary{
    background-color: #0c0c12!important;
}

.text-bg-lilbtn {
    color: #1bfb72!important;
    background-color: #042c14!important;
    font-size: .925rem;
}

.product-price {
    font-size:1.6rem;
    line-height:2.1rem;
}

.breadcrumb {
    --bs-breadcrumb-divider-color:#6c757d!important;
    --bs-breadcrumb-margin-bottom:.25rem;
}

.breadcrumb-item.active{
    color:#ababab!important;
}

.bcrumb-emphasis{
    color:#ababab!important;
}

.link-body-emphasis{
    color:#fff!important;
}

.link-body-emphasis:focus, .link-body-emphasis:hover {
    color: #b6b6b6!important;
    -webkit-text-decoration-color: #b6b6b6!important;
    text-decoration-color: #b6b6b6!important;
}

.text-body-emphasis{
    color:#fff!important;
}

.nav-list {
    margin-left: 2rem;
    
}

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.nav-link {
    font-size:1.01rem;
    border-bottom: 2px solid transparent;
    transition: border-color .3s;
}
.nav-link:active{
    border-bottom: 2px solid #1bfb72;
}
.nav-link:hover{
    border-bottom: 2px solid #1bfb72;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1bfb72;
    --bs-btn-border-color: #0dfd85;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0bd760;
    --bs-btn-hover-border-color: #0aca6a;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0aca5a;
    --bs-btn-active-border-color: #0abe40;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0dfd79;
    --bs-btn-disabled-border-color: #0dfd71;
}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1140px;
}

h1 {
    font-size: 1.8rem;
    line-height: 2.2rem;
}

#gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-start;
    position:sticky;
    top:0rem;
  }

  #gallery a {
   
    max-width: calc(16.66% - 5px); /* Adjust for gap between images */
    margin: 2px;
    display: block;
  }

  /* Adjust the size of the first image to fit the width */
  #gallery a:first-child {
    width: 100%;
    height: auto;
    max-width: 100%;
}
  #gallery a:first-child img {
    width: 100%;
    height: 19rem;
    object-fit: cover;
}

  /* Style for the rest of the images */
  #gallery a:not(:first-child) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.play-button {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background-color: #0009;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-play-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/></svg>");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 6565;
}

.ytthumb{
    position:relative;
}

img {
    max-width: 100%;
    border-radius: 7px;
    
}

#realups {
    font-size: 1.25rem;
    font-weight: 300;
}

.cats-meow {
    
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin:25px 0;
}

.cats-meow a{
    padding:20px;
    border-radius: 6px;
    border: 1px solid #444;
    flex: 0 0 auto;
    
    text-decoration: none;
    color:#fff;
}
.cats-meow a:hover{
    background-color:#0abe400d;  
}

.cats-meow a img {
    border-radius: 6px;
    width: 100%;
    max-width: 100%;
    height: 11rem;
    object-fit:cover;
}

@media (min-width: 768px){
.row-cols-md-3>* {
    flex: 0 0 auto;
    width: 32.4%;
}
}