body {
  margin: 0;
  background: black;
  color: white;
  font-family: Impact, Comic Sans MS, Arial;
  text-align: center;
  overflow-x: hidden;
}

.static {
  position: fixed;
  inset: 0;
  background: url("assets/gifs/noise.gif");
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
}

.glitch {
  font-size: 64px;
  position: relative;
  color: hotpink;
  text-shadow: 2px 2px cyan;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
}

.glitch::before { color: cyan; animation: glitch1 0.3s infinite; }
.glitch::after { color: red; animation: glitch2 0.2s infinite; }

@keyframes glitch1 { 0% { transform: translate(2px,-2px); } 100% { transform: translate(-2px,2px); } }
@keyframes glitch2 { 0% { transform: translate(-2px,2px); } 100% { transform: translate(2px,-2px); } }

.big { font-size: 80px; }

.warning { font-size: 18px; color: yellow; }

.buttons { margin-top: 30px; }

.btn {
  display: inline-block;
  padding: 15px 25px;
  margin: 10px;
  background: lime;
  color: black;
  font-weight: bold;
  text-decoration: none;
  border: 3px dashed hotpink;
  cursor: pointer;
}

.btn:hover { background: hotpink; }

.float { position: absolute; animation: drift 6s infinite alternate; }
@keyframes drift { from {transform: translateY(0);} to {transform: translateY(50px);} }

.artzone marquee { color: cyan; font-size: 22px; }

.blingee-chaos img { width: 120px; margin: 10px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 15px;
  padding: 20px;
}

.gallery img {
  width: 100%;
  border: 6px solid hotpink;
  transform: rotate(-1deg);
}

.gallery img:hover { transform: scale(1.1) rotate(2deg); }

.back { margin: 40px; }

.noise { position: fixed; inset: 0; opacity: 0.1; pointer-events: none; }