@import url("https://cdn.jsdelivr.net/gh/asboy2035/fonts@master/css/DTGetaiGroteskDisplayBlack.css");

h1, h2, h3, h4, h5, h6 {
  font-family: "DT Getai Grotesk Display Black", monospace;
  font-weight: 900;
  font-style: normal;
}

button {
  transition: 0.2s ease;
}

/*Mobile nav*/
div.relative.float-right {
  padding: 1.5rem;
  border-radius: 1.5rem;
}
/*fix dark background*/
.dark [data-headlessui-state="open"] > div.inset-0 {
  background: rgb(var(--gray-800)/.25)
}

/*Card rounding*/
a.card {
  border-radius: 1.5rem;
}

/*Dropdowns*/
[data-radix-menu-content] {
  border-radius: 1rem;
}
/*Show descriptions even in mobile*/
[data-radix-menu-content] > a > div > p,
#navigation-items > button > div > p {
  display: flex !important;
}

/*Disable text selection where it shouldn't be*/
#navigation-items, #navbar {
  user-select: none;
  -webkit-user-select: none;
}

/*Watermark/Branding*/
footer#footer > .flex.items-center.justify-between {
  display: none;
}

/*Page switcher*/
#pagination {
  border-radius: 1.5rem;
}
#pagination > a > div {
  border-radius: 1.25rem;
}

/*Remove extra code block padding in cards*/
a.card > div > div > div > div.code-block {
  margin-bottom: 0.5rem;
}

/*Update max widths*/
#content-area {
  max-width: 70rem;
}

.almond-layout {
  padding: 0.5rem 0.5rem 0;
}


mark {
  --tint: rgb(var(--primary-light));
  position: relative;
  border: var(--tint) 0.2rem solid;
  box-shadow: inset 1px 1px 1rem var(--tint);
  background: transparent;
  color: var(--gray-400);
  padding: 0.15rem 0.3rem;
  border-radius: 0.65rem;
}

/*Mark Types*/
mark.okie { --tint: cyan }
mark.featured { --tint: #d7ae03 }

/*Different <mark> for searchbar*/
div[data-headlessui-state] > div > div > div > div > div > mark, /*Titles*/
div[data-headlessui-state] > div > div > div > div > div > div > div > div > mark, /*Paths*/
div[data-headlessui-state] > div > div > div > p > mark /*Content Previews*/ {
    padding: 0 0.25rem;
    border-radius: 0.25rem !important;
    border: none !important
}


button.borderedButton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.75rem;
  border: 0.1rem rgb(var(--gray-200)) solid;
  background: hsla(0,0%,100%,.05);
  padding: 0.3rem 0.7rem;
  width: fit-content;
}
.dark button.borderedButton {
  border-color: rgb(var(--gray-800));
}
button.borderedButton:hover {
  border-color: rgb(var(--gray-300));
}
.dark button.borderedButton:hover {
  border-color: rgb(var(--gray-700));
}
a:has(button.borderedButton) {
  border-bottom: none;
}


Web

Apps

Fonts

Example Implementation

Font Families

DT Getai Grotesk Display Black

LT Remark

Web