/ src / index.css
index.css
 1  @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 2  @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap");
 3  @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
 4  @import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 5  @import "tailwindcss";
 6  
 7  body {
 8    font-family: "Inter";
 9    background-color: #1e2939;
10  }
11  
12  .font-space {
13    font-family: Space Grotesk;
14  }
15  
16  .font-orbitron {
17    font-family: "Orbitron";
18  }
19  
20  .font-inter {
21    font-family: "Inter";
22  }
23  
24  .font-mono {
25    font-family: Space Mono;
26  }
27  
28  .glass-container {
29    background: radial-gradient(
30      111.14% 111.14% at 8.37% 0%,
31      rgba(40, 100, 151, 0.36) 0%,
32      rgba(40, 100, 151, 0) 100%
33    );
34    border: 1px solid transparent;
35    border-image: radial-gradient(
36          94.31% 66.31% at -53.25% 10.23%,
37          #ffffff 0%,
38          rgba(255, 255, 255, 0.06) 100%
39        )
40        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
41      radial-gradient(
42          86.84% 30.42% at 129.28% 66.93%,
43          #2f78be 0%,
44          rgba(47, 120, 190, 0) 100%
45        )
46        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
47      radial-gradient(
48          41.06% 41.06% at 51.09% -22.85%,
49          #000000 0%,
50          rgba(255, 255, 255, 0) 100%
51        )
52        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
53  
54    backdrop-filter: blur(5px);
55  }
56  
57  .glass-container-full {
58    position: absolute;
59    background: radial-gradient(
60      111.14% 111.14% at 8.37% 0%,
61      rgba(40, 100, 151, 0.36) 0%,
62      rgba(40, 100, 151, 0) 100%
63    );
64    backdrop-filter: blur(22.61px);
65    border-radius: 1000px;
66    z-index: 1;
67    top: -10%;
68    left: 90%;
69  }
70  
71  .glass-container-full::before {
72    content: "";
73    position: absolute;
74    inset: 0;
75    padding: 1px; /* border thickness */
76    border-radius: 1000px;
77    background: radial-gradient(
78      circle at center,
79      rgba(255, 255, 255, 0.06),
80      rgba(47, 120, 190, 0.2),
81      rgba(0, 0, 0, 0.05)
82    );
83    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
84    -webkit-mask-composite: xor;
85    mask-composite: exclude;
86    z-index: -1;
87  }