.box-gradient { border: 10px solid transparent; background: linear-gradient( #ffffff, #ffffff) padding-box, linear-gradient(45deg, #FF52E5, #F6D242) border-box; border-radius: 14px; } .nice-bg { background-color: #000814 !important; background-size: 200% 200%!important; height: 100vh!important; } .nice-bg-sheet { background-color: #1e1f22 !important; } .bricks-bg { --s: 45px!important; /* control the size*/ --c1: #bb593e !important; --c2: #bb593e !important; --c3: #2c2e2a!important; --p:at 45% 40%,#0000 75%,; --g1:conic-gradient(var(--p) var(--c1) 0)!important; --g2:conic-gradient(var(--p) var(--c2) 0)!important; background: var(--g1),var(--g2) calc(2*var(--s)) 0, var(--g2) calc(3*var(--s)) var(--s), var(--g1) var(--s) var(--s) var(--c3)!important; background-size: calc(4*var(--s)) calc(2*var(--s))!important; } .nice-bg-border { border: 0.2rem solid #fff!important; border-radius: 2rem!important; padding: 0.4em!important; box-shadow: 0 0 .2rem #fff, 0 0 .2rem #fff, 0 0 2rem #bc13fe, 0 0 0.8rem #bc13fe, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #bc13fe!important; animation: pulsate 1.5s infinite alternate!important; } .white-text { color: #fff!important; } .neon-text { color: #fff!important; text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 11px #fff, 0 0 16px #bc13fe, 0 0 20px #bc13fe, 0 0 26px #bc13fe, 0 0 30px #bc13fe, 0 0 34px #bc13fe !important; } @keyframes pulsate { 100% { box-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #bc13fe, 0 0 80px #bc13fe, 0 0 90px #bc13fe, 0 0 100px #bc13fe, 0 0 150px #bc13fe; } 0% { box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #bc13fe, 0 0 45px #bc13fe, 0 0 55px #bc13fe, 0 0 70px #bc13fe, 0 0 80px #bc13fe; } }