innercircle css fluid typography

1/* This is inspired by https://type-scale.com/ & https://websemantics.uk/tools/responsive-font-calculator/ */
2/* Use normal clamp function to determine range at https://websemantics.uk/tools/responsive-font-calculator */
3/* Determine how your type scale, minor second 1.067 to golden ration 1.618 <--Don't use gold ratio */
4/* Understand this font scaling is best used for desktop screen, there is a media query at 762 to change scaling*/
5:root {
6  --font-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.3774)), 2rem); /* 16px - 20px*/
7  --type-scale: 1.333;
8
9/* Calculate type size */
10  --text-xs: calc(var(--text-sm)/var(--type-scale));
11  --text-sm: calc(var(--h6)/var(--type-scale));
12  --text-lg: var(--h5);
13  --text-xl: var(--h4);
14  --text-xxl: var(--h3);
15  --hero-text: calc((var(--h1)* var(--type-scale))* var(--type-scale));
16  --h6: var(--font-size);
17  --h5: calc(var(--h6) * var(--type-scale));
18  --h4: calc(var(--h5) * var(--type-scale));
19  --h3: calc(var(--h4) * var(--type-scale));
20  --h2: calc(var(--h3) * var(--type-scale));
21  --h1: calc(var(--h2) * var(--type-scale));
22}
23html {font-size:62.5%;
24}
25h1 {
26	font-size: var(--h1);
27}
28h2 {
29	font-size: var(--h2);
30}
31h3 {
32	font-size: var(--h3);
33}
34h4 {
35	font-size: var(--h4);
36}
37h5 {
38	font-size: var(--h5);
39}
40h6 {
41	font-size: var(--h6);
42}
43p {
44	font-size: var(--font-size);
45}
46.hero-text{
47	font-size: var(--hero-text);
48}
49.text-xxl {
50	font-size: var(--text-xxl);	
51}
52.text-xl {
53	font-size: var(--text-xl);	
54}
55.text-lg {
56	font-size: var(--text-lg);	
57}
58.text-sm {
59	font-size: var(--text-sm);	
60}
61.text-xs {
62	font-size: var(--text-xs) ;	
63}
64
65@media only screen and (max-width: 762px) {
66:root {
67  --type-scale: 1.1;
68}