/* This file is compiled to /assets/styles/tailwind.css via script/tailwind */

@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;1,200;1,300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,600;1,100;1,300;1,600&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-size: 110%;
    text-rendering: geometricPrecision;
  }

  @media screen and (min-width: 1024px) {
    html {
      font-size: 125%;
    }
  }

  h1 {
    @apply text-4xl;
    @apply tracking-tighter;
  }
  h2 {
    @apply text-3xl;
    @apply tracking-tighter;
  }
  h3 {
    @apply text-2xl;
    @apply tracking-tighter;
  }
  h4 {
    @apply text-xl;
  }

  .underline,
  .hover\:underline:hover {
    text-underline-offset: 6px;
  }

  @media screen and (min-width: 1024px) {
    .text-columns-2 {
        column-count: 2;
        column-gap: 3rem;
    }
    
}
  .site-nav a:not(.active) .nav-active-arrow {
    display: none;
  }

  .site-nav a.active .nav-active-arrow {
    display: flex;
  }

  .text-columns-2 {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .text-columns-2 p {
    break-inside: avoid;
  }

  .alternate-bg:nth-of-type(even) {
    background-color: rgba(255,255,255,0.06);
  }

  :not(.type-prose) code {
    background-color: rgba(255,255,255,0.15);
    padding: 0px 4px;
    border-radius: 2px;
    color: #eee;
  }
  
  /* This fixes scrollbar jump */
  @media screen and (min-width: 960px) {
    html {
      margin-left: calc(100vw - 100%);
      margin-right: 0;
    }
  }
}