:root {
  --font-size-base: 13.5px;
  --mono-text-font: "Jetbrains Mono";
  --text-font: "Jetbrains Mono";
  --header-font: "Space Grotesk", "Helvetica", sans-serif;
  --code-font: "Jetbrains Mono";
  
  --line-height: 1.5;
  --page-width: 920px;
}

html {
  font-family: var(--text-font) !important;
  line-height: var(--line-height) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--header-font) !important;
}

code, pre, .code {
  font-family: var(--code-font) !important;
}

a {
  border-bottom: 3px solid var(--primary-color);

  &:hover {
    background-color: var(--secondary-color);
    color: var(--hover-color);
  }
    
  &:has(img) {
    border-bottom: none;
  }
}

.socials img, .social img {
  border-radius: 0 !important;
}

.page-header {
  text-transform: lowercase;
}

.page-header::after {
  content: ".";
  color: var(--primary-color);
  font-size: 1.6em;
}

.right-nav a {
  margin-right: 0.2em !important;
}

.socials a:hover {
  background-color: var(--primary-color) !important;
  color: var(--hover-color) !important;
}

.social-tooltip {
  background-color: var(--bg-2);
  color: var(--text-0);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--text-font);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

:root.dark {
  --primary-color: #73ff48;
  --secondary-color: #5ac539;
}

:root.light {
  --primary-color: #fb607f;
  --secondary-color: #fb607f;
}

::selection {
  background: var(--secondary-color);
}