:root {
  --black-with-low-alpha: rgba(0, 0, 0, 0.2);
  --font-base: 1rem;
  --gap-base: 0.25rem;
  --space-base: 0.25rem;
  /* 1 unit = 4px */
}

/* Font size start */

.text-xxs {
  font-size: calc(var(--font-base) * 0.50);
}

.text-xs {
  font-size: calc(var(--font-base) * 0.75);
}

.text-sm {
  font-size: calc(var(--font-base) * 0.875);
}

.text-base {
  font-size: var(--font-base);
}

.text-lg {
  font-size: calc(var(--font-base) * 1.125);
}

.text-xl {
  font-size: calc(var(--font-base) * 1.25);
}

.text-2xl {
  font-size: calc(var(--font-base) * 1.5);
}

.text-3xl {
  font-size: calc(var(--font-base) * 1.875);
}

.text-4xl {
  font-size: calc(var(--font-base) * 2.25);
}

/* Font size end */


/* Gap start */

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: calc(var(--gap-base) * 1) !important;
}

.gap-2 {
  gap: calc(var(--gap-base) * 2) !important;
}

.gap-3 {
  gap: calc(var(--gap-base) * 3) !important;
}

.gap-4 {
  gap: calc(var(--gap-base) * 4) !important;
}

.gap-5 {
  gap: calc(var(--gap-base) * 5) !important;
}

.gap-6 {
  gap: calc(var(--gap-base) * 6) !important;
}

.gap-8 {
  gap: calc(var(--gap-base) * 8) !important;
}

.gap-10 {
  gap: calc(var(--gap-base) * 10) !important;
}

/* Gap end */

/* All sides */
.p-0 {
  padding: 0;
}

.p-1 {
  padding: calc(var(--space-base) * 1);
}

.p-2 {
  padding: calc(var(--space-base) * 2);
}

.p-3 {
  padding: calc(var(--space-base) * 3);
}

.p-4 {
  padding: calc(var(--space-base) * 4);
}

.p-5 {
  padding: calc(var(--space-base) * 5);
}

.p-6 {
  padding: calc(var(--space-base) * 6);
}

.p-7 {
  padding: calc(var(--space-base) * 7);
}

.p-8 {
  padding: calc(var(--space-base) * 8);
}

.p-9 {
  padding: calc(var(--space-base) * 9);
}

.p-10 {
  padding: calc(var(--space-base) * 10);
}

/* Top */
.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: calc(var(--space-base) * 1);
}

.pt-2 {
  padding-top: calc(var(--space-base) * 2);
}

.pt-3 {
  padding-top: calc(var(--space-base) * 3);
}

.pt-4 {
  padding-top: calc(var(--space-base) * 4);
}

.pt-5 {
  padding-top: calc(var(--space-base) * 5);
}

.pt-6 {
  padding-top: calc(var(--space-base) * 6);
}

.pt-7 {
  padding-top: calc(var(--space-base) * 7);
}

.pt-8 {
  padding-top: calc(var(--space-base) * 8);
}

.pt-9 {
  padding-top: calc(var(--space-base) * 9);
}

.pt-10 {
  padding-top: calc(var(--space-base) * 10);
}

/* Right */
.pr-0 {
  padding-right: 0;
}

.pr-1 {
  padding-right: calc(var(--space-base) * 1);
}

.pr-2 {
  padding-right: calc(var(--space-base) * 2);
}

.pr-3 {
  padding-right: calc(var(--space-base) * 3);
}

.pr-4 {
  padding-right: calc(var(--space-base) * 4);
}

.pr-5 {
  padding-right: calc(var(--space-base) * 5);
}

.pr-6 {
  padding-right: calc(var(--space-base) * 6);
}

.pr-7 {
  padding-right: calc(var(--space-base) * 7);
}

.pr-8 {
  padding-right: calc(var(--space-base) * 8);
}

.pr-9 {
  padding-right: calc(var(--space-base) * 9);
}

.pr-10 {
  padding-right: calc(var(--space-base) * 10);
}

/* Bottom */
.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: calc(var(--space-base) * 1);
}

.pb-2 {
  padding-bottom: calc(var(--space-base) * 2);
}

.pb-3 {
  padding-bottom: calc(var(--space-base) * 3);
}

.pb-4 {
  padding-bottom: calc(var(--space-base) * 4);
}

.pb-5 {
  padding-bottom: calc(var(--space-base) * 5);
}

.pb-6 {
  padding-bottom: calc(var(--space-base) * 6);
}

.pb-7 {
  padding-bottom: calc(var(--space-base) * 7);
}

.pb-8 {
  padding-bottom: calc(var(--space-base) * 8);
}

.pb-9 {
  padding-bottom: calc(var(--space-base) * 9);
}

.pb-10 {
  padding-bottom: calc(var(--space-base) * 10);
}

/* Left */
.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: calc(var(--space-base) * 1);
}

.pl-2 {
  padding-left: calc(var(--space-base) * 2);
}

.pl-3 {
  padding-left: calc(var(--space-base) * 3);
}

.pl-4 {
  padding-left: calc(var(--space-base) * 4);
}

.pl-5 {
  padding-left: calc(var(--space-base) * 5);
}

.pl-6 {
  padding-left: calc(var(--space-base) * 6);
}

.pl-7 {
  padding-left: calc(var(--space-base) * 7);
}

.pl-8 {
  padding-left: calc(var(--space-base) * 8);
}

.pl-9 {
  padding-left: calc(var(--space-base) * 9);
}

.pl-10 {
  padding-left: calc(var(--space-base) * 10);
}

/* Horizontal (left + right) */
.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-1 {
  padding-left: calc(var(--space-base) * 1);
  padding-right: calc(var(--space-base) * 1);
}

/* ... repeat to px-10 */
.px-10 {
  padding-left: calc(var(--space-base) * 10);
  padding-right: calc(var(--space-base) * 10);
}

/* Vertical (top + bottom) */
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: calc(var(--space-base) * 1);
  padding-bottom: calc(var(--space-base) * 1);
}

/* ... repeat to py-10 */
.py-10 {
  padding-top: calc(var(--space-base) * 10);
  padding-bottom: calc(var(--space-base) * 10);
}


.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.relative {
  position: relative;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end !important;
}

.justify-content-start {
  justify-content: start !important;
}

.flex-wrap {
  flex-wrap: wrap;
}

.h-100vh {
  height: 100vh;
}

.bg-black-blur {
  background: var(--black-with-low-alpha);
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 2;
}

:root.light-theme .bg-black-blur {
  background: white;
}

.z-index-2 {
  position: relative;
  z-index: 2;
}

.white-space-nowrap {
  white-space: nowrap;
}


.text-center {
  text-align: center;
}

.text-primary {
  color: snow;
  color: var(--body-text-color)
}

.text-secondary {
  color: grey;

}


.fill-primary,
.fill-primary>* {
  fill: var(--body-text-color);
}

.fill-secondary,
.fill-secondary>* {
  fill: grey;
}

.stroke-primary,
.stroke-primary>* {
  /* stroke: snow; */
  color: var(--body-text-color)
}

.stroke-secondary,
.stroke-secondary>* {
  stroke: grey;
}

.section-h2 {
  font-size: 1.8rem;
  font-weight: 600;
  font-family: "Delius", serif;
  padding-top: 5rem;
}


.grid-col1-md-col2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}


@media (min-width:900px) {
  .grid-col1-md-col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}




.min-width-400px-width-50per {
  width: 100%;
  min-width: 400px;
}

@media (max-width: 400px) {
  .min-width-400px-width-50per {
    min-width: 200px;
  }
}

.width-100vw-lg-width-50vw {
  width: 100vw;
}


@media (min-width:900px) {
  .width-100vw-lg-width-50vw {
    width: 50vw;
  }

}


.font-gabriela {
  font-family: "Gabriela", serif;

}

/* Skip to content link for accessibility */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  font-size: 1rem;
  border-radius: 0 0 4px 0;
  transition: top 0.3s ease;
}

.skip-to-content:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -2px;
}


.sticky {
  position: sticky;
}

.blur {
  filter: none !important;
  backdrop-filter: blur(10px);
}

.top-0 {
  top: 0;
}

.z-index-10 {
  z-index: 10;
}

.background-inherit {
  background-color: inherit;
}

/* image skeleton */

.show-img-skeleton {
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Skeleton background */
.img-box-skeleton {
  background: linear-gradient(90deg,
      #e5e7eb 25%,
      #f3f4f6 37%,
      #e5e7eb 63%);
  background-size: 400% 100%;
  border-radius: 0.2;
  animation: shimmer 1.4s ease infinite;
}

/* When image loads */
.img-loaded {
  opacity: 1;
}

 h3 {
    font-size: 1.5rem;
    padding: 0.5rem 0;
    margin: 0;
    font-weight: 600;
    font-family: "Delius", serif;

}


.card{ 
    background: var(--project-bg-color);
    border: 1px solid var(--project-border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;

}