@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700"); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { font-family: Raleway, sans-serif; background-color: #000; color: #fff; font-size: 24px; } /* unvisited link */ a:link { color: white; } /* visited link */ a:visited { color: white; } /* mouse over link */ a:hover { color: white; font-weight: bold; } /* selected link */ a:active { color: white; } .glow { background-color: white; /* for the 1px in the center */ box-shadow: 0 0 50px 70px white; } .content { width: 95%; max-width: 40ch; padding: 0em 0em; } .marquee { position: relative; width: 100%; height: 2em; font-size: 5em; display: grid; place-items: center; overflow: hidden; } .marquee_text { position: absolute; min-width: 100%; white-space: nowrap; -webkit-animation: marquee 16s infinite linear; animation: marquee 16s infinite linear; } @-webkit-keyframes marquee { from { translate: 70%; } to { translate: -70%; } } @keyframes marquee { from { translate: 70%; } to { translate: -70%; } } .marquee_blur { position: absolute; inset: 0; display: grid; place-items: center; background-color: black; background-image: linear-gradient(to right, white, 1rem, transparent 50%), linear-gradient(to left, white, 1rem, transparent 50%); filter: contrast(15); } .marquee_blur p { filter: blur(0.07em); } .marquee_clear { position: absolute; inset: 0; display: grid; place-items: center; } .text { margin-block: 2em; padding: 2rem; filter: blur(0.8px); text-shadow: 2px 2px 4px #000000; } /* -- paprsky -- */ @keyframes rotate { to { transform: rotate(1turn); } } .light-rays { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(#fff, black); overflow: hidden; --a: rgba(3, 10, 0, 0.1); --b: rgba(3, 10, 0, 1); --c: rgba(3, 10, 0, 0.5); --d: rgba(3, 10, 0, 0.68); } .light-rays:before, .light-rays:after { content: ""; position: absolute; top: 50%; left: 50%; margin: -100vmax; width: 200vmax; height: 200vmax; opacity: 0.5; } div:before { background: conic-gradient( var(--a), var(--b), var(--c), var(--d), var(--a), var(--d), var(--a), var(--d), var(--b), var(--c), var(--d), var(--a), var(--b) ); animation: rotate 4s infinite; } div:after { background: conic-gradient( var(--c), transparent, var(--c), var(--a), transparent, var(--b), var(--c), transparent, var(--c), var(--a) ); animation: rotate 2s 4s infinite reverse; }