@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

 * {
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
}
 *::selection {
	 background: #fd5d8d;
	 color: #f1034a;
	 color: #270245;
}
 html, body {
	 width: 100%;
	 height: 100%;
}
 body {
	 position: relative;
	 background: #000;
	 overflow: hidden;
}
 body:before {
	 content: '';
	 position: absolute;
	 left: 0;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 100%);
	 z-index: 500;
	 mix-blend-mode: overlay;
	 pointer-events: none;
}
 .noise {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100vw;
	 height: 100vh;
	 overflow: hidden;
	 z-index: 400;
	 opacity: 0.8;
	 pointer-events: none;
}
 .noise:before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 background: url('https://ice-creme.de/images/background-noise.png');
	 pointer-events: none;
}
 .noise-moving {
	 opacity: 1;
	 z-index: 450;
}
 .noise-moving:before {
	 will-change: background-position;
	 animation: noise 1s infinite alternate;
}
 .scanlines {
	 position: fixed;
	 left: 0;
	 top: 0;
	 width: 100vw;
	 height: 100vh;
	 pointer-events: none;
	 z-index: 300;
	 opacity: 0.6;
	 will-change: opacity;
	 animation: opacity 3s linear infinite;
}
 .scanlines:before {
	 content: '';
	 position: absolute;
	 left: 0;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 pointer-events: none;
	 background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
	 background-size: 100% 4px;
	 will-change: background, background-size;
	 animation: scanlines 0.2s linear infinite;
}
 .intro-wrap {
	 position: fixed;
	 top: 0;
	 left: 0;
	 font-family: 'Press Start 2P', cursive;
	 color: #fff;
	 font-size: 2rem;
	 width: 100vw;
	 height: 100vh;
	 background: #2b52ff;
	 z-index: 200; /* below everything else but above body background */

}
 .intro-wrap .noise:before {
	 background-size: 200%;
}
 .intro-wrap .play {
	 position: absolute;
	 left: 2rem;
	 top: 2rem;
	 will-change: text-shadow;
	 animation: rgbText 2s steps(9) 0s infinite alternate;
}
 .intro-wrap .play .char {
	 will-change: opacity;
	 animation: type 1.2s infinite alternate;
	 animation-delay: calc(60ms * var(--char-index));
}
 .intro-wrap .time {
	 position: absolute;
	 right: 2rem;
	 top: 2rem;
	 will-change: text-shadow;
	 animation: rgbText 1s steps(9) 0s infinite alternate;
}
 .intro-wrap .recordSpeed {
	 position: absolute;
	 left: 2rem;
	 bottom: 2rem;
	 will-change: text-shadow;
	 animation: rgbText 1s steps(9) 0s infinite alternate;
}

/* Content */
.content {
  position: relative;
  z-index: 1000; /* above background */
  margin-top: 5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card {
  position: relative;
  background: #1e1e1e;
  color: #f0f0f0;
  padding: 2rem;
  margin: 1rem auto;
  border-radius: 8px;
  border: 2px solid #444;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  font-family: 'IBM Plex Mono', monospace;
  max-width: 800px;
  text-align: center;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  border-radius: 8px;
  z-index: 0;
}

.card:first-child {
  margin-top: 2rem;
}

/* --- Card Links --- */
.card a {
  color: inherit !important;
  text-decoration: none !important; 
  position: relative;
  z-index: 1;
  transition: color 0.2s;
  animation: cardLinkGlitch 1.5s steps(4) infinite alternate;
}

.card a:hover {
  color: #fd5d8d !important;
  text-decoration: underline !important;
}

@keyframes cardLinkGlitch {
  0%, 100% {
    text-shadow: 1px 0 0 #f0f0f0, -1px 0 0 #f0f0f0;
  }
  25% {
    text-shadow: 1px 0 1px #fd5d8d, -1px 0 1px #0ff;
  }
  50% {
    text-shadow: 0 1px 0 #f0f0f0, 0 -1px 0 #0ff;
  }
  75% {
    text-shadow: 1px 1px 0 #fd5d8d, -1px -1px 0 #0ff;
  }
}

/* --- Mobile Adjustments --- */
@media (max-width: 600px) {
  .content {
    padding: 1rem;
    margin-top: 5vh;
  }

  .card {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .intro-wrap {
    font-size: 1.5rem;
  }
}



/* Animations */
 @keyframes noise {
	 0%, 100% {
		 background-position: 0 0;
	}
	 10% {
		 background-position: -5% -10%;
	}
	 20% {
		 background-position: -15% 5%;
	}
	 30% {
		 background-position: 7% -25%;
	}
	 40% {
		 background-position: 20% 25%;
	}
	 50% {
		 background-position: -25% 10%;
	}
	 60% {
		 background-position: 15% 5%;
	}
	 70% {
		 background-position: 0 15%;
	}
	 80% {
		 background-position: 25% 35%;
	}
	 90% {
		 background-position: -10% 10%;
	}
}
 @keyframes opacity {
	 0% {
		 opacity: 0.6;
	}
	 20% {
		 opacity: 0.3;
	}
	 35% {
		 opacity: 0.5;
	}
	 50% {
		 opacity: 0.8;
	}
	 60% {
		 opacity: 0.4;
	}
	 80% {
		 opacity: 0.7;
	}
	 100% {
		 opacity: 0.6;
	}
}
 @keyframes scanlines {
	 from {
		 background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
		 background-size: 100% 4px;
	}
	 to {
		 background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
		 background-size: 100% 4px;
	}
}
 @keyframes rgbText {
	 0% {
		 text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	 25% {
		 text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	 45% {
		 text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
	}
	 50% {
		 text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
	}
	 55% {
		 text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	 90% {
		 text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
	}
	 100% {
		 text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
	}
}
 @keyframes type {
	 0%, 19% {
		 opacity: 0;
	}
	 20%, 100% {
		 opacity: 1;
	}
}