@import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");

:root {
  --neonblue: #1f51ff;
  --neonpink: #ff10f0;
  --neonred: #ff3131;
  --neongreen: #0fff50;
  --neonyellow: #fff01f;
}

/* Global Styles */
body2 {
  background: black;
  color: white;
  font-size: 6em;
  font-family: "Tilt Neon", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  min-height: 100vh;
  align-items: center;
}

/* Generic flicker animation using a custom property for color */
@keyframes flicker {
  0%,
  100% {
    box-shadow: inset 0 0 7px var(--wrapper-color),
      inset 0 0 5px var(--wrapper-color), inset 0 0 10px var(--wrapper-color),
      inset 0 0 20px var(--wrapper-color), inset 0 0 30px var(--wrapper-color),
      0 0 7px var(--wrapper-color), 0 0 10px var(--wrapper-color),
      0 0 10px var(--wrapper-color), 0 0 20px var(--wrapper-color),
      0 0 50px var(--wrapper-color);
  }
  50% {
    box-shadow: inset 0 0 5px var(--wrapper-color),
      inset 0 0 3px var(--wrapper-color), inset 0 0 5px var(--wrapper-color),
      inset 0 0 15px var(--wrapper-color), inset 0 0 25px var(--wrapper-color),
      0 0 5px var(--wrapper-color), 0 0 8px var(--wrapper-color),
      0 0 8px var(--wrapper-color), 0 0 15px var(--wrapper-color),
      0 0 15px var(--wrapper-color);
  }
}

/* Common wrapper styles */
.wrapperblue,
.wrapperpink {
  border: 2px solid white;
  border-radius: 15px;
  animation: flicker 1.2s infinite alternate;
}

/* Blue wrapper specific */
.wrapperblue {
  display: block;
  margin: 30px auto;
  padding: 10px;
  max-width: 960px;
  --wrapper-color: var(--neonblue);
}

/* Pink wrapper specific */
.wrapperpink {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  padding: 20px;
  --wrapper-color: var(--neonpink);
}

/* Neon text styles (4px stroke) */
.blue,
.pink,
.red,
.green,
.yellow {
  -webkit-text-stroke-width: 4px;
}

.blue {
  -webkit-text-stroke-color: var(--neonblue);
  text-shadow: 0 0 15px var(--neonblue), 0 0 20px var(--neonblue),
    0 0 20px var(--neonblue), 0 0 40px var(--neonblue),
    0 0 100px var(--neonblue);
}

.pink {
  -webkit-text-stroke-color: var(--neonpink);
  text-shadow: 0 0 7px var(--neonpink), 0 0 15px var(--neonpink),
    0 0 40px var(--neonpink), 0 0 40px var(--neonpink);
}

.red {
  -webkit-text-stroke-color: var(--neonred);
  text-shadow: 0 0 7px var(--neonred), 0 0 15px var(--neonred),
    0 0 40px var(--neonred), 0 0 40px var(--neonred);
}

.green {
  -webkit-text-stroke-color: var(--neongreen);
  text-shadow: 0 0 7px var(--neongreen), 0 0 15px var(--neongreen),
    0 0 40px var(--neongreen), 0 0 40px var(--neongreen);
}

.yellow {
  -webkit-text-stroke-color: var(--neonyellow);
  text-shadow: 0 0 7px var(--neonyellow), 0 0 15px var(--neonyellow),
    0 0 40px var(--neonyellow), 0 0 40px var(--neonyellow);
}

/* Small neon text styles */
.pinksmall {
  -webkit-text-stroke: 2px var(--neonpink);
  text-shadow: 0 0 3px var(--neonpink), 0 0 7px var(--neonpink),
    0 0 7px var(--neonpink), 0 0 12px var(--neonpink);
}

.bluesmall {
  -webkit-text-stroke: 2px var(--neonblue);
  text-shadow: 0 0 5px var(--neonblue), 0 0 7px var(--neonblue),
    0 0 15px var(--neonblue), 0 0 15px var(--neonblue), 0 0 15px var(--neonblue);
}

/* Additional element styling */
.symbols i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 110px;
  text-align: center;
}

.fa-music {
  margin-right: 20px;
}

.textwraptagline {
  font-size: 0.475em;
  margin-top: 10px;
}

.textwrap {
  line-height: 0.99em;
  margin-bottom: 10px;
}

.micHandInfo {
  max-width: 380px;
}

.micNInfoWrapper {
  display: flex;
  align-items: center;
}