@font-face{
	font-family: signal;
	src: url(../fonts/Signal/Signal-Normal.ttf);
}
body{
	margin: 0px;
	background-color: black;
	font-family: signal;
}
	#background{
		position: absolute;
		width: 100%;
		height: 100%;
  		object-fit: cover;
	}
	#idIndicator{
			position: absolute;
			width: 34px;
			height: 34px;
			background-image: url(../Img/indicator.png);
			background-size: cover;
			top: -50px;
			left: 0px;
			z-index: 100;
		}
	#idMain{
		position: absolute;
		height: 100%;
		width: 100%;
	}
		.ul{
			margin: 0px;
			padding: 0px;
			list-style: none;
			position: absolute;
			transform: translate(-50%, -50%);
			left: 50%;
		}
		#ulMain{
			transform: translate(0%, 0%);
			bottom: 0px;
			left: 0px;
			background: #66000000;
			border-radius: 25px 0px 25px 0px;
			border: 3px solid #66000000;
			padding: 15px;
			padding-left: 0px;
			color: #66000000;
		}
	#uls{}
		#ulDificulty{
			top: 50%;
			background: #040404;
			color: #1782a5;
			border-radius: 15px;
			padding: 20px;
			text-align: justify;
			display: none;
			opacity: 0;
			z-index: 101;
		}
		#ulDificulty::after{
			display: inline-block;
			content: '';
			width: 100%;
		}
			.dificulties{
				display: inline-block;
				background-color: #1782a5;
				color: #040404;
				border-radius: 90px;
				padding: 0px 7px;
				margin: 0px 25px;
			}
			.line{
				font-size: 22px;
				cursor: pointer;
			}
			.main{
				display: block;
				border-bottom: 4px solid #1782a5;
				padding: 6px 6px 2px 6px;
			}
			.main:hover{

			}
			.text{
				text-align: center;
				margin-bottom: 20px;
				font-size: 22px;
				cursor: text;
			}
			.close{
				position: absolute;
				transform: translate(50%, -50%);
				right: 0px;
				top: 0px;
				background-color: #1782a5;
				color: black;
				border-radius: 90px;
				width: 30px;
				height: 30px;
				text-align: center;
				font-size: 25px;
			}
			.close:hover{
				width: 40px;
				height: 40px;
				font-size: 33px;
			}
		#ulQuit{
			top: 50%;
			width: 500px;
			background: #040404;
			color: #1782a5;
			border-radius: 15px;
			padding: 20px;
			display: none;
			opacity: 0;
		}
			.quit{
				text-align: right;
				font-size: 25px;
			}
		#ulArcade{
			top: 50%;
			width: 500px;
			background: #040404;
			color: #1782a5;
			border-radius: 15px;
			padding: 20px;
			display: none;
			opacity: 0;
		}
			.arcade{
				text-align: right;
				font-size: 25px;
			}
	.menuBarDiv{
		position: absolute;
		width: 100%;
		z-index: 100;
	}
		.menuBar{
			margin: 0px;
			padding: 0px;
			list-style: none;
			width: 100%;
			height: 40px;
			text-align: right;
			background-color: #66000000;
		}
			.audio{
				display: inline-block;
				height: 30px;
				width: 30px;
				margin-right: 10px;
				margin-top: 6px;
			}
			#sound{
				width: 30px;
				height: 30px;
			}
			#music{
				width: 30px;
				height: 30px;
			}

@media (max-width: 950px){
	#uls{}
		#ulDificulty{
			text-align: center;
		}
			.dificulties{
				display: block;
				width: 120px;
				margin: auto;
				margin-top: 8px;
			}
}

@media(max-width: 600px){
	#uls{}
		#ulDificulty{

		}
		#ulQuit{
			width: calc(90% - 30px);
		}
		#ulArcade{
			width: calc(90% - 30px);
		}
}