1  * {
  2      margin: 0;
  3      padding: 0;
  4      box-sizing: border-box;
  5    }
  6  
  7    html,
  8    body {
  9      font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
 10      font-weight: 400;
 11      font-size: 1em;
 12      color: #ddd;
 13      background: linear-gradient(#303433, #243b55);
 14    }
 15  
 16    .center-text {
 17      text-align: center;
 18    }
 19  
 20    main {
 21      padding: 1.225em;
 22      width: 100%;
 23    }
 24  
 25    img.logo {
 26      display: block;
 27      margin: 0 auto;
 28      max-width: 490px;
 29      margin-bottom: 1em;
 30    }
 31  
 32    h1 {
 33      font-size: 2.625em;
 34      font-weight: 100;
 35      padding-top: 2rem;
 36      padding-bottom: 0.625rem;
 37      font-weight: 100;
 38      color: #fff;
 39      text-transform: uppercase;
 40    }
 41  
 42    h2 {
 43      font-size: 2.25em;
 44      font-weight: 100;
 45      padding-bottom: 0.625rem;
 46    }
 47  
 48    h3 {
 49      font-size: 1.725em;
 50      font-weight: 100;
 51      padding-bottom: 0.625rem;
 52    }
 53  
 54    h4 {
 55      font-size: 1.425em;
 56      font-weight: 100;
 57      padding-bottom: 0.625rem;
 58    }
 59  
 60    h5 {
 61      font-size: 1.225em;
 62      font-weight: 100;
 63      padding-bottom: 0.625rem;
 64    }
 65  
 66    .ital {
 67      font-style: italic;
 68    }
 69  
 70    footer {
 71      position: fixed;
 72      bottom: 0;
 73      left: 0;
 74      right: 0;
 75      padding: 2em;
 76      z-index: 3;
 77    }
 78  
 79    footer p {
 80      font-weight: 300;
 81      font-size: 1em;
 82    }
 83  
 84    a {
 85      color: #31D8A0;
 86      text-decoration: none;
 87    }
 88  
 89    a:hover,
 90    a:focus {
 91      color: #47ffc2;
 92      transition: color 0.3s linear;
 93    }
 94  
 95    .thin-200 {
 96      font-weight: 200;
 97    }
 98  
 99    .thin {
100      font-weight: 100;
101    }
102  
103    .loader {
104      --color: white;
105      --size-mid: 6vmin;
106      --size-dot: 1.5vmin;
107      --size-bar: 0.4vmin;
108      --size-square: 3vmin;
109  
110      display: block;
111      position: relative;
112      width: 50%;
113      display: grid;
114      place-items: center;
115    }
116  
117    .loader::before,
118    .loader::after {
119      content: '';
120      box-sizing: border-box;
121      position: absolute;
122    }
123  
124    /**
125      loader --1
126    **/
127    .loader.--1::before {
128      width: var(--size-mid);
129      height: var(--size-mid);
130      border: 4px solid var(--color);
131      border-top-color: transparent;
132      border-radius: 50%;
133      animation: loader-1 1s linear infinite;
134    }
135  
136    .loader.--1::after {
137      width: calc(var(--size-mid) - 2px);
138      height: calc(var(--size-mid) - 2px);
139      border: 2px solid transparent;
140      border-top-color: var(--color);
141      border-radius: 50%;
142      animation: loader-1 0.6s linear reverse infinite;
143    }
144  
145    @keyframes loader-1 {
146      100% {
147        transform: rotate(1turn);
148      }
149    }
150  
151    /**
152      loader --2
153    **/
154    .loader.--2::before,
155    .loader.--2::after {
156      width: var(--size-dot);
157      height: var(--size-dot);
158      background-color: var(--color);
159      border-radius: 50%;
160      opacity: 0;
161      animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
162    }
163  
164    .loader.--2::after {
165      animation-delay: 0.3s;
166    }
167  
168    @keyframes loader-2 {
169  
170      0%,
171      80%,
172      100% {
173        opacity: 0;
174      }
175  
176      33% {
177        opacity: 1;
178      }
179  
180      0%,
181      100% {
182        transform: translateX(-4vmin);
183      }
184  
185      90% {
186        transform: translateX(4vmin);
187      }
188    }
189  
190    /**
191      loader --3
192    **/
193    .loader.--3::before,
194    .loader.--3::after {
195      width: var(--size-dot);
196      height: var(--size-dot);
197      background-color: var(--color);
198      border-radius: 50%;
199      animation: loader-3 1.2s ease-in-out infinite;
200    }
201  
202    .loader.--3::before {
203      left: calc(50% - 1.6vmin - var(--size-dot));
204    }
205  
206    .loader.--3::after {
207      left: calc(50% + 1.6vmin);
208      animation-delay: -0.4s;
209    }
210  
211    @keyframes loader-3 {
212  
213      0%,
214      100% {
215        transform: translateY(-2.6vmin);
216      }
217  
218      44% {
219        transform: translateY(2.6vmin);
220      }
221    }
222  
223    /**
224      loader --4
225    **/
226    .loader.--4::before {
227      height: var(--size-bar);
228      width: 6vmin;
229      background-color: var(--color);
230      animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
231    }
232  
233    @keyframes loader-4 {
234  
235      0%,
236      44%,
237      88.1%,
238      100% {
239        transform-origin: left;
240      }
241  
242      0%,
243      100%,
244      88% {
245        transform: scaleX(0);
246      }
247  
248      44.1%,
249      88% {
250        transform-origin: right;
251      }
252  
253      33%,
254      44% {
255        transform: scaleX(1);
256      }
257    }
258  
259    /**
260      loader --5
261    **/
262    .loader.--5::before,
263    .loader.--5::after {
264      height: 3vmin;
265      width: var(--size-bar);
266      background-color: var(--color);
267      animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
268    }
269  
270    .loader.--5::before {
271      left: calc(50% - 1vmin);
272      top: calc(50% - 3vmin);
273    }
274  
275    .loader.--5::after {
276      left: calc(50% + 1vmin);
277      top: calc(50% - 1vmin);
278      animation-delay: 0.2s;
279    }
280  
281    @keyframes loader-5 {
282  
283      0%,
284      88%,
285      100% {
286        opacity: 0;
287      }
288  
289      0% {
290        transform: translateY(-6vmin);
291      }
292  
293      33% {
294        opacity: 1;
295      }
296  
297      33%,
298      88% {
299        transform: translateY(3vmin);
300      }
301    }
302  
303    /**
304      loader --6
305    **/
306    .loader.--6::before {
307      width: var(--size-square);
308      height: var(--size-square);
309      background-color: var(--color);
310      top: calc(50% - var(--size-square));
311      left: calc(50% - var(--size-square));
312      animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
313    }
314  
315    @keyframes loader-6 {
316  
317      0%,
318      100% {
319        transform: none;
320      }
321  
322      25% {
323        transform: translateX(100%);
324      }
325  
326      50% {
327        transform: translateX(100%) translateY(100%);
328      }
329  
330      75% {
331        transform: translateY(100%);
332      }
333    }
334  
335    /**
336      loader --7
337    **/
338    .loader.--7::before,
339    .loader.--7::after {
340      width: var(--size-square);
341      height: var(--size-square);
342      background-color: var(--color);
343    }
344  
345    .loader.--7::before {
346      top: calc(50% - var(--size-square));
347      left: calc(50% - var(--size-square));
348      animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
349    }
350  
351    .loader.--7::after {
352      top: 50%;
353      left: 50%;
354      animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
355    }
356  
357    @keyframes loader-7 {
358  
359      0%,
360      100% {
361        transform: none;
362      }
363  
364      25% {
365        transform: translateX(-100%);
366      }
367  
368      50% {
369        transform: translateX(-100%) translateY(-100%);
370      }
371  
372      75% {
373        transform: translateY(-100%);
374      }
375    }
376  
377    /**
378      loader --8
379    **/
380    .loader.--8::before,
381    .loader.--8::after {
382      width: var(--size-dot);
383      height: var(--size-dot);
384      border-radius: 50%;
385      background-color: var(--color);
386    }
387  
388    .loader.--8::before {
389      top: calc(50% + 4vmin);
390      animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
391    }
392  
393    .loader.--8::after {
394      opacity: 0;
395      top: calc(50% - 2vmin);
396      animation: loader-8-2 0.8s cubic-bezier(0.46, -0.1, 0.27, 1.07) 0.2s infinite;
397    }
398  
399    @keyframes loader-8-1 {
400  
401      0%,
402      55%,
403      100% {
404        opacity: 0;
405      }
406  
407      0% {
408        transform: scale(0.2);
409      }
410  
411      22% {
412        opacity: 1;
413      }
414  
415      33%,
416      55% {
417        transform: scale(1) translateY(-6vmin);
418      }
419    }
420  
421    @keyframes loader-8-2 {
422  
423      0%,
424      100% {
425        opacity: 0;
426      }
427  
428      33% {
429        opacity: 0.3;
430      }
431  
432      0% {
433        transform: scale(0);
434      }
435  
436      100% {
437        transform: scale(4);
438      }
439    }
440  
441    /**
442      loader --9
443    **/
444    .loader.--9::before,
445    .loader.--9::after {
446      width: var(--size-dot);
447      height: var(--size-dot);
448      border-radius: 50%;
449      background-color: var(--color);
450      animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
451    }
452  
453    .loader.--9::before {
454      left: calc(50% - var(--size-dot) - 1.6vmin);
455    }
456  
457    .loader.--9::after {
458      left: calc(50% + 1.6vmin);
459      animation-delay: 0.12s;
460    }
461  
462    @keyframes loader-9 {
463  
464      0%,
465      100% {
466        opacity: 0;
467      }
468  
469      0% {
470        transform: translate(-4vmin, -4vmin);
471      }
472  
473      66% {
474        opacity: 1;
475      }
476  
477      66%,
478      100% {
479        transform: none;
480      }
481    }
482  
483    /**
484      anim
485    **/
486    .grido {
487      display: grid;
488      grid-template-columns: repeat(3, 18vmin);
489      grid-template-rows: repeat(3, 18vmin);
490      grid-gap: 1vmin;
491      align-items: start;
492      justify-content: center;
493    }
494  
495    .item {
496      background: rgba(255, 255, 255, 0.1);
497      display: grid;
498      place-items: center;
499      border-radius: 4px;
500      transition: opacity 0.4s ease;
501    }
502  
503    .grido:hover .item {
504      opacity: 0.3;
505    }
506  
507    .grido:hover .item:hover {
508      opacity: 1;
509    }
510  
511    ul {
512      margin: 0.425em;
513      list-style: gurmukhi;
514    }
515  
516    li {
517      padding-top: 0.825;
518      padding-bottom: 0.825em;
519    }
520  
521    .nav {
522      position: fixed;
523      top: 3rem;
524    }
525  
526    @media only screen and (max-width: 768px) {
527  
528      .nav {
529        position: relative;
530        display: grid;
531        justify-content: center;
532        top: 0rem;
533        margin-bottom: 3rem;
534      }
535  
536    }