@font-face {
    font-family: Jakarta Sans Regular;
    src: url("PlusJakartaSans-Regular.ttf");
}

@font-face {
    font-family: Jakarta Sans Bold;
    src: url("PlusJakartaSans-SemiBold.ttf");
}

@font-face {
    font-family: Jakarta Sans Light;
    src: url("PlusJakartaSans-Light.ttf");
}

:root {
    --body-font: Jakarta Sans Regular, sans-serif;
    --body-font-bold: Jakarta Sans Bold, sans-serif;
    --body-font-light: Jakarta Sans Light, sans-serif;
    --color-purple: rgb(147, 114, 218);
    --color-blue: rgb(40, 174, 215);
    --color-green: rgb(47, 198, 163);
    --color-yellow: rgb(196, 193, 39);
    --color-orange: rgb(255, 123, 61);
    --color-pink: rgb(240, 81, 121);
    --color-brown: rgb(209, 167, 143);
    --custom-box-brown: rgba(209, 167, 143, 0.25);
    --custom-box-blue: rgba(40, 174, 215, 0.25);
    --custom-box-white: rgba(255, 255, 255, 0.75);
}

body {
    font-family: var(--body-font);
    font-size: 0.92rem;
    background-color: #e0c6ae;
    background-image: url(concrete-wall.png), url("mag-white-txtbleed2.png");
}

h1, .h1 {
    font-family: var(--body-font-bold);
    text-transform: lowercase;
    font-size: 4rem;
}

h2, .h2 {
    font-family: var(--body-font-bold);
    text-transform: lowercase;
    font-size: 2.25rem;
}

h3, .h3 {
    font-family: var(--body-font-bold);
    text-transform: lowercase;
    font-size: 1.5rem;
}

h4, .h4 {
    font-family: var(--body-font);
    text-transform: lowercase;
    font-size: 1.4rem;
}

.lead {
    font-family: var(--body-font-light);
}

.tiny-text {
    font-family: var(--body-font-light);
    font-size: 0.8rem;
}

.tiny-icon {
    font-size: 1rem;
}

.fw-bold {
    font-family: var(--body-font-bold);
}

.font-pink {
    color: var(--color-pink)
}

.font-orange {
    color: var(--color-orange)
}

.font-green {
    color: var(--color-green)
}

.font-purple {
    color: var(--color-purple)
}

.nav-link {
    font-size: 1.15rem;
}

a {
    color: rgb(32, 147, 182);
}

a:hover {
    color: var(--color-orange);
}

.btn-treefort {
    background-image: url(treefortbg.png);
    border: 1px solid black;
    color: white;
    font-family: var(--body-font-bold);
    text-shadow: 1px 0px 2px black;
}

.btn-treefort:hover {
    border: 1px solid rgb(216, 112, 147);
    color: rgb(46, 255, 227);
    font-family: var(--body-font-bold);
}

.btn-colorstcg {
    background-image: linear-gradient(270deg,
    hsl(259deg 82% 74%) 0%,
    hsl(236deg 84% 74%) 8%,
    hsl(219deg 82% 67%) 17%,
    hsl(209deg 75% 60%) 25%,
    hsl(194deg 100% 47%) 33%,
    hsl(184deg 100% 43%) 42%,
    hsl(166deg 75% 54%) 50%,
    hsl(111deg 53% 63%) 58%,
    hsl(59deg 64% 45%) 67%,
    hsl(34deg 93% 53%) 75%,
    hsl(19deg 100% 62%) 83%,
    hsl(1deg 100% 68%) 92%,
    hsl(345deg 84% 63%) 100%);
    border: 1px solid black;
    color: black;
    font-family: var(--body-font-bold);
}

.btn-colorstcg:hover {
    background-image: linear-gradient(270deg,
    hsl(259deg 82% 74%) 0%,
    hsl(236deg 84% 74%) 8%,
    hsl(219deg 82% 67%) 17%,
    hsl(209deg 75% 60%) 25%,
    hsl(194deg 100% 47%) 33%,
    hsl(184deg 100% 43%) 42%,
    hsl(166deg 75% 54%) 50%,
    hsl(111deg 53% 63%) 58%,
    hsl(59deg 64% 45%) 67%,
    hsl(34deg 93% 53%) 75%,
    hsl(19deg 100% 62%) 83%,
    hsl(1deg 100% 68%) 92%,
    hsl(345deg 84% 63%) 100%);
    border: 1px solid rgb(255, 0, 85);
    color: rgb(196, 1, 66);
    font-family: var(--body-font-bold);
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: var(--color-green);
  border: 1px solid black;
  color: white;
  text-shadow: 1px 1px 2px black;
}

#btn-back-to-top:hover {
  background-color: var(--color-pink);
}

hr {
    color: black;
    opacity: 1;
    border-top: 1px solid hsl(22, 42%, 69%);
}

.hr-purple {
    color: transparent;
    border-top: 3px solid var(--color-purple);
}

.hr-blue {
    color: transparent;
    border-top: 3px solid var(--color-blue);
}

.hr-green {
    color: transparent;
    border-top: 3px solid var(--color-green);
}

.hr-yellow {
    color: transparent;
    border-top: 3px solid var(--color-yellow);
}

.hr-orange {
    color: transparent;
    border-top: 3px solid var(--color-orange);
}

.hr-pink {
    color: transparent;
    border-top: 3px solid var(--color-pink);
}

.w-33 {
    width: 33%;
}

.card, .card-header, .list-group {
    background-color: transparent;
}

.list-group-item {
    background-color: transparent;
    border-bottom: 1px solid var(--color-brown);
}

.img-thumbnail {
    background-color: var(--custom-box-white);
    border: 1px solid var(--color-brown)
}

.custom-box {
    background-color: var(--custom-box-brown);
    border: 1px solid var(--color-brown)
}
tr {
    border-bottom: 1px solid black;
}

th {
    background-color: transparent !important;
    font-family: var(--body-font-bold);
}

td {
    background-color: transparent !important;
}

.alert-custom {
    background-color: var(--custom-box-blue);
    border: 1px solid var(--color-blue)
}