.main-menu {
	font-family: Poppins;
	color: white;
	font-size: 32px;

	&.hidden {
		opacity: 0;
	}

	> .header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		position: relative; /* Ensure child elements use this as reference */
		width: 100%;

		#text-container {
			width: 50vw;
			//overflow: hidden;
			background-color: transparent;
			text-shadow: 1px 1px 0 #edeee9;

			h1 {
				animation: pop-up 0.08s;
				margin-top: 5px;
				font-size: 128px;
				font-weight: 800;
				width: 100%;
				position: relative; /* Ensure it appears on top */
				z-index: 2; /* Higher z-index brings it in front */
				margin-left: 10px;
			}

			p {
				font-size: 32px;
				font-weight: 800;
				width: 100%;
				z-index: 10;
				position: absolute; /* Allows it to be placed behind */
				top: 0; /* Adjust position to align behind h1 */
				left: 0;
				z-index: 1; /* Lower z-index places it behind */
				margin-left: 10px;
			}
		}

		> .dropdown{
			display: flex;
			margin-left:10px;
			> .button {
				background-color: rgba(0, 0, 0, 0.5);
				color: #aaa;
				border-radius: 10px;
				cursor: pointer;
				pointer-events: all;
				padding: 10px;
				font-weight: 600;
	
				&:hover {
					color: #fff;
					background-color: #4834d4;
				}
	
				> .gametype {
	
					&:hover {
						color: #fff;
						background-color: #e84118;
					}
				}
			}
			> .gametypes{
				> .button {
					background-color: rgba(0, 0, 0, 0.5);
					color: #aaa;
					border-radius: 10px;
					cursor: pointer;
					pointer-events: all;
					padding: 10px;
					font-weight: 600;
					margin-left:5px;
		
					&:hover {
						color: #fff;
						background-color: #4834d4;
					}
		
					> .gametype {
		
						&:hover {
							color: #fff;
							background-color: #e84118;
						}
					}
				}
			}
		}

		
	}

	h1 {
		font-size: 128px;
		font-weight: 800;
	}

	> .content {
		gap: 32px;
		pointer-events: all;
		width: 100%;

		> .lobby-list {
			width: 75%;
			flex-direction: column;
			gap: 5px;
			flex-shrink: 0;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 16px;

			.title {
				font-size: 48px;
				font-family: Poppins;
				color: #fff;
				flex-shrink: 0;
			}

			> .content {
				flex-direction: column;
				flex-grow: 1;
				gap: 5px;
				overflow: scroll;
				width: 100%;

				> .button {
					background-color: rgba(0, 0, 0, 0.5);
					color: #aaa;
					padding: 10px;
					border-radius: 8px;
					gap: 2px;
					width: 280px;
					cursor: pointer;
					width: 100%;
					flex-direction: column;
					pointer-events: all;

					.title {
						flex-grow: 1;
						font-weight: bold;
						font-size: 32px;
					}

					.meta {
						gap: 10px;
						font-size: 24px;

						.map {
							flex-grow: 1;
						}

						.count {
							white-space: nowrap;
						}
					}

					&:hover {
						color: #fff;
						background-color: rgba(50, 120, 255, 0.2);
					}
				}
			}
		}

		> .left {
			flex-direction: column;
			width: 25%;
			background-color: rgba(0, 0, 0, 0.5);
			gap: 5px;
			padding: 16px;

			> .createparty {
				font-size: 32px;
				font-weight: 800;
			}

			> .button {
				background-color: rgba(0, 0, 0, 0.5);
				color: #aaa;
				padding: 10px;
				border-radius: 8px;
				gap: 2px;
				width: 280px;
				cursor: pointer;
				width: 100%;
				flex-direction: column;
				pointer-events: all;

				&:hover {
					color: #fff;
					background-color: rgba(50, 255, 120, 0.2);
				}
			}

			> .options {
				font-size: 32px;
				font-weight: 800;
			}

			> .option {
				justify-content: space-between;
				flex-shrink: 0;
				pointer-events: all;
			}

			> .password {
				justify-content: space-between;
				flex-shrink: 0;
				pointer-events: all;
			}
		}
	}

	> .footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px;
		width: 100%;
		gap: 10px;
		flex-direction: column;
		gap: 5px;
		flex-shrink: 0;

		> .button {
			background-color: rgba(0, 0, 0, 0.5);
			color: #aaa;
			border-radius: 8px;
			cursor: pointer;
			width: 10%;
			pointer-events: all;
			bottom: 0;
			right: 0;
			left: 0;
			padding: 10px;
			margin-right: 20px;
			font-weight: 600;

			&:hover {
				color: #fff;
				background-color: rgba(255, 0, 0, 0.2);
			}
		}

		> .forcestart {

			&:hover {
				color: #fff;
				background-color: rgba(50,120,255, 0.2);
			}
		}

		> .test {

			&:hover {
				color: #fff;
				background-color: rgba(255,50,50, 0.2);
			}
		}

		> .ready {

			&:hover {
				color: #fff;
				background-color: #4cd137;
			}
		}

		> .quit {

			&:hover {
				color: #fff;
				background-color: #e84118;
			}
		}
	}

	> .topright {
		position: absolute; /* Ensure child elements use this as reference */
		top: 0;
		right: 0;
		width: auto;
		display: flex;
		flex-direction: column;
		text-align: right;
		align-items: flex-end;
		justify-content: flex-end;

		> .category {
			background-color: #4834d4;
			font-weight: 600;

			> .button {
				background-color: rgba(0, 0, 0, 0.5);
				color: #aaa;
				border-radius: 0px;
				cursor: pointer;
				pointer-events: all;
				padding: 2px;
				font-weight: 600;

				&:hover {
					color: #fff;
					background-color: #4834d4;
				}

				> .leaderboard {

					&:hover {
						color: #fff;
						background-color: #e84118;
					}
				}
			}
		}

		> .button {
			background-color: rgba(0, 0, 0, 0.5);
			color: #aaa;
			border-radius: 8px;
			cursor: pointer;
			pointer-events: all;
			padding: 10px;
			font-weight: 600;

			&:hover {
				color: #fff;
				background-color: #4834d4;
			}

			> .leaderboard {

				&:hover {
					color: #fff;
					background-color: #e84118;
				}
			}
		}

		> .toprightcontainer {
			padding: 10px;
			//overflow: hidden;
			background-color: transparent;
			margin-right:10px;

			> .button {
				background-color: rgba(0, 0, 0, 0.5);
				color: #aaa;
				border-radius: 8px;
				cursor: pointer;
				pointer-events: all;
				padding: 10px;
				font-weight: 600;

				&:hover {
					color: #fff;
					background-color: #4834d4;
				}

				> .leaderboard {

					&:hover {
						color: #fff;
						background-color: #e84118;
					}
				}
			}
		}

		> .leaderboard-list {
			background-color: rgba(72, 52, 212,1);
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 10px;
			text-transform: uppercase;
			font-weight: 800;
			margin-right:10px;

			> .entry {
				color: #fff;
				white-space: pre-line;
				font-weight: 600;
				font-family: Poppins;
				content: "\A";
				text-transform: none;
			}
		}
	}

	#line-one {
		text-shadow: 0px 0px 0 rgb(72, 52, 212), -1px -1px 0 rgb(72, 52, 212), -2px -2px 0 rgb(72, 52, 212), -3px -3px 0 rgb(72, 52, 212), -4px -4px 0 rgb(72, 52, 212), -5px -5px 0 rgb(72, 52, 212), -6px -6px 0 rgb(72, 52, 212), -7px -7px 0 rgb(72, 52, 212), -8px -8px 0 rgb(72, 52, 212), -9px -9px 0 rgb(72, 52, 212), -10px -10px 0 rgb(72, 52, 212), -11px -11px 0 rgb(72, 52, 212), -12px -12px 0 rgb(72, 52, 212), -13px -13px 0 rgb(72, 52, 212), -14px -14px 0 rgb(72, 52, 212), -15px -15px 0 rgb(72, 52, 212), -16px -16px 0 rgb(72, 52, 212), -17px -17px 0 rgb(72, 52, 212), -18px -18px 0 rgb(72, 52, 212), -19px -19px 0 rgb(72, 52, 212), -20px -20px 0 rgb(72, 52, 212), -21px -21px 0 rgb(72, 52, 212), -22px -22px 0 rgb(72, 52, 212), -23px -23px 0 rgb(72, 52, 212), -24px -24px 0 rgb(72, 52, 212), -25px -25px 0 rgb(72, 52, 212), -26px -26px 0 rgb(72, 52, 212), -27px -27px 0 rgb(72, 52, 212), -28px -28px 0 rgb(72, 52, 212), -29px -29px 0 rgb(72, 52, 212), -30px -30px 0 rgb(72, 52, 212), -31px -31px 0 rgb(72, 52, 212), -32px -32px 0 rgb(72, 52, 212), -33px -33px 0 rgb(72, 52, 212), -34px -34px 0 rgb(72, 52, 212), -35px -35px 0 rgb(72, 52, 212), -36px -36px 0 rgb(72, 52, 212), -37px -37px 0 rgb(72, 52, 212), -38px -38px 0 rgb(72, 52, 212), -39px -39px 0 rgb(72, 52, 212), -40px -40px 0 rgb(72, 52, 212), -41px -41px 0 rgb(72, 52, 212), -42px -42px 0 rgb(72, 52, 212), -43px -43px 0 rgb(72, 52, 212), -44px -44px 0 rgb(72, 52, 212), -45px -45px 0 rgb(72, 52, 212), -46px -46px 0 rgb(72, 52, 212), -47px -47px 0 rgb(72, 52, 212), -48px -48px 0 rgb(72, 52, 212), -49px -49px 0 rgb(72, 52, 212), -50px -50px 0 rgb(72, 52, 212), -51px -51px 0 rgb(72, 52, 212), -52px -52px 0 rgb(72, 52, 212), -53px -53px 0 rgb(72, 52, 212), -54px -54px 0 rgb(72, 52, 212), -55px -55px 0 rgb(72, 52, 212), -56px -56px 0 rgb(72, 52, 212), -57px -57px 0 rgb(72, 52, 212), -58px -58px 0 rgb(72, 52, 212), -59px -59px 0 rgb(72, 52, 212), -60px -60px 0 rgb(72, 52, 212), -61px -61px 0 rgb(72, 52, 212), -62px -62px 0 rgb(72, 52, 212), -63px -63px 0 rgb(72, 52, 212), -64px -64px 0 rgb(72, 52, 212), -65px -65px 0 rgb(72, 52, 212), -66px -66px 0 rgb(72, 52, 212), -67px -67px 0 rgb(72, 52, 212), -68px -68px 0 rgb(72, 52, 212), -69px -69px 0 rgb(72, 52, 212), -70px -70px 0 rgb(72, 52, 212), -71px -71px 0 rgb(72, 52, 212), -72px -72px 0 rgb(72, 52, 212), -73px -73px 0 rgb(72, 52, 212), -74px -74px 0 rgb(72, 52, 212), -75px -75px 0 rgb(72, 52, 212), -76px -76px 0 rgb(72, 52, 212), -77px -77px 0 rgb(72, 52, 212), -78px -78px 0 rgb(72, 52, 212), -79px -79px 0 rgb(72, 52, 212), -80px -80px 0 rgb(72, 52, 212), -81px -81px 0 rgb(72, 52, 212), -82px -82px 0 rgb(72, 52, 212), -83px -83px 0 rgb(72, 52, 212), -84px -84px 0 rgb(72, 52, 212), -85px -85px 0 rgb(72, 52, 212), -86px -86px 0 rgb(72, 52, 212), -87px -87px 0 rgb(72, 52, 212), -88px -88px 0 rgb(72, 52, 212), -89px -89px 0 rgb(72, 52, 212), -90px -90px 0 rgb(72, 52, 212), -91px -91px 0 rgb(72, 52, 212), -92px -92px 0 rgb(72, 52, 212), -93px -93px 0 rgb(72, 52, 212), -94px -94px 0 rgb(72, 52, 212), -95px -95px 0 rgb(72, 52, 212), -96px -96px 0 rgb(72, 52, 212), -97px -97px 0 rgb(72, 52, 212), -98px -98px 0 rgb(72, 52, 212), -99px -99px 0 rgb(72, 52, 212), -100px -100px 0 rgb(72, 52, 212);
	}

	#line-two {
		text-shadow: 0px 0px 0 rgb(72, 52, 212), -1px -1px 0 rgb(72, 52, 212), -2px -2px 0 rgb(72, 52, 212), -3px -3px 0 rgb(72, 52, 212), -4px -4px 0 rgb(72, 52, 212), -5px -5px 0 rgb(72, 52, 212), -6px -6px 0 rgb(72, 52, 212), -7px -7px 0 rgb(72, 52, 212), -8px -8px 0 rgb(72, 52, 212), -9px -9px 0 rgb(72, 52, 212), -10px -10px 0 rgb(72, 52, 212), -11px -11px 0 rgb(72, 52, 212), -12px -12px 0 rgb(72, 52, 212), -13px -13px 0 rgb(72, 52, 212), -14px -14px 0 rgb(72, 52, 212), -15px -15px 0 rgb(72, 52, 212), -16px -16px 0 rgb(72, 52, 212), -17px -17px 0 rgb(72, 52, 212), -18px -18px 0 rgb(72, 52, 212), -19px -19px 0 rgb(72, 52, 212), -20px -20px 0 rgb(72, 52, 212), -21px -21px 0 rgb(72, 52, 212), -22px -22px 0 rgb(72, 52, 212), -23px -23px 0 rgb(72, 52, 212), -24px -24px 0 rgb(72, 52, 212), -25px -25px 0 rgb(72, 52, 212), -26px -26px 0 rgb(72, 52, 212), -27px -27px 0 rgb(72, 52, 212), -28px -28px 0 rgb(72, 52, 212), -29px -29px 0 rgb(72, 52, 212), -30px -30px 0 rgb(72, 52, 212), -31px -31px 0 rgb(72, 52, 212), -32px -32px 0 rgb(72, 52, 212), -33px -33px 0 rgb(72, 52, 212), -34px -34px 0 rgb(72, 52, 212), -35px -35px 0 rgb(72, 52, 212), -36px -36px 0 rgb(72, 52, 212), -37px -37px 0 rgb(72, 52, 212), -38px -38px 0 rgb(72, 52, 212), -39px -39px 0 rgb(72, 52, 212), -40px -40px 0 rgb(72, 52, 212), -41px -41px 0 rgb(72, 52, 212), -42px -42px 0 rgb(72, 52, 212), -43px -43px 0 rgb(72, 52, 212), -44px -44px 0 rgb(72, 52, 212), -45px -45px 0 rgb(72, 52, 212), -46px -46px 0 rgb(72, 52, 212), -47px -47px 0 rgb(72, 52, 212), -48px -48px 0 rgb(72, 52, 212), -49px -49px 0 rgb(72, 52, 212), -50px -50px 0 rgb(72, 52, 212), -51px -51px 0 rgb(72, 52, 212), -52px -52px 0 rgb(72, 52, 212), -53px -53px 0 rgb(72, 52, 212), -54px -54px 0 rgb(72, 52, 212), -55px -55px 0 rgb(72, 52, 212), -56px -56px 0 rgb(72, 52, 212), -57px -57px 0 rgb(72, 52, 212), -58px -58px 0 rgb(72, 52, 212), -59px -59px 0 rgb(72, 52, 212), -60px -60px 0 rgb(72, 52, 212), -61px -61px 0 rgb(72, 52, 212), -62px -62px 0 rgb(72, 52, 212), -63px -63px 0 rgb(72, 52, 212), -64px -64px 0 rgb(72, 52, 212), -65px -65px 0 rgb(72, 52, 212), -66px -66px 0 rgb(72, 52, 212), -67px -67px 0 rgb(72, 52, 212), -68px -68px 0 rgb(72, 52, 212), -69px -69px 0 rgb(72, 52, 212), -70px -70px 0 rgb(72, 52, 212), -71px -71px 0 rgb(72, 52, 212), -72px -72px 0 rgb(72, 52, 212), -73px -73px 0 rgb(72, 52, 212), -74px -74px 0 rgb(72, 52, 212), -75px -75px 0 rgb(72, 52, 212), -76px -76px 0 rgb(72, 52, 212), -77px -77px 0 rgb(72, 52, 212), -78px -78px 0 rgb(72, 52, 212), -79px -79px 0 rgb(72, 52, 212), -80px -80px 0 rgb(72, 52, 212), -81px -81px 0 rgb(72, 52, 212), -82px -82px 0 rgb(72, 52, 212), -83px -83px 0 rgb(72, 52, 212), -84px -84px 0 rgb(72, 52, 212), -85px -85px 0 rgb(72, 52, 212), -86px -86px 0 rgb(72, 52, 212), -87px -87px 0 rgb(72, 52, 212), -88px -88px 0 rgb(72, 52, 212), -89px -89px 0 rgb(72, 52, 212), -90px -90px 0 rgb(72, 52, 212), -91px -91px 0 rgb(72, 52, 212), -92px -92px 0 rgb(72, 52, 212), -93px -93px 0 rgb(72, 52, 212), -94px -94px 0 rgb(72, 52, 212), -95px -95px 0 rgb(72, 52, 212), -96px -96px 0 rgb(72, 52, 212), -97px -97px 0 rgb(72, 52, 212), -98px -98px 0 rgb(72, 52, 212), -99px -99px 0 rgb(72, 52, 212), -100px -100px 0 rgb(72, 52, 212);
	}
}