a {
	text-decoration: underline !important;
}

	a:hover {
		color: #fe5122;
	}

h1 {
	font-size: 2rem;
}

ul.text-danger {
	border: 1px solid red;
	padding: 1rem;
	margin: 1rem 0;
}

.audio-player {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #222;
	padding: 10px;
	border-radius: 8px;
	color: white;
}

	.audio-player button {
		background: none;
		border: none;
		font-size: 1.5rem;
		color: white;
		cursor: pointer;
	}

	.audio-player input[type=range] {
		width: 100px;
	}


.avatar-frame {
	width: 400px;
	height: 400px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	margin: 20px;
	border: 5px solid #FF0000;
	display: inline-block;
	box-shadow: 0 0 0 10px #FF4500, 0 0 0 15px #8B0000;
}

	.avatar-frame img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.mud-alert-message {
	text-shadow: 0px 2px 4px #000;
}

.mud-button.mud-primary:hover {
	color: #000000; /* Text color on hover (black for contrast) */
}

.no-hover-border {
	border-color: #757575; /* Example color - adjust as needed */
}

	.no-hover-border:hover {
		border-color: darkorange; /* Same color to prevent change on hover */
	}

.other-player-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 30;
	display: block;
	background-size: cover;
	background-position: center;
	border: 1px solid #c90000;
}

	.other-player-avatar.idle {
		opacity: .4;
		border: 1px solid #000000;
	}


/* For the list of all available avatars to pick from */
.spooky-circle {
	/* Basic shape and positioning */
	width: 200px; /* Adjust as needed */
	height: 200px; /* Should be the same as width for a perfect circle */
	border-radius: 50%; /* Makes the div circular */
	overflow: hidden; /* Hides any part of the image outside the circle */
	position: relative; /* For absolute positioning of the frame */
	/* Spooky red color scheme */
	background: #1a0000; /* Very dark red background */
	border: 5px solid #8b0000; /* Dark red border */
	box-shadow: 0 0 20px #ff0000, /* Red glow */
	0 0 40px #ff0000, /* More intense red glow */
	0 0 60px #ff0000; /* Even more intense red glow for depth */
	margin: 3rem;
	display: inline-block;
	cursor: pointer;
}
	/* For the image */
	.spooky-circle img {
		width: 100%; /* Image fills the div */
		height: auto; /* Maintain aspect ratio */
		display: block; /* Removes any extra space below the image */
	}


.text-danger {
	color: red;
}



.typing-container {
	/*width: 100%;*/
	flex-grow: 1;
	overflow: hidden;
	border-right: transparent; /* .15em solid orange; /* The typewriter cursor */
	white-space: nowrap; /* Initially, to set up the animation */
	animation: typing 8s steps(40, end), blink .5s step-end infinite alternate;
}

/* Initially hide overflow to simulate typing */
#typing-text {
	width: 0;
	overflow: hidden;
	white-space: nowrap;
}



@media (max-width: 600px) {
	.avatar-frame {
		width: 90%;
		height: auto;
		margin: 0 1rem 2rem 1rem;
		display: block;
	}

	.spooky-circle {
		width: 100px;
		height: 100px;
		margin: 2rem;
	}
}


/* For typewrite errect */
@keyframes blink {
	50% {
		border-color: transparent;
	}
}