*{
	box-sizing:border-box;
}
body{
	margin:0px;
	width:100vw;
	height:100vh;
	font-family: 'Bebas Neue', cursive;
	font-weight:bold;
	overflow:hidden;
	background-color:#2b271a;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#game-border{
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border:0px solid #000;
}
#intro{
	background: URL("../img/intro.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	
	width:100%;
	height:100%;
}


#game{
	display:none;
	background: URL("../img/back.png") #2b271a;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	border:0px solid #000;
	width:100%;
	height:100%;
}

#video-back{
	background: rgba(0, 0, 0, .4);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	border:0px solid #000;
	position: absolute;
	width:75%;
	height:60%;
	padding:5px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius:0.5vw;
}
#video{
	opacity:1.0;
	width:100%;
	height:100%;
	border-radius:0.5vw;	
}

#intro-button{
	position:absolute;
	background: URL("../img/button.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	width:28vw;
	height:7vw;
	line-height:7.5vw;
	font-size:2.8vw;
	text-align:center;
	color:#FFF;
	cursor:pointer;
	right:0;
	bottom:0;
	border:0px solid #000;
}
#intro-button:hover{
	color:#fff600;
}

.intro-logo{
	position:absolute;
	background: URL("../img/logo.png") #10252a;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	width:30vw;
	height:9vw;
	right:3vw;
	top:3vw;
	border-radius:1vw;
	border:1px solid #000;
}
.logo{
	display:block;
	height:20%;
	margin:auto;
	cursor:pointer;
}
#menu{
	position: absolute;
	width:75%;
	height:19%;
	overflow:hidden;
	left:12.5%;
	bottom:0;
}
#info{
	display:inline-block;
	color:red;
	font-family: Poppins,sans-serif;
}
#soru{
	width: 90%;
    border: 0px;
    height: 30px;
    border-radius: 3px;
    background: #9e9e9e;
	display:inline-block;
	float:left;
	padding-left:1%;
	border:1px solid #fff;
}
#sor{
	display:inline-block;
	width:9%;
	height:30px;
	line-height:30px;
	font-size:20px;
	border-radius: 3px;
	text-align:center;
	background:#000;
	float:right;
	color:orange;
	cursor:pointer;
	border:1px solid #fff;
}