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 /* This fixes scrollbar jump */
73 @media screen and (min-width: 960px) {
74 html {
75 margin-left: calc(100vw - 100%);
76 margin-right: 0;
77 }
78 }
79}