/* 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;
  }

  .site-mobile-nav a.active {
    font-weight: bold;
  }

  .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);
  }

  /* div: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;
    }
  }

  :root {
    --color: white;
    --disabled: #959495;
  }
  
  .checkbox {
    color: var(--color);
  }

  .checkbox--disabled {
    color: var(--disabled);
  }
  
  .checkbox__control {
    width: 30px;
    height: 30px;
  }

  .checkbox__control svg {
    transform: scale(0);
    transform-origin: center center;
  }
  
  .checkbox__brackets {
    left: -1px;
    top: -1px;
  }
  
  .checkbox__input input {
    opacity: 0;
    width: 30px;
    height: 30px;
  }

  .checkbox__input input:focus + .checkbox__control {
    box-shadow: 0 0 0 2px #000, 0 0 0 4px #3b57bc99
  }

  .checkbox__input input:checked + .checkbox__control svg {
    transform: scale(1);
  }

  .checkbox__input input:disabled + .checkbox__control {
    color: var(--disabled);
  }
}