




body,header,footer,span,div,h1,h2,h3,
code, pre, textarea, input, u, b, strong
{
	font-family:"PT Mono"  !important ;
}



.hide_pukka {
  opacity: 0;
  visibility: hidden;
}


@layer utilities {
  html .bg-gray-800 {
    background-color: rgb(82, 30, 4);
  }
}

html .nav-link { 
  font-size: 19px;
  margin-left: 2px;
  margin-right: 13px;
}

html body{background-color: #360d01;}

html .category-header:hover, html .category-header:hover .category-chevron {
  color: #ff8316;
}


html .solid-spinner { 
  border: 5px solid #513d37;
    border-bottom-color: rgb(55, 65, 81);
  border-bottom-color: #ff7827; 
}



html .tool-card {
  text-align: center;
  background-color: #50170e;
  border: 1px solid #6f5b2b;
  border-radius: .5rem;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  transition: transform .2s ease-in-out,box-shadow .2s ease-in-out;
  display: flex;
}

html .tool-card:hover {
  border-color: #ff3c00;
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px #0003,0 4px 6px -2px #0000001a;
}


@layer utilities {
  html .max-w-lg {
  
    max-width: 100%;
  }
  
}

@layer utilities {
 html  .bg-gray-800 {
    background-color: rgb(75, 26, 11);
  }
}


@layer utilities {
  .bg-gray-900 {
    background-color: rgb(50, 9, 2);
  }
}


@layer utilities {
 #uploader .bg-gray-900 {
    background-color: rgb(107, 40, 0);
  }
}

@layer utilities {
  html  .bg-gray-900 {
    background-color: rgb(49, 11, 2);
  }
}



html .section-divider {
  opacity: .5;
  background: linear-gradient(90deg,#0000,#d56818,#0000);
  max-width: 42rem;
  height: 5px;
  margin: 2rem auto;
}

html .marker-slanted::before {
  content: "";
  z-index: -1;
  background: linear-gradient(120deg,#e56100,#661d00);
  height: 6px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@layer utilities {
  html .bg-gray-700 {
    background-color: rgb(92, 34, 11);
  }
}
@layer utilities {
  html .border-gray-600 {
    border-color: rgb(187, 73, 17);
  }
}

@layer utilities {
  html .text-indigo-400 {
    color: rgb(255, 162, 95);
  }
}

@layer utilities {
  @media (hover: hover) {
    .hover\:text-indigo-300:hover {
      color: rgb(255, 228, 163);
    }
  }
}

@layer utilities {
 html  .border-gray-700 {
    border-color: rgb(120, 94, 53);
  }
}


@layer utilities {
html   .bg-indigo-600 {
    background-color: rgb(165, 71, 25);
  }
}

@layer utilities {
  @media (hover: hover) {
    .hover\:bg-indigo-700:hover {
      background-color: rgb(172, 135, 47);
	  background-color: rgb(219, 123, 0);
    }
  }
}


@layer utilities {
 html  .to-indigo-600 {
    --tw-gradient-to: var(--color-indigo-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
    filter: hue-rotate(153deg)brightness(1.55);
  }
}

@layer utilities {
  @media (hover: hover) {
    html  .hover\:text-indigo-400:hover {
      color: rgb(255, 147, 52);
    }
  }
}


@layer utilities {
 html .bg-indigo-500 {
    background-color: rgb(143, 67, 0);
  }
}


@layer utilities {
  @media (hover: hover) {
   html  .hover\:bg-indigo-400:hover {
      background-color: rgb(210, 148, 0);
    }
  }
}

@layer utilities {
 html  .bg-black {
   background-color: rgb(49, 11, 2);
  }
}


html .legal-content h3 {
  color: #ffce3a; 
}
html .legal-content a {
  color: #ffaa50;  
}html .legal-content a:hover {
  color: #ffde2a;
}

html .btn-gradient {
  color: #fff;
  background-image: linear-gradient(#cd5c0a,#b8360f);
  border-radius: .5rem;
  padding: .75rem 2rem;
  font-weight: 600;
  transition-property: all;
  transition-duration: .2s;
  display: inline-block;
  transform: translateY(0);
}


html .btn-gradient:hover {
  box-shadow: 0 10px 15px -3px #e5b6464d,0 4px 6px -4px #e5bd464d;
}


@layer utilities {
  @media (hover: hover) {
    .hover\:border-indigo-500:hover {
      border-color: rgb(215, 153, 7);
    }
  }
}

@layer utilities {
  @media (min-width: 64rem) {
    .lg\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading,var(--text-4xl--line-height));
      filter: hue-rotate(153deg);
    }
  }
}


svg,img{max-width:300px;}