@@ -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,33 +27,34 @@ 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 / 4);
44.container--fixed {
45.container--fixed {
45 position: fixed;
46 position: fixed;
46− margin-top: -24rem;
47+ margin-top: -(24rem / 4);
49.content-nav {
50.content-nav {
50 width: 20%;
51 width: 20%;
51 min-width: 200px;
52 min-width: 200px;
52− padding-right: 1rem;
53+ padding-right: (1rem / 4);
53− margin-top: 24rem;
54+ margin-top: (24rem / 4);
55− line-height: 8rem;
56+ line-height: (8rem / 4);
56− margin-bottom: 1rem;
57+ margin-bottom: (1rem / 4);
59 font-size: inherit;
60 font-size: inherit;
@@ -63,8 +64,8 @@ iframe {
64.content-nav-icon {
65.content-nav-icon {
65 position: fixed;
66 position: fixed;
66− left: 2rem;
67+ left: (2rem / 4);
67− top: 24rem;
68+ top: (24rem / 4);
68 width: 10px;
69 width: 10px;
69 height: 10px;
70 height: 10px;
70 cursor: pointer;
71 cursor: pointer;
@@ -84,7 +85,7 @@ iframe {
84 .content-nav {
85 .content-nav {
85 overflow-y: scroll;
86 overflow-y: scroll;
86 .list:first-child {
87 .list:first-child {
87− padding-bottom: 14rem;
88+ padding-bottom: (14rem / 4);
89 .list li:last-child .subsub-list li:last-child {
90 .list li:last-child .subsub-list li:last-child {
90 padding-bottom: 0;
91 padding-bottom: 0;
@@ -95,10 +96,10 @@ iframe {
95.content-nav-spacer {
96.content-nav-spacer {
96 width: 20%;
97 width: 20%;
97 min-width: 200px;
98 min-width: 200px;
98− padding-right: 5rem;
99+ padding-right: (5rem / 4);
99 &__item {
100 &__item {
100− line-height: 8rem;
101+ line-height: (8rem / 4);
101− margin-bottom: 1rem;
102+ margin-bottom: (1rem / 4);
@@ -110,7 +111,7 @@ iframe {
110.content {
111.content {
111 position: relative;
112 position: relative;
112 z-index: 3;
113 z-index: 3;
113− margin-top: -16rem;
114+ margin-top: -(16rem / 4);
116.content-nav-icon {
117.content-nav-icon {
@@ -129,12 +130,12 @@ iframe {
131.sub-list {
132.sub-list {
132− padding-left: 4rem;
133+ padding-left: (4rem / 4);
133 .sub-list {
134 .sub-list {
134 padding-left: 0;
135 padding-left: 0;
136 .subsub-list {
137 .subsub-list {
137− padding-left: 4rem;
138+ padding-left: (4rem / 4);
@@ -149,12 +150,12 @@ iframe {
149 display: flex;
150 display: flex;
150 justify-content: flex-start;
151 justify-content: flex-start;
151 .list__item {
152 .list__item {
152− margin-right: 4rem;
153+ margin-right: (4rem / 4);
156.body-regular {
157.body-regular {
157− margin-bottom: 7rem;
158+ margin-bottom: (7rem / 4);
160.video-wrapper {
161.video-wrapper {
@@ -178,7 +179,7 @@ iframe {
180 position: fixed;
181 position: fixed;
181− height: 24rem;
182+ height: (24rem / 4);
182 width: 100%;
183 width: 100%;
183 z-index: 2;
184 z-index: 2;
@@ -191,24 +192,24 @@ iframe {
191 supported by Chrome and Opera */
192 supported by Chrome and Opera */
192 &__navigation {
193 &__navigation {
193 display: none;
194 display: none;
194− padding-top: 9rem;
195+ padding-top: (9rem / 4);
196 &__nav-icon {
197 &__nav-icon {
197 position: absolute;
198 position: absolute;
198− margin-left: 2rem;
199+ margin-left: (4rem / 4);
199− width: 6rem;
200+ width: (6rem / 4);
200− height: 10rem;
201+ height: (10rem / 4);
202− top: 6rem;
203+ top: (6rem / 4);
203 z-index: 3;
204 z-index: 3;
204 cursor: pointer;
205 cursor: pointer;
205 &:before, &:after {
206 &:before, &:after {
206 content: '';
207 content: '';
207 position: absolute;
208 position: absolute;
208 width: 100%;
209 width: 100%;
209− height: 1rem;
210+ height: (1rem / 4);
210 background: #000;
211 background: #000;
211− margin-bottom: 4rem;
212+ margin-bottom: (4rem / 4);
212 top: 50%;
213 top: 50%;
214 transform-origin: 50%;
215 transform-origin: 50%;
@@ -255,7 +256,7 @@ iframe {
256 &__content {
257 &__content {
257 z-index: 3;
258 z-index: 3;
258− margin-left: -8rem;
259+ margin-left: -(8rem / 4);
@@ -283,10 +284,10 @@ textarea, input[type="text"], input[type="email"], input[type="number"] {
283button, .btn {
284button, .btn {
284 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
285 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
285 font-weight: 500;
286 font-weight: 500;
286− font-size: 4rem;
287+ font-size: (4rem / 4);
287− line-height: 4rem;
288+ line-height: (4rem / 4);
288 user-select: none;
289 user-select: none;
289− padding: 3rem 6rem;
290+ padding: (3rem /4) (6rem / 4);
290 margin: 0 0 6px;
291 margin: 0 0 6px;
291 border: none;
292 border: none;
292 cursor: pointer;
293 cursor: pointer;
@@ -347,59 +348,59 @@ h1, h2, h3, h4 {
347 font-weight: 700;
348 font-weight: 700;
350− font-size: 8rem;
351+ font-size: (8rem / 4);
351− line-height: 8rem;
352+ line-height: (8rem / 4);
354− font-size: 6rem;
355+ font-size: (6rem / 4);
355− line-height: 6rem;
356+ line-height: (6rem / 4);
358− font-size: 5rem;
359+ font-size: (5rem / 4);
359− line-height: 5rem;
360+ line-height: (5rem / 4);
362− font-size: 4.5rem;
363+ font-size: (4.5rem / 4);
363− line-height: 4.5rem;
364+ line-height: (4.5rem / 4);
366− font-size: 4rem;
367+ font-size: (4rem / 4);
367− line-height: 4rem;
368+ line-height: (4rem / 4);
370.article {
371.article {
372− margin-bottom: 7rem;
373+ margin-bottom: (7rem / 4);
375− margin-top: 8rem;
376+ margin-top: (8rem / 4);
376− margin-bottom: 4rem;
377+ margin-bottom: (4rem / 4);
379− margin-top: 7rem;
380+ margin-top: (7rem / 4);
380− margin-bottom: 3rem;
381+ margin-bottom: (3rem / 4);
383− margin-top: 6.5rem;
384+ margin-top: (6.5rem / 4);
384− margin-bottom: 2.5rem;
385+ margin-bottom: (2.5rem / 4);
387− margin-top: 6rem;
388+ margin-top: (6rem / 4);
388− margin-bottom: 2rem;
389+ margin-bottom: (2rem / 4);
393− font-size: 4rem;
394+ font-size: (4rem / 4);
394− line-height: 8rem;
395+ line-height: (8rem / 4);
395 font-weight: 400;
396 font-weight: 400;
399− font-size: 4rem;
400+ font-size: (4rem / 4);
400 font-weight: 400;
401 font-weight: 400;
401− line-height: 8rem;
402+ line-height: (8rem / 4);
402− margin: 0 0 4rem;
403+ margin: 0 0 (4rem / 4);
405pre, code {
406pre, code {
@@ -411,15 +412,15 @@ pre, code {
412 color: #000 !important;
413 color: #000 !important;
414− padding: 1rem;
415+ padding: (1rem / 4);
415− font-size: 4rem;
416+ font-size: (4rem / 4);
418textarea, input[type="text"], input[type="email"], input[type="number"] {
419textarea, input[type="text"], input[type="email"], input[type="number"] {
419 border: 1px solid #B1B2B3;
420 border: 1px solid #B1B2B3;
420 font-family: "Source Code Pro", mono;
421 font-family: "Source Code Pro", mono;
421− font-size: 4rem;
422+ font-size: (4rem / 4);
422− line-height: 6rem;
423+ line-height: (6rem / 4);
423 transition: all 0.1s linear;
424 transition: all 0.1s linear;
424 padding-right: 40px;
425 padding-right: 40px;
425 position: relative;
426 position: relative;