1/* This file is compiled to /assets/styles/tailwind.css via script/tailwind */
  2
  3@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;1,200;1,300&display=swap");
  4@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");
  5
  6@tailwind base;
  7@tailwind components;
  8@tailwind utilities;
  9
 10@layer base {
 11  html {
 12    font-size: 110%;
 13    text-rendering: geometricPrecision;
 14  }
 15
 16  @media screen and (min-width: 1024px) {
 17    html {
 18      font-size: 125%;
 19    }
 20  }
 21
 22  h1 {
 23    @apply text-4xl;
 24    @apply tracking-tighter;
 25  }
 26  h2 {
 27    @apply text-3xl;
 28    @apply tracking-tighter;
 29  }
 30  h3 {
 31    @apply text-2xl;
 32    @apply tracking-tighter;
 33  }
 34  h4 {
 35    @apply text-xl;
 36  }
 37
 38  .underline,
 39  .hover\:underline:hover {
 40    text-underline-offset: 6px;
 41  }
 42
 43  @media screen and (min-width: 1024px) {
 44    .text-columns-2 {
 45        column-count: 2;
 46        column-gap: 3rem;
 47    }
 48    
 49}
 50  .site-nav a:not(.active) .nav-active-arrow {
 51    display: none;
 52  }
 53
 54  .site-nav a.active .nav-active-arrow {
 55    display: flex;
 56  }
 57
 58  .text-columns-2 {
 59    -webkit-column-break-inside: avoid;
 60    page-break-inside: avoid;
 61    break-inside: avoid;
 62  }
 63
 64  .text-columns-2 p {
 65    break-inside: avoid;
 66  }
 67
 68  .alternate-bg:nth-of-type(even) {
 69    background-color: rgba(255,255,255,0.06);
 70  }
 71
 72  /* div:not(.type-prose) code {
 73    background-color: rgba(255,255,255,0.15);
 74    padding: 0px 4px;
 75    border-radius: 2px;
 76    color: #eee;
 77  } */
 78  
 79  /* This fixes scrollbar jump */
 80  @media screen and (min-width: 960px) {
 81    html {
 82      margin-left: calc(100vw - 100%);
 83      margin-right: 0;
 84    }
 85  }
 86
 87  :root {
 88    --color: white;
 89    --disabled: #959495;
 90  }
 91  
 92  .checkbox {
 93    color: var(--color);
 94  }
 95
 96  .checkbox--disabled {
 97    color: var(--disabled);
 98  }
 99  
100  .checkbox__control {
101    width: 1.5rem;
102    height: 1.5rem;
103  }
104
105  .checkbox__control svg {
106    transform: scale(0);
107    transform-origin: center center;
108  }
109  
110  .checkbox__brackets {
111    left: -1px;
112    top: -1px;
113  }
114  
115  .checkbox__input input {
116    opacity: 0;
117    width: 1.5rem;
118    height: 1.5rem;
119  }
120
121  .checkbox__input input:focus + .checkbox__control {
122    box-shadow: 0 0 0 2px #000, 0 0 0 4px #3b57bc99
123  }
124
125  .checkbox__input input:checked + .checkbox__control svg {
126    transform: scale(1);
127  }
128
129  .checkbox__input input:disabled + .checkbox__control {
130    color: var(--disabled);
131  }
132}