* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #0c0c14;
  min-height: 100vh;
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #FFFFFF;
  text-align: center;
}

.wordart-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px 0;
  perspective: 400px; 
}

.wordart-bottom-up {
  position: relative;
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 5.5rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 1px;
  transform: rotateX(45deg);
  transform-style: preserve-3d;
  background: linear-gradient(to bottom, #ffea00 0%, #ff3700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #fff;
}

.wordart-bottom-up::before {
  content: attr(data-text);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -75%) translateZ(-120px) scale(1.5);
  transform-origin: bottom center;
  background: linear-gradient(to bottom, #00ffff, #0044ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.3;
  z-index: -1;
  font-size: 1em;
  white-space: nowrap;
  
}

.rainbow-text {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
}