File size: 2,188 Bytes
8ede856
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
html {
  overflow-y: auto;
}
.v-main {
  margin-right: 20px;
}

.top-header {
  border-bottom: 1px solid rgba(var(--v-theme-borderLight), 0.5);
}
@media (max-width: 1279px) {
  .v-main {
    margin: 0 10px;
  }
}
.spacer {
  padding: 100px 0;
}
@media (max-width: 800px) {
  .spacer {
    padding: 40px 0;
  }
}

.page-wrapper {
  min-height: calc(100vh - 100px);
  padding: 8px;
  // border-radius: $border-radius-root;
  background: rgb(var(--v-theme-containerBg));
}
$sizes: (
  'display-1': 44px,
  'display-2': 40px,
  'display-3': 30px,
  'h1': 36px,
  'h2': 30px,
  'h3': 21px,
  'h4': 18px,
  'h5': 16px,
  'h6': 14px,
  'text-8': 8px,
  'text-10': 10px,
  'text-13': 13px,
  'text-18': 18px,
  'text-20': 20px,
  'text-24': 24px,
  'body-text-1': 10px
);

@each $pixel, $size in $sizes {
  .#{$pixel} {
    font-size: $size;
    line-height: $size + 10;
  }
}

.customizer-btn {
  position: fixed;
  top: 25%;
  right: 10px;
  border-radius: 50% 50% 4px;
  .icon {
    animation: progress-circular-rotate 1.4s linear infinite;
    transform-origin: center center;
    transition: all 0.2s ease-in-out;
  }
}
.w-100 {
  width: 100%;
}

.h-100vh {
  height: 100vh;
}

.gap-3 {
  gap: 16px;
}

.text-white {
  color: rgb(255, 255, 255) !important;
}

// font family

body {
  .Poppins {
    font-family: 'Poppins', $cjk-sans-fallback, sans-serif !important;
  }

  .Inter {
    font-family: 'Inter', $cjk-sans-fallback, sans-serif !important;
  }

  .Outfit {
    font-family: 'Outfit', $cjk-sans-fallback, sans-serif !important;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bounce {
  0%,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -5px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -7px, 0);
  }
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}