@@ -4,8 +4,8 @@
6 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
6 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
7− font-size: 3.5rem;
7+ font-size: (3.5rem / 4);
8− line-height: 6rem;
8+ line-height: (6rem / 4);
9 color: #000000;
9 color: #000000;
@@ -14,7 +14,7 @@ a {
17− margin: 4rem 0;
17+ margin: (4rem / 4) 0;
18 width: 100%;
18 width: 100%;
@@ -27,34 +27,38 @@ iframe {
29.main-wrapper {
29.main-wrapper {
30− margin-top: 24rem;
30+ margin-top: (24rem / 4);
34 position: relative;
34 position: relative;
35 margin: 0 auto;
35 margin: 0 auto;
36− padding: 0 2rem;
36+ padding: 0 (4rem / 4);
37 max-width: 960px;
37 max-width: 960px;
40.container {
40.container {
41 display: flex;
41 display: flex;
42 padding-bottom: 32rem;
43 padding-bottom: 32rem;
45+ padding-bottom: (32rem / 4);
45.container--fixed {
49.container--fixed {
46 position: fixed;
50 position: fixed;
47− margin-top: -24rem;
51+ margin-top: -(24rem / 4);
50.content-nav {
54.content-nav {
51 width: 20%;
55 width: 20%;
52 min-width: 200px;
56 min-width: 200px;
53− padding-right: 1rem;
57+ padding-right: (1rem / 4);
54− margin-top: 24rem;
58+ margin-top: (24rem / 4);
56− line-height: 8rem;
60+ line-height: (8rem / 4);
57− margin-bottom: 1rem;
61+ margin-bottom: (1rem / 4);
60 font-size: inherit;
64 font-size: inherit;
@@ -64,8 +68,8 @@ iframe {
65.content-nav-icon {
69.content-nav-icon {
66 position: fixed;
70 position: fixed;
67− left: 2rem;
71+ left: (2rem / 4);
68− top: 24rem;
72+ top: (24rem / 4);
69 width: 10px;
73 width: 10px;
70 height: 10px;
74 height: 10px;
71 cursor: pointer;
75 cursor: pointer;
@@ -85,7 +89,7 @@ iframe {
85 .content-nav {
89 .content-nav {
86 overflow-y: scroll;
90 overflow-y: scroll;
87 .list:first-child {
91 .list:first-child {
88− padding-bottom: 14rem;
92+ padding-bottom: (14rem / 4);
90 .list li:last-child .subsub-list li:last-child {
94 .list li:last-child .subsub-list li:last-child {
91 padding-bottom: 0;
95 padding-bottom: 0;
@@ -96,10 +100,10 @@ iframe {
96.content-nav-spacer {
100.content-nav-spacer {
97 width: 20%;
101 width: 20%;
98 min-width: 200px;
102 min-width: 200px;
99− padding-right: 5rem;
103+ padding-right: (5rem / 4);
100 &__item {
104 &__item {
101− line-height: 8rem;
105+ line-height: (8rem / 4);
102− margin-bottom: 1rem;
106+ margin-bottom: (1rem / 4);
@@ -111,7 +115,7 @@ iframe {
111.content {
115.content {
112 position: relative;
116 position: relative;
113 z-index: 3;
117 z-index: 3;
114− margin-top: -16rem;
118+ margin-top: -(16rem / 4);
117.content-nav-icon {
121.content-nav-icon {
@@ -130,12 +134,12 @@ iframe {
132.sub-list {
136.sub-list {
133− padding-left: 4rem;
137+ padding-left: (4rem / 4);
134 .sub-list {
138 .sub-list {
135 padding-left: 0;
139 padding-left: 0;
137 .subsub-list {
141 .subsub-list {
138− padding-left: 4rem;
142+ padding-left: (4rem / 4);
@@ -150,12 +154,12 @@ iframe {
150 display: flex;
154 display: flex;
151 justify-content: flex-start;
155 justify-content: flex-start;
152 .list__item {
156 .list__item {
153− margin-right: 4rem;
157+ margin-right: (4rem / 4);
157.body-regular {
161.body-regular {
158− margin-bottom: 7rem;
162+ margin-bottom: (7rem / 4);
161.video-wrapper {
165.video-wrapper {
@@ -179,7 +183,7 @@ iframe {
181 position: fixed;
185 position: fixed;
182− height: 24rem;
186+ height: (24rem / 4);
183 width: 100%;
187 width: 100%;
184 z-index: 2;
188 z-index: 2;
@@ -192,24 +196,24 @@ iframe {
192 supported by Chrome and Opera */
196 supported by Chrome and Opera */
193 &__navigation {
197 &__navigation {
194 display: none;
198 display: none;
195− padding-top: 9rem;
199+ padding-top: (9rem / 4);
197 &__nav-icon {
201 &__nav-icon {
198 position: absolute;
202 position: absolute;
199− margin-left: 2rem;
203+ margin-left: (4rem / 4);
200− width: 6rem;
204+ width: (6rem / 4);
201− height: 10rem;
205+ height: (10rem / 4);
203− top: 6rem;
207+ top: (6rem / 4);
204 z-index: 3;
208 z-index: 3;
205 cursor: pointer;
209 cursor: pointer;
206 &:before, &:after {
210 &:before, &:after {
207 content: '';
211 content: '';
208 position: absolute;
212 position: absolute;
209 width: 100%;
213 width: 100%;
210− height: 1rem;
214+ height: (1rem / 4);
211 background: #000;
215 background: #000;
212− margin-bottom: 4rem;
216+ margin-bottom: (4rem / 4);
213 top: 50%;
217 top: 50%;
215 transform-origin: 50%;
219 transform-origin: 50%;
@@ -256,7 +260,7 @@ iframe {
257 &__content {
261 &__content {
258 z-index: 3;
262 z-index: 3;
259− margin-left: -8rem;
263+ margin-left: -(8rem / 4);
@@ -284,10 +288,10 @@ textarea, input[type="text"], input[type="email"], input[type="number"] {
284button, .btn {
288button, .btn {
285 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
289 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
286 font-weight: 500;
290 font-weight: 500;
287− font-size: 4rem;
291+ font-size: (4rem / 4);
288− line-height: 4rem;
292+ line-height: (4rem / 4);
289 user-select: none;
293 user-select: none;
290− padding: 3rem 6rem;
294+ padding: (3rem /4) (6rem / 4);
291 margin: 0 0 6px;
295 margin: 0 0 6px;
292 border: none;
296 border: none;
293 cursor: pointer;
297 cursor: pointer;
@@ -348,59 +352,59 @@ h1, h2, h3, h4 {
348 font-weight: 700;
352 font-weight: 700;
351− font-size: 8rem;
355+ font-size: (8rem / 4);
352− line-height: 8rem;
356+ line-height: (8rem / 4);
355− font-size: 6rem;
359+ font-size: (6rem / 4);
356− line-height: 6rem;
360+ line-height: (6rem / 4);
359− font-size: 5rem;
363+ font-size: (5rem / 4);
360− line-height: 5rem;
364+ line-height: (5rem / 4);
363− font-size: 4.5rem;
367+ font-size: (4.5rem / 4);
364− line-height: 4.5rem;
368+ line-height: (4.5rem / 4);
367− font-size: 4rem;
371+ font-size: (4rem / 4);
368− line-height: 4rem;
372+ line-height: (4rem / 4);
371.article {
375.article {
373− margin-bottom: 7rem;
377+ margin-bottom: (7rem / 4);
376− margin-top: 8rem;
380+ margin-top: (8rem / 4);
377− margin-bottom: 4rem;
381+ margin-bottom: (4rem / 4);
380− margin-top: 7rem;
384+ margin-top: (7rem / 4);
381− margin-bottom: 3rem;
385+ margin-bottom: (3rem / 4);
384− margin-top: 6.5rem;
388+ margin-top: (6.5rem / 4);
385− margin-bottom: 2.5rem;
389+ margin-bottom: (2.5rem / 4);
388− margin-top: 6rem;
392+ margin-top: (6rem / 4);
389− margin-bottom: 2rem;
393+ margin-bottom: (2rem / 4);
394− font-size: 4rem;
398+ font-size: (4rem / 4);
395− line-height: 8rem;
399+ line-height: (8rem / 4);
396 font-weight: 400;
400 font-weight: 400;
400− font-size: 4rem;
404+ font-size: (4rem / 4);
401 font-weight: 400;
405 font-weight: 400;
402− line-height: 8rem;
406+ line-height: (8rem / 4);
403− margin: 0 0 4rem;
407+ margin: 0 0 (4rem / 4);
406pre, code {
410pre, code {
@@ -412,15 +416,15 @@ pre, code {
413 color: #000 !important;
417 color: #000 !important;
415− padding: 1rem;
419+ padding: (1rem / 4);
416− font-size: 4rem;
420+ font-size: (4rem / 4);
419textarea, input[type="text"], input[type="email"], input[type="number"] {
423textarea, input[type="text"], input[type="email"], input[type="number"] {
420 border: 1px solid #B1B2B3;
424 border: 1px solid #B1B2B3;
421 font-family: "Source Code Pro", mono;
425 font-family: "Source Code Pro", mono;
422− font-size: 4rem;
426+ font-size: (4rem / 4);
423− line-height: 6rem;
427+ line-height: (6rem / 4);
424 transition: all 0.1s linear;
428 transition: all 0.1s linear;
425 padding-right: 40px;
429 padding-right: 40px;
426 position: relative;
430 position: relative;