@@ -4,8 +4,8 @@
44
55body {
66 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;
8− line-height: 6rem;
7+ font-size: (3.5rem / 4);
8+ line-height: (6rem / 4);
99 color: #000000;
1010}
1111
@@ -14,7 +14,7 @@ a {
1414}
1515
1616p img {
17− margin: 4rem 0;
17+ margin: (4rem / 4) 0;
1818 width: 100%;
1919}
2020
@@ -27,33 +27,34 @@ iframe {
2727 */
2828
2929.main-wrapper {
30− margin-top: 24rem;
30+ margin-top: (24rem / 4);
3131}
3232
3333.wrapper {
3434 position: relative;
3535 margin: 0 auto;
36− padding: 0 2rem;
36+ padding: 0 (4rem / 4);
3737 max-width: 960px;
3838}
3939
4040.container {
4141 display: flex;
42+ padding-bottom: (32rem / 4);
4243}
4344
4445.container--fixed {
4546 position: fixed;
46− margin-top: -24rem;
47+ margin-top: -(24rem / 4);
4748}
4849
4950.content-nav {
5051 width: 20%;
5152 min-width: 200px;
52− padding-right: 1rem;
53− margin-top: 24rem;
53+ padding-right: (1rem / 4);
54+ margin-top: (24rem / 4);
5455 &__item {
55− line-height: 8rem;
56− margin-bottom: 1rem;
56+ line-height: (8rem / 4);
57+ margin-bottom: (1rem / 4);
5758 }
5859 li {
5960 font-size: inherit;
@@ -63,8 +64,8 @@ iframe {
6364
6465.content-nav-icon {
6566 position: fixed;
66− left: 2rem;
67− top: 24rem;
67+ left: (2rem / 4);
68+ top: (24rem / 4);
6869 width: 10px;
6970 height: 10px;
7071 cursor: pointer;
@@ -84,7 +85,7 @@ iframe {
8485 .content-nav {
8586 overflow-y: scroll;
8687 .list:first-child {
87− padding-bottom: 14rem;
88+ padding-bottom: (14rem / 4);
8889 }
8990 .list li:last-child .subsub-list li:last-child {
9091 padding-bottom: 0;
@@ -95,10 +96,10 @@ iframe {
9596.content-nav-spacer {
9697 width: 20%;
9798 min-width: 200px;
98− padding-right: 5rem;
99+ padding-right: (5rem / 4);
99100 &__item {
100− line-height: 8rem;
101− margin-bottom: 1rem;
101+ line-height: (8rem / 4);
102+ margin-bottom: (1rem / 4);
102103 }
103104}
104105
@@ -110,7 +111,7 @@ iframe {
110111.content {
111112 position: relative;
112113 z-index: 3;
113− margin-top: -16rem;
114+ margin-top: -(16rem / 4);
114115}
115116
116117.content-nav-icon {
@@ -129,12 +130,12 @@ iframe {
129130}
130131
131132.sub-list {
132− padding-left: 4rem;
133+ padding-left: (4rem / 4);
133134 .sub-list {
134135 padding-left: 0;
135136 }
136137 .subsub-list {
137− padding-left: 4rem;
138+ padding-left: (4rem / 4);
138139 }
139140}
140141
@@ -149,12 +150,12 @@ iframe {
149150 display: flex;
150151 justify-content: flex-start;
151152 .list__item {
152− margin-right: 4rem;
153+ margin-right: (4rem / 4);
153154 }
154155}
155156
156157.body-regular {
157− margin-bottom: 7rem;
158+ margin-bottom: (7rem / 4);
158159}
159160
160161.video-wrapper {
@@ -178,7 +179,7 @@ iframe {
178179
179180.header {
180181 position: fixed;
181− height: 24rem;
182+ height: (24rem / 4);
182183 width: 100%;
183184 z-index: 2;
184185 top: 0;
@@ -191,24 +192,24 @@ iframe {
191192 supported by Chrome and Opera */
192193 &__navigation {
193194 display: none;
194− padding-top: 9rem;
195+ padding-top: (9rem / 4);
195196 }
196197 &__nav-icon {
197198 position: absolute;
198− margin-left: 2rem;
199− width: 6rem;
200− height: 10rem;
199+ margin-left: (4rem / 4);
200+ width: (6rem / 4);
201+ height: (10rem / 4);
201202 left: 0;
202− top: 6rem;
203+ top: (6rem / 4);
203204 z-index: 3;
204205 cursor: pointer;
205206 &:before, &:after {
206207 content: '';
207208 position: absolute;
208209 width: 100%;
209− height: 1rem;
210+ height: (1rem / 4);
210211 background: #000;
211− margin-bottom: 4rem;
212+ margin-bottom: (4rem / 4);
212213 top: 50%;
213214 left: 0;
214215 transform-origin: 50%;
@@ -255,7 +256,7 @@ iframe {
255256.posts {
256257 &__content {
257258 z-index: 3;
258− margin-left: -8rem;
259+ margin-left: -(8rem / 4);
259260 }
260261}
261262
@@ -283,10 +284,10 @@ textarea, input[type="text"], input[type="email"], input[type="number"] {
283284button, .btn {
284285 font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
285286 font-weight: 500;
286− font-size: 4rem;
287− line-height: 4rem;
287+ font-size: (4rem / 4);
288+ line-height: (4rem / 4);
288289 user-select: none;
289− padding: 3rem 6rem;
290+ padding: (3rem /4) (6rem / 4);
290291 margin: 0 0 6px;
291292 border: none;
292293 cursor: pointer;
@@ -347,59 +348,59 @@ h1, h2, h3, h4 {
347348 font-weight: 700;
348349}
349350h1 {
350− font-size: 8rem;
351− line-height: 8rem;
351+ font-size: (8rem / 4);
352+ line-height: (8rem / 4);
352353}
353354h2 {
354− font-size: 6rem;
355− line-height: 6rem;
355+ font-size: (6rem / 4);
356+ line-height: (6rem / 4);
356357}
357358h3 {
358− font-size: 5rem;
359− line-height: 5rem;
359+ font-size: (5rem / 4);
360+ line-height: (5rem / 4);
360361}
361362h4 {
362− font-size: 4.5rem;
363− line-height: 4.5rem;
363+ font-size: (4.5rem / 4);
364+ line-height: (4.5rem / 4);
364365}
365366h5 {
366− font-size: 4rem;
367− line-height: 4rem;
367+ font-size: (4rem / 4);
368+ line-height: (4rem / 4);
368369}
369370
370371.article {
371372 h1 {
372− margin-bottom: 7rem;
373+ margin-bottom: (7rem / 4);
373374 }
374375 h2 {
375− margin-top: 8rem;
376− margin-bottom: 4rem;
376+ margin-top: (8rem / 4);
377+ margin-bottom: (4rem / 4);
377378 }
378379 h3 {
379− margin-top: 7rem;
380− margin-bottom: 3rem;
380+ margin-top: (7rem / 4);
381+ margin-bottom: (3rem / 4);
381382 }
382383 h4 {
383− margin-top: 6.5rem;
384− margin-bottom: 2.5rem;
384+ margin-top: (6.5rem / 4);
385+ margin-bottom: (2.5rem / 4);
385386 }
386387 h5 {
387− margin-top: 6rem;
388− margin-bottom: 2rem;
388+ margin-top: (6rem / 4);
389+ margin-bottom: (2rem / 4);
389390 }
390391}
391392
392393li {
393− font-size: 4rem;
394− line-height: 8rem;
394+ font-size: (4rem / 4);
395+ line-height: (8rem / 4);
395396 font-weight: 400;
396397}
397398
398399p, .p {
399− font-size: 4rem;
400+ font-size: (4rem / 4);
400401 font-weight: 400;
401− line-height: 8rem;
402− margin: 0 0 4rem;
402+ line-height: (8rem / 4);
403+ margin: 0 0 (4rem / 4);
403404}
404405
405406pre, code {
@@ -411,15 +412,15 @@ pre, code {
411412 span {
412413 color: #000 !important;
413414 }
414− padding: 1rem;
415− font-size: 4rem;
415+ padding: (1rem / 4);
416+ font-size: (4rem / 4);
416417}
417418
418419textarea, input[type="text"], input[type="email"], input[type="number"] {
419420 border: 1px solid #B1B2B3;
420421 font-family: "Source Code Pro", mono;
421− font-size: 4rem;
422− line-height: 6rem;
422+ font-size: (4rem / 4);
423+ line-height: (6rem / 4);
423424 transition: all 0.1s linear;
424425 padding-right: 40px;
425426 position: relative;