@import "/ui/Hud/Style.scss";

$white: #ffffff;
$black: #0f0f0f;


StartLobby {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-family: HabboExtended;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 16px;
	pointer-events: all;
	text-shadow: $text-shadow-sm;
	z-index: 99;
	transition: opacity 7s ease-in;

	

	.video-container {
		position: absolute;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		opacity: 0.3;
		transition: opacity 7.5s ease-in-out;
		
		

		&.intro {
			opacity: 1;
		}
	}
		@keyframes fadeIn {
			from {
				opacity: 0;
			}
	
			to {
				opacity: 1;
			}
		}

	.center {
		position: absolute;
		width: 100%;
		height: 100%;
		
		opacity: 1;
		
		
		
		.left {
				margin-top: 16px;
				margin-left: 16px;
				flex-direction: column;
				width: 21%;
				height: 95%;
				font-family: Cambria;
				background-image: url('/ui/textures/blue.jpg');
				background-position: center;
				opacity: 0.96;
				background-size: cover;
				border-radius: 13px;
				padding: 10px;
				border-width: 5px;
				border-color: rgb(56, 56, 56);
				box-shadow: 5 5 5px 5px rgb(0, 0, 0);
				transition: all 0.2s ease-out;
				
				
		
		
				>.title {
					font-size: 64px;
					font-weight: bold;
					color: rgb(255, 255, 255);
					margin-bottom: 32px;
					margin-left: 10px;
					justify-content: center;
					background-image: url('/ui/textures/grey.jpg');
					background-position: center;
					background-size: cover;

					border-radius: 13px;
					padding: 10px;
				
					box-shadow: 5 5 0 0 rgb(66, 66, 66);
					
				}
		
				>.explanation {
					color: #ffd900b6;
					font-size: 24px;
					background-image: url('/ui/textures/grey.jpg');
					background-position: center;
					background-size: cover;
					
					border-radius: 13px;
					padding: 10px;
					margin-left: 10px;
					
					box-shadow: 5 5 1px 1px rgb(0, 0, 0);
					justify-content: center;
					align-items: center;
				}
		
				>.button-list {
					
					flex-direction: column;
					gap: 53px;
					margin-top: 32px;
					left: 5%;
					
						background-position: center;
						background-size: cover;
					justify-content: flex-start;
					border-radius: 13px;
					padding: 10px;
				
		
					>.button {
						position: relative;
						background-color: transparent;
						color: #f7f7f7;
						font-size: 32px;
						margin-left: 11%;
						padding: 15px;
						border-radius: 18px;
						cursor: pointer;
						width: 300px;
						flex-direction: column;
						transition: all 0.2s ease-out;
						align-items: center;
		
		
						&:hover {
							background-color: #570606;
							sound-in: 'hover';
						}
		
						&:active:not(.disabled) {
							sound-in: 'light_click';
						}
					}
					
				}
			}
		
		
			.header {
				font-size: 64px;
				width: 100%;
				font-weight: bold;
				color: rgb(116, 224, 66);
				justify-content: center;
				align-items: center;
			}
		
			.lobby-list {
				height: 70%;
				width: 30%;
				margin-top: 16px;
				margin-left: 26px;
				flex-direction: column;
					background-image: url('/ui/textures/blue.jpg');
				background-position: center;
				background-size: cover;
				border-radius: 13px;
				padding: 10px;
				box-shadow: 5 5 5px 5px rgb(0, 0, 0);
				transition: all 0.2s ease-out;

				.title2 {
						color: rgb(223, 6, 6);
						justify-content: center;
						align-items: center;
						position: relative;
						margin-left: 80px;
						
						
					}
		
		
		
				>label {
					color: #ffffffd7;
					font-size: 24px;
					flex-direction: column;
					width: 100%;
					justify-content: center;
					align-items: center;
					
				}
		
				>.button-list {
					flex-direction: column;
					margin-top: 64px;
					overflow: scroll;
					height: 63%;
					gap: 16px;
		
					>.button {
						background-color: transparent;
						color: #aaa;
						padding: 10px;
						border-radius: 8px;
						cursor: pointer;
						width: 100%;
						flex-direction: column;
						transition: all 0.2s ease-out;
						flex-shrink: 0;
		
						.title {
							font-weight: bold;
							font-size: 20px;
						}
						
		
						.meta {
							font-size: 16px;
		
							.map {
								flex-grow: 1;
							}
		
							.count {
								white-space: nowrap;
							}
						}
		
						&:hover {
							background-color: #333;
						}
					}
				}
			}
	}
	

	
}