.main-menu {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	flex-direction: column;
	font-family: Poppins;
	color: white;
	font-size: 32px;
	padding-left: 30px;
	gap: 16px;

	&.hidden {
		opacity: 0;
	}

	> .header {
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		background-color: rgba(0, 0, 0, 0);

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

		p {
			font-size: 32px;
			font-weight: 800;
		}
	}



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

		> .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;

				> .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;
		//margin-bottom: 20px;
		margin-right: 20px;
		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);
			}
		}

		> .ready {

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

		> .quit {

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