:root {
  --bs-body-color: #d9d7d7 !important;
  --bs-body-bg: black !important;
  --bs-link-color: #d9d7d7;
  --bs-link-hover-color: #ffffff;
  --bs-body-font-size: 1.1rem;
}

@media (max-width: 768px) {
  :root {
    --bs-body-font-size: 1rem;
  }
}

body {
  font-family: "Merriweather";
  /*font-size: small;*/
  margin-top: 70px;
  font-weight: 200;
}

body::after {
  content: "";
  background: url(../../assets/img/workshop.jpg?h=5d9e1e80945d6c3ed69e2c6bb9e598c0);
  background-size: auto 100vh;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -10000;
  filter: blur(3px);
  overflow: hidden;
}

h1, h2 {
  font-family: american typewriter;
}

#full-size-modal {
  align-items: center;
  cursor: zoom-out;
}

.modal-content {
  background-color: white;
  border: 0px;
}

.modal-backdrop.show {
  --bs-backdrop-opacity: 0.7;
}

.modal-dialog {
  --bs-modal-width: 100vw;
  margin: 10px;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: scale(0.9);
}

.modal.show .modal-dialog {
  transform: none;
}

.navbar {
  font-family: american typewriter;
  background: rgba(7, 7, 7, 0.63);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--bs-gray-dark) 1px solid;
  z-index: 999;
  font-weight: 400;
}

.how-to-article {
  /*max-width: 850px;*/
  --bs-gutter-x: 0px;
}

.how-to-cards {
  max-width: 800px;
  --bs-gutter-x: 0px;
}

.how-to-cards > .card, .how-to-article > .card {
  margin-right: 10px;
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: rgb(202, 207, 213);
  margin-bottom: 20px;
}

.smaller-images > .card-body > figure {
  width: 50%;
}

/* Portrait shots are too tall to sit above their text, so the image drops to
   half width and the text moves alongside it. Applied by card-rail.js once the
   intrinsic size is known.

   Bootstrap sets .card to flex-direction: column, so row has to be restated
   here or the halves stack instead of sitting side by side. */
.how-to-cards > .card.is-portrait {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.how-to-cards > .card.is-portrait > h4 {
  width: 100%;
}

/* `w-100` is a Bootstrap !important utility, so it has to be matched here to
   let the portrait image drop to half width. */
.how-to-cards > .card.is-portrait > img {
  width: 50% !important;
}

.how-to-cards > .card.is-portrait > .card-body {
  width: 50%;
  flex: 1 1 50%;
}

@media (max-width: 767.98px) {

  /* Too narrow for two columns — let portrait shots stack as normal. */
  .how-to-cards > .card.is-portrait > img,
  .how-to-cards > .card.is-portrait > .card-body {
    width: 100% !important;
    flex: 1 1 100%;
  }
}

#card-index ul li {
  margin-bottom: 4px;
}

#card-index a {
  text-decoration: none;
}

/* Prev/next rails tracking the card currently in view. Hidden by default and
   revealed by card-rail.js only while the card list is on screen.

   The wrapper spans the viewport and only carries the stacking context and
   pointer-events; each link positions itself. Both links need an explicit
   `position` — `top`/`bottom` are ignored on a static element, which would
   leave them collapsed inside a zero-height wrapper. */
.card-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  pointer-events: none;
}

.card-rail-link {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(7, 7, 7, 0.63);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bs-gray-dark);
  color: rgb(202, 207, 213);
  font-family: american typewriter;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  pointer-events: auto;
}

/* The services hero is pulled up by -72px against the body's 70px offset, so it
   fills the viewport on wide screens. That works there because its content is
   vertically centred, but below the lg breakpoint the two halves stack and the
   content is top-aligned — which puts the opening line behind the fixed navbar.
   Drop the pull-back there so the hero starts below the navbar instead.

   !important is needed only to beat the inline margin-top. */
@media (max-width: 991.98px) {
  .hero-services {
    margin-top: 0 !important;
  }
}

/* Same green as the rest of the page's links, so the boxes read as links. */
.card-rail-title {
  color: rgb(32, 201, 151);
}

/* Hover feedback without changing colour. The cursor is often still parked on
   the box after clicking it, so switching to white left the title reading as
   white for as long as the pointer stayed there. */
.card-rail-link:hover,
.card-rail-link:hover .card-rail-title {
  color: rgb(32, 201, 151);
}

.card-rail-link:hover .card-rail-title {
  text-decoration: underline;
}

.card-rail-link[hidden] {
  display: none;
}

/* The navbar isn't pinned — it flips between fixed and absolute as you scroll
   (see ee.js). card-rail.js writes `top` from the navbar's live lower edge and
   clamps it at 0, so this value is only the starting position before the first
   scroll frame. The transition lets the box ease up with the navbar instead of
   snapping. */
.card-rail-prev {
  top: 60px;
  border-top: 0;
  transition: top 300ms ease-out;
}

.card-rail-next {
  bottom: 0;
  border-bottom: 0;
  justify-content: flex-start;
}

.card-rail-arrow {
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 1;
}

.card-rail-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoomable-image {
  cursor: zoom-in;
}

.how-to-image-small {
  width: 60%;
  display: flex;
  /*float: right!important;*/
}

#index-carousel > .carousel-inner > .carousel-item > img {
  filter: brightness(20%);
}

.pop-link {
  transform: scale(1.00001);
  transition: transform 100ms linear;
  cursor: pointer;
}

.pop-link:hover {
  transform: scale(1.025);
  transition: transform 600ms cubic-bezier(0.08, 0.74, 0.66, 1.05);
  animation: color-pop 600ms ease-in-out;
}

.coming-soon > div {
  filter: brightness(40%) contrast(100%) saturate(100%);
}

.coming-soon:hover {
  animation: color-pop 600ms ease-in-out;
}

@keyframes color-pop {
  20% {
    filter: brightness(200%) contrast(157%) saturate(175%);
  }
}

/* @keyframes color-mute {
  20% {
    filter: brightness(80%);
  }
} */

#projects-list > div:hover > div {
  /*animation: color-pop 600ms ease-in-out;*/
  /*animation: color-mute 600ms ease-in-out;*/
  /*color: var(--bs-body-color);*/
}

.call-to-action-text {
  position: absolute;
  bottom: 0px;
  right: 0px;
  margin-bottom: 0px;
}

a, a:hover, .call-to-action-text, .btn {
  font-weight: 500;
  font-family: "american typewriter";
  color: var(--bs-teal);
  /*font-size: 105%;*/
}

.hide-link {
  text-decoration: none;
  color: var(--bs-body-color);
}

/* #projects-list > div:hover > a > #call-to-action-text {
  animation: color-pop 600ms ease-in-out infinite;
} */

#projects-list > div {
  border-bottom: var(--bs-gray-800) 1px solid;
  padding-bottom: 16px;
}

#projects-list > div > div {
  height: 100%;
}

/* #projects-list > div:hover > #call-to-action-text {
  animation: color 600ms ease-in-out infinite;
} */

.card > h4 {
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 7px;
  font-size: 22px;
}

.how-to-shop-item {
  width: 75%;
  /*float: right;*/
  margin: 2%;
  /*border-radius: 10px;*/
}

figure {
  width: 75%;
  margin: 2%;
}

@media (max-width: 768px) {
  figure {
    width: 100% !important;
    margin: 0px 0px 20px 0px !important;
  }
}

.lazy {
  opacity: 0.1;
  max-width: 100px;
  margin: 20px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
  padding: 6px;
  padding-bottom: 30px;
  border-radius: 12px;
}

.loadingtext {
  opacity: 0.2;
  margin: auto;
  margin-top: -45px;
  font-size: 11px;
}

.fw-bold {
  font-weight: 400!important;
}

/* h4 > a:not(:hover) {
  text-decoration: none;
} */

h1 {
  color: white;
}

h2 {
  /*color: white;*/
  /*margin: 10px;*/
  margin-top: 10px;
}

img, .carousel-inner {
  border-radius: 10px;
}

.ee-navbar-fixed {
  position:fixed; 
  width:100%;
  top:0; left:0;
}

.ee-navbar {
  position:absolute;
  width:100%
}