*{
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
body{
	margin:0px;
	width:100vw;
	height:100vh;
	background: #f0cf25;
	font-family: 'Poppins', sans-serif;
}
#first{
	z-index:99;
	position:absolute;
	width:100%;
	height:100vh;
	background-color:#333;
	text-align:center;
	font-size:3.5vh;
	font-weight:bold;
	color:orange;
	cursor:pointer;
}
#first div{
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.giris{
	width:200px;
	height:200px;
	border-radius: 50%;
	border: 10px solid orange;
}
#start{
	display:none;
	z-index:99;
	position:absolute;
	width: 100%;
	height: 100%;
	background-color:#333;
	text-align:center;
	font-size:3.5vh;
	font-weight:bold;
	color:#fff;
}
#start div{
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#uyari{
	display:none;
	z-index:99;
	position:absolute;
	width: 100%;
	height: 100%;
	line-height:100%;
	top:0px;
	padding:10vw;
	margin: 0px auto 0px auto;
	background-color:#333;
	text-align:center;
	vertical-align: middle;
	font-family: 'Verdana';
	font-size:3vw;
	color:#fff;
	border-radius: 4vw;
	-moz-border-radius: 4vw;
	-webkit-border-radius: 4vw;
	box-shadow: inset 0 0 1vw rgb(194, 128, 23, 1);
}
#main{
	margin: 0px auto 0px auto;
	border: 0px solid #fff;
}
#video{
	position:relative;
}
#video-ekran{
	display:none;
	position: absolute;
	width:100%;
	height:100%;
}

#cerceve{
	display:block;
	position: absolute;
	height:100%;
	width:100%;
	background: url(../img/akilli-cay-bardagi.jpg) no-repeat;
	background-size:100% 100%;
}
#soru{
	position: relative;
	text-align:center;
	color:#333;
	background-color:#fff;
}
#soru-metin{
	position:absolute;
	width:100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#soru-no{
	display:none;
	position: absolute;
	/* background: url(../img/soru-no.png) no-repeat; */
	background: linear-gradient(#e3312d,#aa1300);
	background-size:100% 100%;
	color:#fff;
}
#buttons{
	display:none;
}
#buttons div{
	cursor:pointer;
	text-align:center;
	color:#fff;
}
#button-play{
	display:none;
	background: url(../img/buton-play.png) no-repeat;
	background-size:100% 100%;
	cursor:pointer;
	width:10vw;
	height:9vw;
	margin: 0px auto 0px auto;
}
#cevap-text{
	position:absolute;
	color:white;
	text-align:center;
	width:100%;
}
#logo{
	color:#333;
	position:absolute;
}
#logo a{
	text-decoration:none;
	color:#000;
}
#basla-div{
	display:table;
	margin: 0px auto;
}
#geribildirim{
	display:none;
	margin: 0px auto;
	text-align:center;
}
#yenitahmin{
	display:none;
	margin: 0px auto;
	text-align:center;
}
#button-emin-degilim{
    background: linear-gradient(#feaf3a,#e87313);
}
#button-emin-degilim:hover{
    background: linear-gradient(#e87313,#feaf3a);
}

#button-evet{
    background: linear-gradient(#35d84a,#60b61f);
}

#button-evet:hover{
    background: linear-gradient(#60b61f,#35d84a);
	user-select: none;
}

#button-hayir{
    background: linear-gradient(#e8574a,#be231c);
}

#button-hayir:hover{
    background: linear-gradient(#be231c,#e8574a);
}

#button-basla{
	display:inline-block;
	cursor:pointer;
	text-align:center;
	color:#fff;
    background: linear-gradient(#35d84a,#60b61f);
}

#button-basla:hover{
    background: linear-gradient(#60b61f,#35d84a);	
}

#button-bildi{
	display:inline-block;
	cursor:pointer;
	text-align:center;
	color:#fff;
    background: linear-gradient(#35d84a,#60b61f);
}

#button-bildi:hover{
    background: linear-gradient(#60b61f,#35d84a);	
}

#button-bilemedi{
	display:inline-block;
	cursor:pointer;
	text-align:center;
	color:#fff;
    background: linear-gradient(#e8574a,#be231c);
}

#button-bilemedi:hover{
    background: linear-gradient(#be231c,#e8574a);	
}

#button-yeni-tahmin{
	display:inline-block;
	cursor:pointer;
	text-align:center;
	color:#fff;
    background: linear-gradient(#35d84a,#60b61f);
}

#button-yeni-tahmin:hover{
    background: linear-gradient(#60b61f,#35d84a);	
}

#button-yeni-oyun{
	display:inline-block;
	cursor:pointer;
	text-align:center;
	color:#fff;
    background: linear-gradient(#e8574a,#be231c);
}

#button-yeni-oyun:hover{
    background: linear-gradient(#be231c,#e8574a);	
}

@media (min-aspect-ratio: 1/1){
	#main{
		width: 110vh;
		height: 100vh;
		padding: 1vh;
	}
	#video{
		margin-top:4vh;
		width:100%;
		height:62vh;
	}
	#my-video{
		border-radius: 4vh;
	}
	#cerceve{
		/* border: 0.5vh solid #fc8e0e; */
		border-radius: 4vh;
		box-shadow: 0vh 1vh 3vh #0005;
	}
	#soru{
		font-weight:bold;
		height:15vh;
		margin: 4vh 1vh 1vh 1vh;
		padding: 0 2vh;
		font-size:2.5vh;
		border-radius: 2vh;
		box-shadow: 0.05vh 0.1vh 0 0.1vh rgb(0, 0, 0, 0.15);
	}
	#soru-metin{
		padding:3vh 2vh;		
	}
	#soru img{
		height:2.5vh;
	}
	#soru-no{
		top: -2vh;
		left: 3vh;
		width: 15vh;
		height: 5vh;
		text-shadow: 0.1vh 0.2vh #860700;
		font-size: 2.2vh;
		line-height: 4.5vh;
		border-radius: 1vh;
	}
	#logo{
		font-size:1.5vh;
		left:4vh;
		bottom:0.8vh;
	}
	#cevap-text{
		font-size:4.5vh;
		top:24vh;
		padding-right: 4vh;
	}
	#buttons{
		margin: 3vh auto;
	}
	#buttons div{
		display:inline-block;
		margin:0 2vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
	}
	#button-evet{
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #547e1d;
		text-shadow: 0 0.25vh 0 #547e1d;
	}
	#button-hayir{
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #9a130c;
		text-shadow: 0 0.25vh 0 #9a130c;
	}
	#button-emin-degilim{
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #c35705;
		text-shadow: 0 0.25vh 0 #c35705;
	}

	#button-basla{
		margin-top:2.5vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #547e1d;
		text-shadow: 0 0.25vh 0 #547e1d;
	}
	
	#button-bildi{
		margin-top:2.5vh;
		margin-right:2vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #547e1d;
		text-shadow: 0 0.25vh 0 #547e1d;
	}

	#button-bilemedi{
		margin-top:2.5vh;
		margin-left:2vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #9a130c;
		text-shadow: 0 0.25vh 0 #9a130c;
	}
	#button-yeni-tahmin{
		margin-top:2.5vh;
		margin-right:2vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #547e1d;
		text-shadow: 0 0.25vh 0 #547e1d;
	}

	#button-yeni-oyun{
		margin-top:2.5vh;
		margin-left:2vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #9a130c;
		text-shadow: 0 0.25vh 0 #9a130c;
	}
}
@media (max-aspect-ratio: 1/1){
	#main{
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 95vw;
		padding: 1vw;
	}
	#video{
		width:100%;
		height: 53.4375vw;
	}
	#my-video{
		border-radius: 4vw;
	}
	#cerceve{
		/* border: 0.5vw solid #fc8e0e; */
		border-radius: 4vw;
		box-shadow: 0vh 1vw 3vw #0005;
	}
	#soru{
		height:30vw;
		margin: 5vw 1vw 1vw 1vw;
		padding:0 1vw;
		font-size:4vw;
		border-radius: 3vw;
		box-shadow: 0.05vw 0.1vw 0 0.1vw rgb(0, 0, 0, 0.15);
	}
	#soru-metin{
		padding:3vw 2vw;		
	}
	#soru img{
		height:2.5vw;
	}
	#soru-no{
		top:-2vw;
		left:3vw;
		width:18vw;
		height:6vw;
		text-shadow: 0.1vw 0.2vw #860700;
		font-size:3vw;
		line-height:6vw;
		border-radius:1vw;		
	}
	#logo{
		font-size:1.5vw;
		left:4vw;
		bottom:0.5vw;
	}
	#cevap-text{
		font-size:4.5vw;
		top:20vw;
		padding-right: 3vh;
	}
	#buttons{
		margin: 2vw auto;
	}
	#buttons div{
		display:block;
		margin:3vw 0;
		border: solid 1vw #fff;
		line-height:10vw;
		width:70vw;
		height:12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
	}
	#button-evet{
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #547e1d;
		text-shadow: 0 0.25vw 0 #547e1d;
	}
	#button-hayir{
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #9a130c;
		text-shadow: 0 0.25vw 0 #9a130c;
	}
	#button-emin-degilim{
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #c35705;
		text-shadow: 0 0.25vw 0 #c35705;
	}
	#button-basla{
		margin-top: 2.5vw;
		border: solid 1vw #fff;
		line-height: 10vw;
		width: 70vw;
		height: 12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
		box-shadow: 0 .5vw rgb(0 0 0/15%),inset 0vw -0.5vw #547e1d;
		text-shadow: 0 .25vw 0 #547e1d;
	}
	#button-bildi{
		margin-top:3.5vw;
		border: solid 1vw #fff;
		line-height:10vw;
		width:70vw;
		height:12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #547e1d;
		text-shadow: 0 0.25vw 0 #547e1d;
	}

	#button-bilemedi{
		margin-top:3.5vw;
		border: solid 1vw #fff;
		line-height:10vw;
		width:70vw;
		height:12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #9a130c;
		text-shadow: 0 0.25vw 0 #9a130c;
	}
	#button-yeni-tahmin{
		margin-top:3.5vw;
		border: solid 1vw #fff;
		line-height:10vw;
		width:70vw;
		height:12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #547e1d;
		text-shadow: 0 0.25vw 0 #547e1d;
	}

	#button-yeni-oyun{
		margin-top:3.5vw;
		border: solid 1vw #fff;
		line-height:10vw;
		width:70vw;
		height:12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #9a130c;
		text-shadow: 0 0.25vw 0 #9a130c;
	}
}