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 }