:root {
  --bulma-primary: #5c91f5;
  --bulma-primary-h: 219deg;
  --bulma-primary-s: 88%;
  --bulma-primary-l: 66%;
}

.card, 
.card-hover-effect {
    display: block; 
    width: 100%; 
    text-decoration: none; 
    color: inherit; 
}

.card-hover-effect {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card-hover-effect:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    z-index: 10; 
}

.blog-hero {
    background-image: var(--hero-image-url);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.4);
}

.hero-body .title span,
.hero-body .subtitle span {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    line-height: 1.3;
}

.reading-tracker-fixed {
    position: fixed;
    top: 3.25rem; /* This must match your Navbar's height */
    left: 0;
    right: 0;
    z-index: 11; 
    margin: 0; 
}

body {
    padding-top: calc(3.25rem + 0.75rem); /* Navbar height + Progress bar height */
}

.is-300x300 {
    width: 300px !important;
    height: 300px !important;
}