body {
    background-color: #1d2d87;
    display: flex;
    flex-direction: column; /* Stacks elements vertically */
    margin: 0; /* Remove default margin */
    padding: 0; /* Ensure no padding around the body */
    min-height: 100vh; /* Ensure it takes at least the full viewport height */
	overflow-x: hidden;
}

body img {
    z-index: 0;
    object-fit: fill;
    height: 100%;
    width: 100%;
    position: fixed;
}

#light {
    position: absolute;
    width: 200px; /* Size of the flashlight beam */
    height: 200px;
    border-radius: 50%; /* Makes the light circular */
    background: transparent;
    pointer-events: none; /* Ensures the flashlight doesn't block interactions */
    box-shadow: 0 0 0 9999px rgb(0, 0, 0); /* Creates the dark overlay */
    z-index: 10;
    mix-blend-mode: multiply; /* Ensures only the light area reveals content */
    filter: blur(80px); /* Applies a blur to the edges of the light for a smooth feathering effect */
	z-index:1000;
}

#input-form {
    position: fixed;
    top: 20px; /* Fix the input form to the bottom of the viewport */
	left:28%;
    width: 100%;
	height: 30px;
    max-width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:rgba(113, 199, 147, 0.361);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 0px 20px rgba(20, 174, 115, 0.769);
    gap: 1rem;
    z-index: 1005; /* Ensure it stays on top */
}

#name-input,
#message-input {
    width: 45%;
    padding: 5px;
	background-color: rgb(50, 140, 96);
    border: 1px solid rgba(64, 0, 255, 0);
    border-radius: 4px;
    font-size: 18px;
	font-family: "freight-big-pro", serif;
	font-weight: 700;
	font-style: normal;
	
}


#send-button {
    background-color: rgb(41, 135, 110) ;
    color: rgb(176, 255, 221);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
	font-family: "freight-big-pro", serif;
	font-weight: 700;
	font-style: normal;
}

#send-button:hover {
    background-color: #45a049;
}

.container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns chatroom to the top */
    width: 100vw;
    padding: 40px;
	
}

#chatroom {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 items per row */
    gap: 40px; /* Spacing between the boxes */
    list-style: none;
    width: 90%;
    padding: 40px;
    background-color: rgba(0, 255, 255, 0);
    z-index: 999; /* Ergb(64, 0, 255)op */
}

#chatroom li {
    height: 200px; /* Fixed height for each chat message */
    width: 200px; /* Fixed width for each chat message */
    overflow-y: auto; /* Enable a vertical scrollbar for long text */
    overflow-wrap: break-word;
    padding: 20px;
    border-radius: 4px;
    background-color: rgba(132, 95, 192, 0.525);
	text-shadow: 0 0 2px #032a1c;
	filter:drop-shadow(0 0 20px rgb(49, 195, 178) );
    color: #333;
	font-size:20px;
}

#toggle-shuffle {
    position: fixed;
    top: 20px; /* Position the button above the input form */
    right: 50px;
	background-color:rgba(113, 199, 147, 0.361);
    box-shadow: 0 0 20px rgba(28, 184, 124, 0.769);

    color: rgb(176, 255, 221);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 1005; /* Ensure it stays on top */
	height:50px;
	font-family: "freight-big-pro", serif;
	font-weight: 700;
	font-style: normal;
}

#toggle-shuffle:hover {
    background-color: #45a049;
}

.text{
font-family: "stevie-sans", sans-serif;
font-weight: 400;
font-style: normal;
}

.blurry-text {
	text-shadow: 0 0 30px #00f8ae;
 }

.title{
	font-family: "freight-big-pro", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 200px;
	z-index:1000;
	margin-top:100px;
	margin-left:30%;
	color:rgba(255, 255, 255, 0.136);

}
.description{	
	position: absolute;
	top: 250px;
	right:30px;
	z-index:1005;
	color:rgba(255, 255, 255, 0.568);
	font-size:13px;
 }