body{
	margin:0px;
	background-color:#001c2e;
	background-image: url("../img/bg.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center; 
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#intro{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:#333;
	color:#fff;
	animation: fadeOut 4s;
	z-index:99;
	opacity:0;
	pointer-events: none;
}
#intro-ic{
	position:absolute;
	text-align:center;
	width:40vw;
	font-size:4vw;
	font-family:Arial;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	animation: scale 1s;	
}
#intro-ic img{
	width:100%;
}
@keyframes fadeOut {
    0% {opacity:1;}
	50% {opacity:1;}
    100% {opacity:0;}
}
@keyframes scale {
    0% {
		width:0vw;
		font-size:0vw;
	}
    100% {
		width:40vw;
		font-size:4vw;		
	}
}
#game-border{
	width:800px;
	height:600px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#game-area{
	position: relative;
	border:5px solid #fff;
	background-color:rgba(0, 0, 0, 0.7);
	border-radius: 1%;
}
.piece{
	box-sizing:border-box;
	background-repeat: no-repeat;
	position: absolute;
	width:100px;
	height:100px;
	font-size:25px;
	font-family:Arial;
	color:#ccc;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
	margin:0px;
	border: 2px solid #00192c;
	text-align: center;
	cursor: pointer;
	opacity: 1.5;
	animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
#sample{
	width:80%;
	margin:10px 0 10px auto;
	height:50px;
	border:5px solid #fff;
	background-size: 100% 100%;
	border-radius: 3%;
}
#right{
	position:relative;
	overflow:hidden;
	text-align:right;
	float:right;
	width:25%;
	overflow:hidden;
	border:0px solid #000;
}
.button{
	background: linear-gradient(#cb4245, #fa7b77);
	width:85%;
	height:10vh;
	border-radius: 10px;
	border: 1px solid #420a07;
	display:inline-block;
	margin:auto;
	font-family: 'Carter One';
	font-weight:bold;
	letter-spacing: 1px;
	cursor:pointer;
	color:#fff;
	text-shadow:
	-1px -1px 0 #420a07,  
    1px -1px 0 #420a07,
    -1px 1px 0 #420a07,
    1px 1px 0 #420a07;
	text-align:center;
	box-shadow: 2px 2px 2px 0px rgb(0, 0, 0, 0.3);
}
.kutu{
	background:#fff;
	width:40%;
	height:1vh;
	display:inline-block;
	border-radius: 5px;
	border: 1px solid #000;
	color:#000;
	text-shadow:
	-1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
	text-align:center;
	box-shadow: 2px 2px 2px 0px rgb(0, 0, 0, 0.3);
}
.kutu-div{
	font-family: 'Carter One';
	font-weight:bold;
	color:#963131;
	text-shadow:
	-1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;	
}
#sure-div{
	width:85%;
	position:absolute;	
}
#hamle-div{
	width:85%;
	position:absolute;	
}
.text{
	display:inline-block;
	width:55%;
	text-align:left;	
}
.full{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
#game{
	display:none;
	width:100vw;
	height:100vh;
	overflow:hidden;
}
.secenek{
	display:inline-block;
	width:25vw;
	height:25vw;
	margin:10px;
	cursor:pointer;
	border:5px solid #00192c;
	border-radius: 10%;
	animation: fadein 2s;
}
.ortala{
	position: absolute;
	top: 50%;
	left: 50%;
	width:65vw;
	transform: translate(-50%, -50%);
	text-align:center;
}
.sec1-1{
	background-image: url("../img/3x3.png");
	background-size: 100% 100%;
}
.sec1-2{
	background-image: url("../img/4x4.png");
	background-size: 100% 100%;
}
.sec1-3{
	background-image: url("../img/5x5.png");
	background-size: 100% 100%;
}
.sec1-4{
	background-image: url("../img/6x6.png");
	background-size: 100% 100%;
}
.sec2-1{
	background-image: url("../img/1.jpg");
	background-size: 100% 100%;
}
.sec2-2{
	background-image: url("../img/2.jpg");
	background-size: 100% 100%;
}
.sec2-3{
	background-image: url("../img/3.jpg");
	background-size: 100% 100%;
}
.sec2-4{
	background-image: url("../img/4.jpg");
	background-size: 100% 100%;
}
#sec1{
	display:block;
}
#sec2{
	display:none;
}