1  html,
 2  body {
 3    font-family: var(--typeface-regular);
 4    font-size: 16px;
 5    line-height: 24px;
 6    display: flex;
 7    height: 100%;
 8    color: var(--color-foreground);
 9    background-color: var(--color-background);
10    -webkit-font-smoothing: antialiased;
11    -moz-osx-font-smoothing: grayscale;
12    scrollbar-width: none;
13    font-feature-settings:
14      'ss01',
15      'ss02',
16      'cv01',
17      'calt' 0;
18  }
19  
20  ::-webkit-scrollbar {
21    display: none;
22  }
23  
24  :root {
25    --sidebar-width: 16rem;
26    --topbar-height: 4rem;
27    --bigheader-height: 16.5rem;
28    --content-min-width: 30rem;
29    --content-padding: 2rem;
30    --content-max-width: 90rem;
31  }
32  
33  .lock-screen > * {
34    pointer-events: none;
35  }
36  
37  .lock-screen {
38    cursor: wait;
39  }
40  
41  .button-transition {
42    transition: transform 0.2s ease-in-out;
43  }
44  
45  .button-transition:active {
46    transform: scale(0.95);
47    transition-duration: 0.1s;
48  }
49  
50  .button-transition-big:active {
51    transform: scale(0.9);
52    transition-duration: 0.1s;
53  }
54  
55  @keyframes default-transition-fade-in {
56    from {
57      opacity: 0;
58    }
59  }
60  
61  @keyframes default-transition-fade-out {
62    to {
63      opacity: 0;
64    }
65  }
66  
67  @keyframes default-transition-slide-from-bottom {
68    from {
69      transform: translateY(30px);
70    }
71  }
72  
73  @keyframes default-transition-slide-to-top {
74    to {
75      transform: translateY(-30px);
76    }
77  }