/* =====================
   Base Reset
===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #b61313;
}

body {
  background: transparent;
  color: #fff;
  font-family: 'Merriweather', serif;
  position: relative;
  z-index: 2;
  -webkit-font-smoothing: antialiased;
}

/* Layered background: marquee text below the image */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	/* canvas-based background set by JavaScript */
	background-image: none;
	background-repeat: repeat;
	mix-blend-mode: normal;
	animation: marquee 80s linear infinite -5s;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url('../assets/images/body-white-dots-background-ultrawide.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

@keyframes marquee {
	from { background-position: 0 0; }
	to { background-position: -2000px 0; }
}