@import "tailwindcss";

@font-face {
  font-family: "Self Modern";
  src: url("/fonts/self-modern/SelfModernRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Self Modern";
  src: url("/fonts/self-modern/SelfModernSemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Self Modern";
  src: url("/fonts/self-modern/SelfModernBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Self Modern";
  src: url("/fonts/self-modern/SelfModernItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Replica";
  src: url("/fonts/replica/ReplicaRegular.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Replica";
  src: url("/fonts/replica/ReplicaItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Replica";
  src: url("/fonts/replica/ReplicaBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Replica";
  src: url("/fonts/replica/ReplicaBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Replica";
  src: url("/fonts/replica/ReplicaLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Replica";
  src: url("/fonts/replica/ReplicaLightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

* {
  font-family: "Replica", sans-serif;
}

code *,
pre * {
  @apply font-mono;
}

html {
  @apply scroll-smooth;
}

.vocs_Sidebar_section:first-child {
  @apply sticky top-[61px] bg-[var(--vocs-color_backgroundDark)];
}

.vocs_Sidebar_section:first-child .vocs_Sidebar_items:first-child {
  @apply flex flex-row gap-0 border-b border-[#d8d3be] pb-0 sticky top-0 left-0 right-0;
}

.dark .vocs_Sidebar_section:first-child .vocs_Sidebar_items:first-child {
  @apply border-b border-[#4b4b4b];
}

.vocs_Sidebar_section:first-child .vocs_Sidebar_items:first-child .vocs_Sidebar_item {
  @apply text-center font-bold pb-1;
}

.vocs_Sidebar_navigation > .vocs_Sidebar_group > .vocs_Sidebar_section + .vocs_Sidebar_section {
  @apply border-t border-gray-500/25;
}


.vocs_Content img {
  @apply rounded-md;
}

.vocs_H1 {
  font-family: "Self Modern", serif;
}

.vocs_SearchDialog_overlay {
  @apply backdrop-blur-[2px]
}

.vocs_Logo {
  @apply object-contain max-w-40;
}

.dark .vocs_Logo {
  @apply invert;
}

.vocs_NavigationMenu_list {
  @apply flex gap-3;
}

.vocs_DesktopTopNav_item {
  @apply text-[16px] font-bold rounded-lg px-4 py-1 border border-neutral-200;
}