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  .site-mobile-nav a.active {
 59    font-weight: bold;
 60  }
 61
 62  .text-columns-2 {
 63    -webkit-column-break-inside: avoid;
 64    page-break-inside: avoid;
 65    break-inside: avoid;
 66  }
 67
 68  .text-columns-2 p {
 69    break-inside: avoid;
 70  }
 71
 72  .alternate-bg:nth-of-type(even) {
 73    background-color: rgba(255,255,255,0.06);
 74  }
 75
 76  /* div:not(.type-prose) code {
 77    background-color: rgba(255,255,255,0.15);
 78    padding: 0px 4px;
 79    border-radius: 2px;
 80    color: #eee;
 81  } */
 82  
 83  /* This fixes scrollbar jump */
 84  @media screen and (min-width: 960px) {
 85    html {
 86      margin-left: calc(100vw - 100%);
 87      margin-right: 0;
 88    }
 89  }
 90
 91  :root {
 92    --color: white;
 93    --disabled: #959495;
 94  }
 95  
 96  .checkbox {
 97    color: var(--color);
 98  }
 99
100  .checkbox--disabled {
101    color: var(--disabled);
102  }
103  
104  .checkbox__control {
105    width: 30px;
106    height: 30px;
107  }
108
109  .checkbox__control svg {
110    transform: scale(0);
111    transform-origin: center center;
112  }
113  
114  .checkbox__brackets {
115    left: -1px;
116    top: -1px;
117  }
118  
119  .checkbox__input input {
120    opacity: 0;
121    width: 30px;
122    height: 30px;
123  }
124
125  .checkbox__input input:focus + .checkbox__control {
126    box-shadow: 0 0 0 2px #000, 0 0 0 4px #3b57bc99
127  }
128
129  .checkbox__input input:checked + .checkbox__control svg {
130    transform: scale(1);
131  }
132
133  .checkbox__input input:disabled + .checkbox__control {
134    color: var(--disabled);
135  }
136}