* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;

display: flex;
  align-items: center;
  justify-content: center;

font-family:
    Arial,
    Helvetica,
    sans-serif;

background:
    radial-gradient(
      circle at 50% 45%,
      #241d25 0%,
      #100d12 48%,
      #050507 100%
    );
}

/* =========================================
   WALL
========================================= */

.scene {
  position: relative;

width: 100vw;
  height: 100vh;

display: flex;
  align-items: center;
  justify-content: center;

background:

radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 48, 184, 0.08),
      transparent 35%
    ),

linear-gradient(
      90deg,
      rgba(255,255,255,0.015) 1px,
      transparent 1px
    ),

linear-gradient(
      rgba(255,255,255,0.015) 1px,
      transparent 1px
    );

background-size:
    auto,
    45px 45px,
    45px 45px;
}

/* =========================================
   SIGN FRAME
========================================= */

.sign {

position: relative;

width: min(820px, 90vw);
  height: 360px;

display: flex;
  align-items: center;
  justify-content: center;

border:
    2px solid
    rgba(255,255,255,0.08);

border-radius: 14px;

background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.03),
      rgba(0,0,0,0.3)
    );

box-shadow:

inset 0 0 40px
      rgba(255,20,170,0.04),

0 30px 90px
      rgba(0,0,0,0.6);
}

/* =========================================
   NEON WORD
========================================= */

.tube-one {

position: relative;

transform:
    skewX(-8deg);

}

.tube-one span {

position: relative;

display: inline-block;

font-family:
    "Arial Rounded MT Bold",
    Arial,
    sans-serif;

font-size:
    clamp(90px, 15vw, 180px);

font-weight: 900;

letter-spacing:
    -8px;

color:
    #fff5fb;

/*
    Multiple shadows create the
    glowing tube effect.
  */

text-shadow:

0 0 2px #fff,

0 0 5px #fff,

0 0 10px #ff45c8,

0 0 20px #ff22bb,

0 0 40px #ff00aa,

0 0 75px #ff008c,

0 0 120px
      rgba(255,0,170,0.75);

animation:
    neonGlow 3s ease-in-out infinite;

}

/* =========================================
   FLICKERING
========================================= */

@keyframes neonGlow {

0%,
  18%,
  20%,
  22%,
  62%,
  64%,
  100% {

opacity: 1;

filter:
      brightness(1.15);
  }

19%,
  21%,
  63% {

opacity: 0.7;

filter:
      brightness(0.8);
  }

}

/* =========================================
   COLORED HALO
========================================= */

.tube-one::before {

content:
    "Neon";

position: absolute;

left: 0;
  top: 0;

font-family:
    "Arial Rounded MT Bold",
    Arial,
    sans-serif;

font-size:
    clamp(90px, 15vw, 180px);

font-weight:
    900;

letter-spacing:
    -8px;

color:
    transparent;

filter:
    blur(22px);

text-shadow:
    0 0 35px
      rgba(255,0,170,0.9),

0 0 80px
      rgba(255,0,170,0.75);

opacity:
    0.85;

pointer-events:
    none;
}

/* =========================================
   FAINT CYAN EDGE
========================================= */

.tube-one::after {

content:
    "Neon";

position: absolute;

left: 1px;
  top: 1px;

font-family:
    "Arial Rounded MT Bold",
    Arial,
    sans-serif;

font-size:
    clamp(90px, 15vw, 180px);

font-weight:
    900;

letter-spacing:
    -8px;

color:
    transparent;

text-shadow:
    0 0 10px
      rgba(120, 220, 255, 0.35);

pointer-events:
    none;
}

/* =========================================
   UNDERLINE
========================================= */

.sign::after {

content: "";

position: absolute;

left: 15%;
  right: 15%;

bottom: 68px;

height: 2px;

background:
    #ff35c7;

box-shadow:

0 0 5px #ff35c7,
    0 0 15px #ff35c7,
    0 0 35px
      rgba(255,0,170,0.7);

opacity:
    0.75;
}

/* =========================================
   TAGLINE
========================================= */

.tagline {

position: absolute;

bottom: 34px;

font-size: 10px;

font-weight: 700;

letter-spacing: 5px;

color:
    rgba(255,220,246,0.7);

text-shadow:
    0 0 8px
    rgba(255,50,200,0.7);
}

/* =========================================
   LIGHT REFLECTION ON WALL
========================================= */

.reflection {

position: absolute;

inset: -40px;

border-radius: 30px;

background:
    radial-gradient(
      ellipse at center,
      rgba(255,0,170,0.13),
      transparent 60%
    );

filter:
    blur(35px);

z-index: -1;
}

/* =========================================
   SMALL SWITCH
========================================= */

.switch {

position: fixed;

right: 28px;
  bottom: 28px;

width: 42px;
  height: 24px;

border-radius: 20px;

background:
    #303036;

border:
    1px solid
    rgba(255,255,255,0.1);

box-shadow:
    inset 0 2px 4px
    rgba(0,0,0,0.4);
}

.switch span {

position: absolute;

left: 4px;
  top: 4px;

width: 14px;
  height: 14px;

border-radius: 50%;

background:
    #ff4bca;

box-shadow:
    0 0 10px
    rgba(255,0,190,0.8);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

.sign {

height: 270px;

}

.tagline {

letter-spacing: 3px;

}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground