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: 100%;
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: 4px;
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
51  .text-columns-2 {
52    -webkit-column-break-inside: avoid;
53    page-break-inside: avoid;
54    break-inside: avoid;
55  }
56
57  .text-columns-2 p {
58    break-inside: avoid;
59  }
60
61  .alternate-bg:nth-of-type(even) {
62    background-color: rgba(255,255,255,0.06);
63  }
64  
65  /* This fixes scrollbar jump */
66  @media screen and (min-width: 960px) {
67    html {
68      margin-left: calc(100vw - 100%);
69      margin-right: 0;
70    }
71  }
72}