html body.nav-fixed.quarto-light div#quarto-content.quarto-container.page-layout-custom.page-navbar header#title-block-header.quarto-title-block.default div.quarto-title h1.title {
    display: none !important;
}



/* Title of the tutorial*/
div.quarto-title.column-body h1.title {
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: white !important;
}


/* Title banner background color and padding */
div.quarto-title-banner.page-columns.page-full {
  
  background: linear-gradient(
    90deg,
    #2b558a 0%,
    #346ca9 50%,
    #7ab0e2 100%
  );
  color: white;
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  
}


/* Center subtitle and make it larger "A collection of tutorials ..." */
div.quarto-title-meta {
  color: white !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  margin-top: 10px;
}


/* Center title and make it larger Tutorials word */
header#title-block-header.quarto-title-block.default div.quarto-title h1.title {
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: white !important;
  text-align: center;
}


section#tutorials.level2 h2.anchored{
  color: transparent;
}

div#listing-tutorials.quarto-listing.quarto-listing-container-default div.list.quarto-listing-default div.quarto-post.image-right div.metadata a.no-external {
  font-size: 1rem !important;
  color: white !important;
}



div.list.quarto-listing-default div.quarto-post.image-right div.body h3.no-anchor.listing-title a.no-external,
div.list.quarto-listing-default div.quarto-post.image-right div.body div.listing-subtitle a.no-external{
  color: white !important;
}




html body.nav-fixed.fullcontent.quarto-light div#quarto-content.quarto-container.page-layout-custom.page-navbar {
  width: 70% !important;
  margin-left: auto !important;
  margin-right: auto !important;  /* or: margin: 0 auto !important; */
}

/* ≥768px: 2 cols */
@media (max-width: 1740px) {
  html body.nav-fixed.fullcontent.quarto-light div#quarto-content.quarto-container.page-layout-custom.page-navbar section#tutorials.level2 div#listing-tutorials.quarto-listing.quarto-listing-container-grid div.list.grid.quarto-listing-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  html body.nav-fixed.fullcontent.quarto-light div#quarto-content.quarto-container.page-layout-custom.page-navbar section#tutorials.level2 div#listing-tutorials.quarto-listing.quarto-listing-container-grid div.list.grid.quarto-listing-cols-6 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}



/* Style the card box */
/* Style the card box */
.quarto-grid-item.card.h-100.card-left{
  border: 1.5px solid #346CA9;
  height: 200px !important;
  border-radius: 20px;
  background: #1a0002;
  color: #ffd6d3;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}


.quarto-grid-item p.card-img-top {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  min-height: 100px;         /* reserve space for icon */
}

.quarto-grid-item p.card-img-top img.thumbnail-image.card-img {
  max-width: 100px;          /* fixed size box */
  max-height: 100px;
  object-fit: contain;       /* ensure whole icon shows */
  display: block;
}


/* Center + pyramid-ish balanced lines */
h5.no-anchor.card-title.listing-title {
  font-size: 1.1em;
  color: #ffffff;
  margin: 10px auto;          /* centers the block horizontally */
  font-weight: 700;
  text-align: center;         /* center lines */
  max-width: 26ch;            /* narrow width creates pyramid shape */
  line-height: 1.15;          /* tighter lines = stronger pyramid */
  text-wrap: balance;         /* balanced line breaks (modern browsers) */
  /* optional polish */
  letter-spacing: 0.2px;
}


div.card-body.post-contents div.listing-categories {
  justify-content: center;    /* center the categories */
}








/* Overlay gradient to merge with background */
.quarto-grid-item p.card-img-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 2;
}



/* Base card styles (yours) */
.quarto-grid-item.card.h-100.card-left{
  border: 1.5px solid #346CA9;
  height: 400px !important;
  border-radius: 20px;
  background: #1a0002;
  color: #ffd6d3;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  /* entrance: initial state */
  opacity: 0;
  transform: translateY(16px) scale(.98);
}

/* When visible, play the animation */
.quarto-grid-item.card.h-100.card-left.is-visible{
  animation: card-in 700ms cubic-bezier(.2,.65,.25,1) forwards;
  animation-delay: calc(var(--stagger, 0) * 80ms);
}

/* Keyframes */
@keyframes card-in{
  0%   { opacity: 0; transform: translateY(16px) scale(.98); }
  60%  { opacity: 1; transform: translateY(0)   scale(1.00); }
  100% { opacity: 1; transform: none; }
}

/* EXAGGERATED floating hover (no changes to your base block) */
.quarto-grid-item.card.h-100.card-left{
  transition:
    transform .28s cubic-bezier(.2,.75,.2,1.1),
    box-shadow .28s cubic-bezier(.2,.75,.2,1.1),
    filter .28s cubic-bezier(.2,.75,.2,1.1),
    border-color .28s cubic-bezier(.2,.75,.2,1.1);
  will-change: transform, box-shadow, filter;
}

.quarto-grid-item.card.h-100.card-left:hover,
.quarto-grid-item.card.h-100.card-left:focus-within{
  /* BIGGER lift + a touch of 3D tilt & scale */
  transform: translateY(-24px) scale(1.04) rotateX(2deg) rotateY(-2deg);
  /* heavier multi-layer glow + outline that matches your blue */
  box-shadow:
    0 28px 60px rgba(0,0,0,.60),                   /* deep drop shadow */
    0 0 0 3px rgba(52,108,169,.65) inset,          /* bright inner ring */
    0 0 40px rgba(122,176,226,.45),                /* blue outer glow */
    0 0 80px rgba(255,214,211,.25);                /* soft pink halo */
  border-color: #4b86c7;                           /* brighter blue edge */
  filter: saturate(1.15) brightness(1.05);         /* punchier colors */
}

/* Optional: "press" effect for clicks/taps */
.quarto-grid-item.card.h-100.card-left:active{
  transform: translateY(-6px) scale(1.01) rotateX(0) rotateY(0);
  box-shadow: 0 18px 36px rgba(0,0,0,.48);
}

/* Motion-friendly fallback */
@media (prefers-reduced-motion: reduce){
  .quarto-grid-item.card.h-100.card-left{
    transition: box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  }
  .quarto-grid-item.card.h-100.card-left:hover,
  .quarto-grid-item.card.h-100.card-left:focus-within{
    transform: none;
  }
}


/* ADD-ON: make inner content “float” with the card (parallax + pop) */
/* (paste AFTER your existing CSS; no changes to your base blocks) */

/* enable 3D depth for children */
.quarto-grid-item.card.h-100.card-left{
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* common inner parts: smooth transitions */
.quarto-grid-item.card.h-100.card-left .card-header,
.quarto-grid-item.card.h-100.card-left .card-body,
.quarto-grid-item.card.h-100.card-left .card-footer,
.quarto-grid-item.card.h-100.card-left .listing-title,
.quarto-grid-item.card.h-100.card-left .listing-description,
.quarto-grid-item.card.h-100.card-left .listing-date,
.quarto-grid-item.card.h-100.card-left .card-img-top img,
.quarto-grid-item.card.h-100.card-left img.thumbnail-image.card-img{
  transition: transform .28s cubic-bezier(.2,.75,.2,1.1),
              filter .28s cubic-bezier(.2,.75,.2,1.1),
              opacity .28s cubic-bezier(.2,.75,.2,1.1);
  will-change: transform, filter, opacity;
}

/* default slight elevation so content has depth even before hover */
.quarto-grid-item.card.h-100.card-left .card-header,
.quarto-grid-item.card.h-100.card-left .card-body,
.quarto-grid-item.card.h-100.card-left .card-footer{ transform: translateZ(18px); }
.quarto-grid-item.card.h-100.card-left .listing-title{ transform: translateZ(24px); }
.quarto-grid-item.card.h-100.card-left .card-img-top img,
.quarto-grid-item.card.h-100.card-left img.thumbnail-image.card-img{ transform: translateZ(26px); }

/* on hover: bump important bits a bit more for visible “float” */
.quarto-grid-item.card.h-100.card-left:hover .card-header,
.quarto-grid-item.card.h-100.card-left:hover .card-body,
.quarto-grid-item.card.h-100.card-left:hover .card-footer{ transform: translateZ(28px); }

.quarto-grid-item.card.h-100.card-left:hover .listing-title{
  transform: translateZ(34px);
  text-shadow: 0 2px 12px rgba(75,134,199,.35);
}

.quarto-grid-item.card.h-100.card-left:hover .card-img-top img,
.quarto-grid-item.card.h-100.card-left:hover img.thumbnail-image.card-img{
  transform: translateZ(36px) scale(1.04);   /* subtle image pop */
  filter: saturate(1.12) brightness(1.06);
}

/* (optional) de-emphasize metadata on hover so hero elements stand out */
.quarto-grid-item.card.h-100.card-left .listing-date{ opacity: .9; }
.quarto-grid-item.card.h-100.card-left:hover .listing-date{ opacity: .75; }

/* reduced motion: keep effects accessible */
@media (prefers-reduced-motion: reduce){
  .quarto-grid-item.card.h-100.card-left{ perspective: none; }
  .quarto-grid-item.card.h-100.card-left *,
  .quarto-grid-item.card.h-100.card-left:hover *{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
  }
}

/* ensure authors aren’t forced lowercase anywhere */
.listing-author, .listing-date {
  text-transform: none !important;
  color : white !important;
}

/* ensure authors aren’t forced lowercase anywhere */
div.listing-categories div.listing-category {
  color : white !important;
}


/* Medium screens */
@media (max-width: 1200px) {
   div.list.grid.quarto-listing-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Medium screens */
@media (max-width: 600px) {
   div.list.grid.quarto-listing-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
 div.list.grid.quarto-listing-cols-4 .quarto-grid-item.card.h-100.card-left {
    border: 1.5px solid #346CA9;
    border-radius: 20px;
    background: #1a0002;
    color: #ffd6d3;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    height: 300px !important;      /* use this if goal is LESS height */
    opacity: 1;
    transform: none;
  }
}

section#tutorials.level2 h2,
section#methodology.level2 h2{
  font-size: 2rem;
  color: white;
}