html, body {
    background-color: #eeeeee;
}
.my-indicator{display:none;}
.htmx-request .my-indicator{display:inline;}
.htmx-request.my-indicator{display:inline;}
.spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}
.card-img-top {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}
.w75 {
    aspect-ratio: 16/9;
    object-fit: cover;
}
.card-hover-move {
    transition: transform 0.2s ease;
}
.card-hover-move:hover {
    transform: scale(1.01) translateY(-7px);
    box-shadow: 0 8px 8px rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
}
.w75 {
    width: 100%;
    height: auto;
    max-width: 600px;
}
.adspot {
    margin-bottom: 0;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@view-transition {
  navigation: auto;
}

/* Apply fade effect to both old and new root elements */
::view-transition-old(root),
::view-transition-new(root) {
  animation: fade-scale-in 300ms ease both;
}
.bg-light {
    background-color:#fff;
}
@keyframes fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}