@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Variable (preferred) */
@font-face {
  font-family: "InterVariable";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVariable";
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  font-family: Inter, sans-serif;
  font-feature-settings:
    "liga" 1,
    "calt" 1; /* fix for Chrome */
  --header-height: 60px;
  --header-bg: rgba(255, 255, 255, 1);
  --header-border: rgba(0, 0, 0, 0.08);
  --text: #111;
  --muted: #666;
  --ptr-size: 25px;
}
@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}

html,
body,
#root {
  --header-bg: rgb(0, 0, 0);
  --body-more-bg: rgb(29, 29, 29);
  --header-border: rgba(255, 255, 255, 0.12);
  --text: #eaeaea;
  --muted: #b0b0b0;
  color-scheme: light dark;
}

body {
  background: var(--header-bg);
  color: var(--text);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.landing {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}

a {
  color: var(--text);
  text-decoration: none;
}

h1 {
  font-weight: 500;
  line-height: 1;
  text-wrap: wrap;
}

section {
  position: relative;
  width: 100vw;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* index */

.hero .title {
  font-size: 10vw;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  opacity: 0.6;
}

.header-1 {
  position: relative;
}

.header-2 {
  position: relative;
}

.header-1,
.header-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
}

.header-1 h1,
.header-2 h1 {
  width: max-content;
  font-size: 5vw;
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.header-1 h1 .char,
.header-2 h1 .char {
  display: inline-block;
  overflow: hidden;
}

.header-1 h1 .char > span,
.header-2 h1 .char > span {
  position: relative;
  display: block;
  will-change: transform;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* tooltips */

.tooltip {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
}

.tooltip span {
  position: relative;
  color: var(--text);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid var(--text);
  opacity: 0;
  background: var(--header-bg);
  z-index: 0;
}

.tooltip span::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 5px;
  background: conic-gradient(
    from var(--angle),
    transparent 0%,
    rgba(255, 255, 255, 0.8) 25%,
    transparent 50%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: rotateBorder 2s linear infinite;
}

.tooltip span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--header-bg);
  z-index: -1;
}

.tooltip span:hover {
  border-color: transparent;
}

.tooltip span:hover::before {
  opacity: 1;
}

/* blog */

/* Allow scrolling for blog page */
section.blog-hero,
.blog-hero {
  height: auto !important;
  min-height: 60vh;
}

.blog-hero {
  position: relative;
  /* width: 100%; */
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  padding: 2rem 2rem 0 2rem;
}

.blog-hero .blog-title {
  font-size: 10vw;
}

.blog-hero .blog-subtitle {
  font-size: 5vw;
  color: var(--muted);
}

.blog-hero .blog-posts .post {
  border: 2px solid var(--header-border);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1.5rem;
  font-size: 3vw;
  color: var(--text);
}

.post p {
  font-size: 2vw;
  color: var(--muted);
}

/* animations */

@keyframes rotateBorder {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}