/*
 * Quark 2 — User customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 * 2026-06-17
 */
 
:root {
   --pico-font-size: 19px;
}

.img-light, .img-dark {
    transition: opacity 0.4s ease;
}

html:not(.dark) .img-dark {
    display: none !important;
}

html:not(.dark) .img-light {
    display: block !important;
}

/* 2. Dark Mode: Triggered when <html class="dark"> exists */
html.dark .img-light {
    display: none !important;
}

html.dark .img-dark {
    display: block !important;
}

img.img-no-boder {
    border: none !important; 
    box-shadow: none !important; 
    margin: 0 !important; 
    display: block;
}

div.boxed-content {
   transition: opacity 0.4s ease;
   background: rgba(255, 255 , 255, .1);
   padding: 30px 30px 20px 30px;
   margin: 20px 0 30px 0;
   border-radius: 20px;
}

html:not(.dark) div.boxed-content {
   background: rgba(0, 0, 0, .1);
}

div.grid.auto-hide-mobile {
   gap: 4rem;
}

@media (max-width: 800px) {
    div.grid.auto-hide-mobile {
        grid-template-columns: 1fr !important;
        gap: 0rem !important;
    }
   div.grid.auto-hide-mobile[style*="1fr "] > :last-child {
      display: none !important;
   }
   div.grid.auto-hide-mobile[style*="px 1fr"] > :first-child {
      display: none !important;
   }
}