html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

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

body {
  max-width: 650px;
  margin: auto;
  padding: 2rem;

  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica", "Arial", "Segoe UI", "Inter", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  text-rendering: optimizeLegibility;

  background: #1e1e1e;
  color: #dadada;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

#home {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.obsidian-styles {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    &::after {
      content: "";
      display: block;
      height: 1px;
      background-color: #444;
      margin: 1rem 0;
      width: 100%;
      opacity: 0.6;
    }
  }

  a {
    color: hsl(calc(258 - 3), calc(88% * 1.02), calc(66% * 1.15));
    text-decoration: underline;
    position: relative;
    transition: color 0.2s ease;

    &::after {
      content: "↗";
      font-size: 0.75em;
      margin-left: 0.25em;
      opacity: 0.7;
    }

    &:hover {
      color: hsl(258, 88%, 80%);
    }
  }

  ul {
    list-style: disc;
    padding-top: 1rem;
    padding-left: 1.5rem;

    li {
      line-height: 1.6;

      &::marker {
        color: #777;
      }
    }
  }
}