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  :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}