body { width: 100vw; height: 100vh; overflow: hidden; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; font-family: "Medium"; color: white; user-select: none; } :root{ --px-vh: 0.0925251046025104vh; } .wrapper { position: relative; outline: 1px solid black; width: calc(var(--px-vh)*454); height: calc(var(--px-vh)*212); border-radius: calc(var(--px-vh)*16); background: radial-gradient(136.68% 136.68% at 50% 122.12%, rgba(67, 142, 255, 0.08) 0%, rgba(54, 188, 255, 0) 100%), radial-gradient(71.49% 114.51% at 47.43% 76.72%, #000916 0%, #000000 100%); } .title { font-family: "Bold"; width: 100%; text-align: center; font-size: calc(var(--px-vh)*32); margin-top: calc(var(--px-vh)*20); background: radial-gradient( 188.7% 450.15% at 45.09% 50%, #0077ff6f 0%, #03102300 100% ); -webkit-text-stroke: calc(var(--px-vh)*1) #0077ff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; filter: drop-shadow(0 0 calc(var(--px-vh)*10) rgb(0, 132, 255)); text-shadow: 0 0 calc(var(--px-vh)*15) rgba(0, 132, 255, 0.109); } .description { width: 100%; text-align: center; font-size: calc(var(--px-vh)*16); margin-top: calc(var(--px-vh)*25); opacity: 0.5; } .buttons { margin: auto; width: calc(var(--px-vh)*400); display: flex; justify-content: space-between; position: absolute; bottom: calc(var(--px-vh)*20); left: 0; right: 0; gap: calc(var(--px-vh)*10); } .button { width: 100%; background: radial-gradient(188.7% 450.15% at 45.09% 50%, #054288 0%, #031023 100%); padding: calc(var(--px-vh)*10); display: flex; justify-content: center; align-items: center; font-size: calc(var(--px-vh)*16); cursor: pointer; border: 1px solid; border-image-source: radial-gradient(191.74% 839.15% at 45.09% 50%, #36ABFF 0%, rgba(54, 188, 255, 0) 100%); border-image-slice: 1; }