:root {
  /* default colors */
  --dmj--bg: #846C24;
  --dmj--txt: #202020;
}

body {
    background-color: var(--dmj--bg);
    color: var(--dmj--txt);
    font-family: "Rag";
}

::selection {
    color: var(--dmj--bg);
    background-color: var(--dmj--txt);
}

@font-face {
  font-family: "Rag";
  src:
      local("Rag"),
      url("fonts/Rag-Regular.otf") format("opentype") tech(color-COLRv1),
      url("fonts/Rag-Regular.otf") format("opentype"),
}

@font-face {
  font-family: "RagBold";
  src:
      local("RagBold"),
      url("fonts/Rag-Bold.otf") format("opentype") tech(color-COLRv1),
      url("fonts/Rag-Bold.otf") format("opentype"),
}

.b {
    font-family: "RagBold";
}

.hero-img {
    position: absolute;
    top: -18%;
}

a {
    color: var(--dmj--txt);
}

.btn-black {
    border: 2px solid;
}

.btn-black:hover {
    border: 2px solid;
    background-color: var(--dmj--txt);
    color: var(--dmj--bg);
}

.img-grid {
    gap: 2rem;
}

.card {
    flex: 0 0 auto;
    flex-shrink: 0;
  }