@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {

	display: flex;
	justify-content: center;
	align-items: center;

	background-color: orange;
	overflow-x: hidden;

	font-family: "arial", sans-serif;
	font-optical-sizing: auto;
}

#message {
	position: absolute;

	display: flex;
	justify-content: center;
	align-items: center;
text-align:center;
	flex-direction: column;

	width: 90%;
	height: 90%;
}

#text1 {
	font-size: 35px;
	font-weight: 600;
	margin: 1%;
}

#text2 {
	font-size: 3.5rem;
	font-weight: 700;
	margin: 1%;
}

#text3 {           
	font-size: 18px;
	width: 50%;
	min-width: 40%;
	text-align: center;
	margin: 1%;
}

#text4 {
	font-size: 18px;
	width: 50%;
	min-width: 40%;
	text-align: center;
	margin: 1%;
}

#charactersDiv {
	position: absolute;
	width: 105%;
	height: 95%;
}

.characters {
	width: 18%;
	height: 18%;
	position: absolute;
}

/* Make the container fill the entire viewport and sit on top */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* hide scrollbars if anything overflows */
}

#trail-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: none; /* optional: hide the default cursor if you want just the trail */
}

/* Each dot is absolutely positioned, tiny circle */
.dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none; /* so it doesn’t block mouse events */
  transform: translate(-50%, -50%); /* center it at the exact mouse point */
  animation: fadeScale 0.6s forwards;
}

/* The fade + scale animation: shrink and fade out */
@keyframes fadeScale {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
}