::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #121212;
}
::-webkit-scrollbar-thumb {
background-color: #181818;
}
::-webkit-scrollbar-thumb:hover {
background-color: #202020;
}
::-webkit-scrollbar-button {
background-color: #181818;
}
::-webkit-scrollbar-button:hover {
background-color: #202020;
}
:root {
--btn-duration-slow: 2s;
--btn-duration-normal: 3s;
--btn-duration-fast: 5s;
--btn-default-color: #7cfc00;
--btn-blue-color: #00bcd4;
--btn-purple-color: #772aff;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #151515;
}
.xcontainer {
max-width: 800px;
margin: auto;
padding: 20px;
}
.neon-title {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 60px;
font-family: monospace;
}
.neon-title .text {
position: relative;
}
.neon-title .text h1 {
font-size: 90px;
font-weight: bolder;
text-transform: uppercase;
letter-spacing: 3px;
color: transparent;
text-shadow: 0 0 25px #00bcd4;
-webkit-text-stroke: 2px #00bcd4;
}
.neon-title .text h1:nth-child(2) {
position: absolute;
top: 0;
left: 0;
color: #00bcd4;
animation: neon-title 3s ease-in-out infinite;
}
@keyframes neon-title {
0%,
100% {
clip-path: polygon(0% 51%, 13% 48%, 26% 50%, 37% 53%, 50% 55%, 61% 58%, 76% 60%, 91% 59%, 100% 51%, 100% 100%, 0 100%);
}
50% {
clip-path: polygon(0 51%, 9% 57%, 21% 62%, 36% 63%, 49% 57%, 60% 50%, 75% 46%, 91% 44%, 100% 42%, 100% 100%, 0 100%);
}
}
.neon-block .block {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 30px auto;
width: 120px;
height: 140px;
background: linear-gradient(45deg, #272325 40%, #020104);
color: #fff;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 4px;
font-family: monospace;
}
.neon-block .block:after {
content: "";
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
z-index: -1;
background: linear-gradient(45deg, #ff005e, #fbff00);
animation: neon-block 1.5s linear infinite;
}
.neon-block .block .rainbow {
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
filter: blur(15px);
z-index: -2;
}
.neon-block .block .rainbow:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(315deg, #ff005e, #fbff00);
}
.neon-block .block .rainbow:after {
animation: neon-block 1.5s linear infinite;
}
@keyframes neon-block {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
.neon-button {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 10px;
margin-top: 30px;
margin: 30px;
}
@media (min-width: 340px) {
.neon-button {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.neon-button {
grid-template-columns: repeat(3, 1fr);
}
}
.neon-button .btn {
position: relative;
padding: 5px 5px;
font-size: 18px;
border-width: 0;
border-radius: 5px;
background-color: transparent;
transition: all 0.25s;
cursor: pointer;
}
.neon-button .btn.btn-neon {
color: var(--btn-default-color);
text-transform: uppercase;
letter-spacing: 3px;
overflow: hidden;
margin: 5px;

}
.neon-button .btn.btn-neon span {
position: absolute;
transition: all 0.25s;
animation-duration: var(--btn-duration-slow);
animation-iteration-count: infinite;
}
.neon-button .btn.btn-neon span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent 30%, var(--btn-default-color));
animation-name: btn-neon-border-top;
}
a {
  text-decoration: none;
}
.neon-button .btn.btn-neon span:nth-child(2) {
right: 0;
top: -100%;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent 30%, var(--btn-default-color));
animation-name: btn-neon-border-right;
animation-delay: calc(var(--btn-duration-slow) / 4);
}
.neon-button .btn.btn-neon span:nth-child(3) {
right: -100%;
bottom: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent 30%, var(--btn-default-color));
animation-name: btn-neon-border-bottom;
animation-delay: calc(var(--btn-duration-slow) / 4 * 2);
}
.neon-button .btn.btn-neon span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent 30%, var(--btn-default-color));
animation-name: btn-neon-border-left;
animation-delay: calc(var(--btn-duration-slow) / 4 * 3);
}
.neon-button .btn.btn-neon:hover {
background-color: var(--btn-default-color);
}
.neon-button .btn.btn-neon:hover.btn-neon {
color: #151515;
box-shadow: 0 0 10px var(--btn-default-color), 0 0 30px var(--btn-default-color), 0 0 50px var(--btn-default-color);
}
.neon-button .btn.btn-neon.btn-blue {
color: var(--btn-blue-color);
}
.neon-button .btn.btn-neon.btn-blue span {
animation-duration: var(--btn-duration-normal);
}
.neon-button .btn.btn-neon.btn-blue span:nth-child(1) {
background: linear-gradient(90deg, transparent 30%, var(--btn-blue-color));
}
.neon-button .btn.btn-neon.btn-blue span:nth-child(2) {
background: linear-gradient(180deg, transparent 30%, var(--btn-blue-color));
animation-delay: calc(var(--btn-duration-normal) / 4);
}
.neon-button .btn.btn-neon.btn-blue span:nth-child(3) {
background: linear-gradient(270deg, transparent 30%, var(--btn-blue-color));
animation-delay: calc(var(--btn-duration-normal) / 4 * 2);
}
.neon-button .btn.btn-neon.btn-blue span:nth-child(4) {
background: linear-gradient(360deg, transparent 30%, var(--btn-blue-color));
animation-delay: calc(var(--btn-duration-normal) / 4 * 3);
}
.neon-button .btn.btn-neon.btn-blue:hover {
background-color: var(--btn-blue-color);
}
.neon-button .btn.btn-neon.btn-blue:hover.btn-neon {
box-shadow: 0 0 10px var(--btn-blue-color), 0 0 30px var(--btn-blue-color), 0 0 50px var(--btn-blue-color);
}
.neon-button .btn.btn-neon.btn-purple {
color: var(--btn-purple-color);
}
.neon-button .btn.btn-neon.btn-purple span:nth-child(1) {
background: linear-gradient(90deg, transparent 30%, var(--btn-purple-color));
}
.neon-button .btn.btn-neon.btn-purple span:nth-child(2) {
background: linear-gradient(180deg, transparent 30%, var(--btn-purple-color));
}
.neon-button .btn.btn-neon.btn-purple span:nth-child(3) {
background: linear-gradient(270deg, transparent 30%, var(--btn-purple-color));
}
.neon-button .btn.btn-neon.btn-purple span:nth-child(4) {
background: linear-gradient(360deg, transparent 30%, var(--btn-purple-color));
}
.neon-button .btn.btn-neon.btn-purple:hover {
background-color: var(--btn-purple-color);
}
.neon-button .btn.btn-neon.btn-purple:hover.btn-neon {
box-shadow: 0 0 10px var(--btn-purple-color), 0 0 30px var(--btn-purple-color), 0 0 50px var(--btn-purple-color);
}
.neon-button .btn.btn-neon.btn-slow span {
animation-duration: var(--btn-duration-slow);
}
.neon-button .btn.btn-neon.btn-slow span:nth-child(2) {
animation-delay: calc(var(--btn-duration-slow) / 4);
}
.neon-button .btn.btn-neon.btn-slow span:nth-child(3) {
animation-delay: calc(var(--btn-duration-slow) / 4 * 2);
}
.neon-button .btn.btn-neon.btn-slow span:nth-child(4) {
animation-delay: calc(var(--btn-duration-slow) / 4 * 3);
}
.neon-button .btn.btn-neon.btn-normal span {
animation-duration: var(--btn-duration-normal);
}
.neon-button .btn.btn-neon.btn-normal span:nth-child(2) {
animation-delay: calc(var(--btn-duration-normal) / 4);
}
.neon-button .btn.btn-neon.btn-normal span:nth-child(3) {
animation-delay: calc(var(--btn-duration-normal) / 4 * 2);
}
.neon-button .btn.btn-neon.btn-normal span:nth-child(4) {
animation-delay: calc(var(--btn-duration-normal) / 4 * 3);
}
.neon-button .btn.btn-neon.btn-fast span {
animation-duration: var(--btn-duration-fast);
}
.neon-button .btn.btn-neon.btn-fast span:nth-child(2) {
animation-delay: calc(var(--btn-duration-fast) / 4);
}
.neon-button .btn.btn-neon.btn-fast span:nth-child(3) {
animation-delay: calc(var(--btn-duration-fast) / 4 * 2);
}
.neon-button .btn.btn-neon.btn-fast span:nth-child(4) {
animation-delay: calc(var(--btn-duration-fast) / 4 * 3);
}
@keyframes btn-neon-border-top {
from {
left: -100%;
}
to {
left: 100%;
}
}
@keyframes btn-neon-border-right {
from {
top: -100%;
}
to {
top: 100%;
}
}
@keyframes btn-neon-border-bottom {
from {
right: -100%;
}
to {
right: 100%;
}
}
@keyframes btn-neon-border-left {
from {
bottom: -100%;
}
to {
bottom: 100%;
}
}
.neon-cards {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
margin-top: 60px;
}
@media (min-width: 440px) {
.neon-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.neon-cards {
grid-template-columns: repeat(3, 1fr);
}
}
.neon-cards .card {
position: relative;
padding: 100px 20px;
color: #f2f2f2;
font-family: monospace;
line-height: 1.5;
background: linear-gradient(90deg, #010d31 0%, #010d31 50%, #010615 50%);
}
.neon-cards .card:before,
.neon-cards .card:after {
content: "";
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
z-index: -1;
}
.neon-cards .card:after {
z-index: -2;
filter: blur(30px);
}
.neon-cards .card:nth-child(1):before,
.neon-cards .card:nth-child(1):after {
background: linear-gradient(235deg, #89ff00, #010615, #00bcd4);
}
.neon-cards .card:nth-child(2):before,
.neon-cards .card:nth-child(2):after {
background: linear-gradient(235deg, #ff005e, #010615, #fbff00);
}
.neon-cards .card:nth-child(3):before,
.neon-cards .card:nth-child(3):after {
background: linear-gradient(235deg, #772aff, #010615, #2196f3);
}
.neon-cards .card h3 {
margin-bottom: 10px;
}
.neon-loader {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
margin-top: 60px;
margin-top: 60px;
margin-bottom: 60px;
}
@media (min-width: 440px) {
.neon-loader {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.neon-loader {
grid-template-columns: repeat(3, 1fr);
}
}
.neon-loader .loader {
position: relative;
width: 14rem;
height: 14rem;
margin: 30px;
background: linear-gradient(45deg, transparent 60%, #7cfc00);
border-radius: 50%;
animation: neon-loader 1s linear 0s infinite;
}
.neon-loader .loader:after {
content: "";
position: absolute;
top: 1rem;
left: 1rem;
width: 12rem;
height: 12rem;
background-color: #151515;
border-radius: 50%;
}
.neon-loader .loader:before {
content: "";
position: absolute;
top: 1rem;
left: 1rem;
width: 12rem;
height: 12rem;
background: linear-gradient(45deg, transparent 30%, #7cfc00);
filter: blur(30px);
border-radius: 50%;
}
.neon-loader .loader.loader-blue {
background: linear-gradient(45deg, transparent 60%, #00bcd4);
animation: neon-loader-blue 3s linear 0s infinite;
}
.neon-loader .loader.loader-blue:before {
background: linear-gradient(45deg, transparent 30%, #00bcd4);
}
.neon-loader .loader.loader-purple {
background: linear-gradient(45deg, transparent 60%, #772aff);
animation: neon-loader-purple 5s linear 0s infinite;
}
.neon-loader .loader.loader-purple:before {
background: linear-gradient(45deg, transparent 30%, #772aff);
}
@keyframes neon-loader {
from {
transform: rotate(0deg);
filter: hue-rotate(0deg);
}
to {
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
@keyframes neon-loader-blue {
from {
transform: rotate(0deg);
filter: hue-rotate(-120deg);
}
to {
transform: rotate(360deg);
filter: hue-rotate(240deg);
}
}
@keyframes neon-loader-purple {
from {
transform: rotate(0deg);
filter: hue-rotate(-360deg);
}
to {
transform: rotate(360deg);
filter: hue-rotate(0deg);
}
}