Blockquote

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16

<H1 size="6xl">H1 6xl</H1>
<H1 size="5xl" weight="thin">
	H1 5xl
</H1>
<H1 size="4xl" align="center">
	H1 4xl
</H1>
<H1 size="3xl" align="right" tracking="widest">
	H1 3xl
</H1>
<H1 size="2xl">H1 2xl</H1>
<H1 size="xl">H1 xl</H1>
<H1 size="lg">H1 lg</H1>
<H1 size="md">H1 md</H1>
<H1 size="sm">H1 sm</H1>
<H1 size="xs">H1 xs</H1>

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114
115. 115
116. 116

/* Typography: https://andrecasal.com/articles/fluid-typography-sizing-with-modular-scales */
@layer base {
	:root {
		/* Font family */
		--font-sans: Inter; /* This requires the font.css file to be preloaded in the root.tsx */
		--font-code: 'Fira Code VF'; /* This requires the font.css file to be preloaded in the root.tsx */

		/* Font size */
		--text-size-6xl-min-size: 4.5;
		--text-size-6xl-max-size: 8;
		--text-size-5xl-min-size: 3;
		--text-size-5xl-max-size: 6;
		--text-size-4xl-min-size: 2.25;
		--text-size-4xl-max-size: 3.75;
		--text-size-3xl-min-size: 1.875;
		--text-size-3xl-max-size: 2.25;
		--text-size-2xl-min-size: 1.5;
		--text-size-2xl-max-size: 1.875;
		--text-size-xl-min-size: 1.25;
		--text-size-xl-max-size: 1.5;
		--text-size-lg-min-size: 1.125;
		--text-size-lg-max-size: 1.25;
		--text-size-md-min-size: 1;
		--text-size-md-max-size: 1.125;
		--text-size-sm-min-size: 0.875;
		--text-size-sm-max-size: 1;
		--text-size-xs-min-size: 0.75;
		--text-size-xs-max-size: 0.875;

		/* Line-height. Default values. This should be adapted to paragraph length: 1em for 45 characters, 2em for 75 characters. */
		--text-line-height-xs: clamp(1.125rem, 6.2vw, 1.75rem); /* 12px <-> 14px => 18px <-> 28px */
		--text-line-height-sm: clamp(1.25rem, 6.2vw, 2rem); /* 20px <-> 32px */
		--text-line-height-md: clamp(1.5rem, 6vw, 2.25rem); /* 24px <-> 36px */
		--text-line-height-lg: clamp(1.75rem, 5.8vw, 2.25rem); /* 28px <-> 36px */
		--text-line-height-xl: clamp(2rem, 6.5vw, 2.5rem); /* 32px <-> 40px */
		--text-line-height-2xl: 1.5;
		--text-line-height-3xl: 1.5;
		--text-line-height-4xl: 1.2;
		--text-line-height-5xl: 1.2;
		--text-line-height-6xl: 1.2;

		/* Tracking. Default values. Can be overridden by the 'tracking' prop on the <Heading /> and <P /> components) */
		--text-tracking-xs: 0em;
		--text-tracking-sm: 0em;
		--text-tracking-md: 0em;
		--text-tracking-lg: 0em;
		--text-tracking-xl: 0em;
		--text-tracking-2xl: -0.025em;
		--text-tracking-3xl: -0.025em;
		--text-tracking-4xl: -0.025em;
		--text-tracking-5xl: -0.05em;
		--text-tracking-6xl: -0.05em;

		/* Calculations (you probably don't need to change this) */
		/* text-size-6xl */
		--text-size-6xl-deltaY: calc(var(--text-size-6xl-max-size) - var(--text-size-6xl-min-size));
		--text-size-6xl-gradient: calc(var(--text-size-6xl-deltaY) / var(--size-deltaX));
		--text-size-6xl-intercept: calc(var(--text-size-6xl-min-size) - (var(--text-size-6xl-gradient) * var(--content-min-width)));
		--text-size-6xl-font-size: calc(var(--text-size-6xl-gradient) * 100vw + var(--text-size-6xl-intercept) * 1rem);
		--text-size-6xl: clamp(calc(var(--text-size-6xl-min-size) * 1rem), var(--text-size-6xl-font-size), calc(var(--text-size-6xl-max-size) * 1rem));
		/* text-size-5xl */
		--text-size-5xl-deltaY: calc(var(--text-size-5xl-max-size) - var(--text-size-5xl-min-size));
		--text-size-5xl-gradient: calc(var(--text-size-5xl-deltaY) / var(--size-deltaX));
		--text-size-5xl-intercept: calc(var(--text-size-5xl-min-size) - (var(--text-size-5xl-gradient) * var(--content-min-width)));
		--text-size-5xl-font-size: calc(var(--text-size-5xl-gradient) * 100vw + var(--text-size-5xl-intercept) * 1rem);
		--text-size-5xl: clamp(calc(var(--text-size-5xl-min-size) * 1rem), var(--text-size-5xl-font-size), calc(var(--text-size-5xl-max-size) * 1rem));
		/* text-size-4xl */
		--text-size-4xl-deltaY: calc(var(--text-size-4xl-max-size) - var(--text-size-4xl-min-size));
		--text-size-4xl-gradient: calc(var(--text-size-4xl-deltaY) / var(--size-deltaX));
		--text-size-4xl-intercept: calc(var(--text-size-4xl-min-size) - (var(--text-size-4xl-gradient) * var(--content-min-width)));
		--text-size-4xl-font-size: calc(var(--text-size-4xl-gradient) * 100vw + var(--text-size-4xl-intercept) * 1rem);
		--text-size-4xl: clamp(calc(var(--text-size-4xl-min-size) * 1rem), var(--text-size-4xl-font-size), calc(var(--text-size-4xl-max-size) * 1rem));
		/* text-size-3xl */
		--text-size-3xl-deltaY: calc(var(--text-size-3xl-max-size) - var(--text-size-3xl-min-size));
		--text-size-3xl-gradient: calc(var(--text-size-3xl-deltaY) / var(--size-deltaX));
		--text-size-3xl-intercept: calc(var(--text-size-3xl-min-size) - (var(--text-size-3xl-gradient) * var(--content-min-width)));
		--text-size-3xl-font-size: calc(var(--text-size-3xl-gradient) * 100vw + var(--text-size-3xl-intercept) * 1rem);
		--text-size-3xl: clamp(calc(var(--text-size-3xl-min-size) * 1rem), var(--text-size-3xl-font-size), calc(var(--text-size-3xl-max-size) * 1rem));
		/* text-size-2xl */
		--text-size-2xl-deltaY: calc(var(--text-size-2xl-max-size) - var(--text-size-2xl-min-size));
		--text-size-2xl-gradient: calc(var(--text-size-2xl-deltaY) / var(--size-deltaX));
		--text-size-2xl-intercept: calc(var(--text-size-2xl-min-size) - (var(--text-size-2xl-gradient) * var(--content-min-width)));
		--text-size-2xl-font-size: calc(var(--text-size-2xl-gradient) * 100vw + var(--text-size-2xl-intercept) * 1rem);
		--text-size-2xl: clamp(calc(var(--text-size-2xl-min-size) * 1rem), var(--text-size-2xl-font-size), calc(var(--text-size-2xl-max-size) * 1rem));
		/* text-size-xl */
		--text-size-xl-deltaY: calc(var(--text-size-xl-max-size) - var(--text-size-xl-min-size));
		--text-size-xl-gradient: calc(var(--text-size-xl-deltaY) / var(--size-deltaX));
		--text-size-xl-intercept: calc(var(--text-size-xl-min-size) - (var(--text-size-xl-gradient) * var(--content-min-width)));
		--text-size-xl-font-size: calc(var(--text-size-xl-gradient) * 100vw + var(--text-size-xl-intercept) * 1rem);
		--text-size-xl: clamp(calc(var(--text-size-xl-min-size) * 1rem), var(--text-size-xl-font-size), calc(var(--text-size-xl-max-size) * 1rem));
		/* text-size-lg */
		--text-size-lg-deltaY: calc(var(--text-size-lg-max-size) - var(--text-size-lg-min-size));
		--text-size-lg-gradient: calc(var(--text-size-lg-deltaY) / var(--size-deltaX));
		--text-size-lg-intercept: calc(var(--text-size-lg-min-size) - (var(--text-size-lg-gradient) * var(--content-min-width)));
		--text-size-lg-font-size: calc(var(--text-size-lg-gradient) * 100vw + var(--text-size-lg-intercept) * 1rem);
		--text-size-lg: clamp(calc(var(--text-size-lg-min-size) * 1rem), var(--text-size-lg-font-size), calc(var(--text-size-lg-max-size) * 1rem));
		/* text-size-md */
		--text-size-md-deltaY: calc(var(--text-size-md-max-size) - var(--text-size-md-min-size));
		--text-size-md-gradient: calc(var(--text-size-md-deltaY) / var(--size-deltaX));
		--text-size-md-intercept: calc(var(--text-size-md-min-size) - (var(--text-size-md-gradient) * var(--content-min-width)));
		--text-size-md-font-size: calc(var(--text-size-md-gradient) * 100vw + var(--text-size-md-intercept) * 1rem);
		--text-size-md: clamp(calc(var(--text-size-md-min-size) * 1rem), var(--text-size-md-font-size), calc(var(--text-size-md-max-size) * 1rem));
		/* text-size-sm */
		--text-size-sm-deltaY: calc(var(--text-size-sm-max-size) - var(--text-size-sm-min-size));
		--text-size-sm-gradient: calc(var(--text-size-sm-deltaY) / var(--size-deltaX));
		--text-size-sm-intercept: calc(var(--text-size-sm-min-size) - (var(--text-size-sm-gradient) * var(--content-min-width)));
		--text-size-sm-font-size: calc(var(--text-size-sm-gradient) * 100vw + var(--text-size-sm-intercept) * 1rem);
		--text-size-sm: clamp(calc(var(--text-size-sm-min-size) * 1rem), var(--text-size-sm-font-size), calc(var(--text-size-sm-max-size) * 1rem));
		/* text-size-xs */
		--text-size-xs-deltaY: calc(var(--text-size-xs-max-size) - var(--text-size-xs-min-size));
		--text-size-xs-gradient: calc(var(--text-size-xs-deltaY) / var(--size-deltaX));
		--text-size-xs-intercept: calc(var(--text-size-xs-min-size) - (var(--text-size-xs-gradient) * var(--content-min-width)));
		--text-size-xs-font-size: calc(var(--text-size-xs-gradient) * 100vw + var(--text-size-xs-intercept) * 1rem);
		--text-size-xs: clamp(calc(var(--text-size-xs-min-size) * 1rem), var(--text-size-xs-font-size), calc(var(--text-size-xs-max-size) * 1rem));
	}
}