@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          
@viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }     
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   
@viewport { user-zoom: fixed ; min-zoom: 100% ; }



   
.game{
			border-top: 1px solid #5bd39b; 
			width: 99%;
			height: 99%;
			max-width:750px;			
			max-height:800px;
			margin: auto;
			background: #5bd39b;
			border-radius: 12px;
			margin-top: 20px;
			box-shadow: 3px 3px 5px #333, -3px -3px 5px #333, -3px 3px 5px #333, 3px -3px 3px #333; 
		}
		canvas{
			width: 98%;
			height: 90%;
			background-color: #f255f2;
			border-radius: 10px;
			display: none;
		}
.game a1{
		
			font-size: 180%;
			margin: -5% 2%;
		    position:absolute;
		}
.game a2{
			font-size: 180%;
			margin: -5% 2%;
		    position:relative;			
		}
.game a3{
			font-size: 150%;
			margin: -5% 2%;
			
		}		

		.container{
			width: 86%;
			height: 86%;
			max-width:650px;
            max-height:650px;
			margin: 0 7% 7%;
			background-color: #f255f2;
			border-radius: 8px;
			text-align: center;
			box-sizing: border-box;
			position: relative;
		}
		.starter{
			width: 86%;
			height: 86%;
			border-radius: 8px;
			text-align: center;
			font-size: 4vw;
			font-size-adjust:auto;
			padding: 0.2%;
			padding-left:12%;
			box-sizing: border-box;
			color: #E5E5E5;
			/*display: none;*/
		}
		.container button{
			background-color: transparent;
			border: none;
			outline: none;
			color: #D5D5D5;
			font-size: 6vw;
			margin: 25px;
			cursor: pointer;
			font: tahoma;
		}
		.container button:hover{
			color: #ffffff;
		}
		.choose {
			width: 86%;
			height: 86%;
			margin: auto;
			border-radius: 8px;
			text-align: center;
			font-size: 6vw;
			padding: 0.2%;			
			padding-left: 7%;
			box-sizing: border-box;
			color: #E5E5E5;
			display: none;
		}
		button.x, button.o{
			font-size: 11vw;

		}
		.spots{
			width: 100%;
		    height: 100%;
			position: absolute;
			display: none;
		}
		.spots span{
			position: absolute;
			z-index: 6;
			width: 30%;
			height: 30%;
			display: inline-block;
			box-sizing: border-box;
			font-size: 15vw;
			color: #66eeff;
			border: 4px solid blue;
		}
		#s1{
			left: 5%;
			top: 5%;
			border-right: none;			
			border-left: none;
			border-top: none;
			border-bottom: none;
		}
		#s4{
			left: 5%;
			top: 35%;
			border-right: none;
			border-left: none;
		}
		#s7{
			left: 5%;
			top: 65%;
			border-right: none;			
			border-left: none;
			border-top: none;
			border-bottom: none;
		}
		#s2{
			left: 34%;
			top: 5%;
			border-top: none;			
			border-bottom: none;
		}
		#s5{
			left: 34%;
			top: 35%;
		}
		#s8{
			left: 34%;
			top: 65%;
			border-top: none;			
			border-bottom: none;
		}
		#s3{
			left: 64%;
			top: 5%;
			border-right: none;			
			border-left: none;
			border-top: none;
			border-bottom: none;
		}
		#s6{
			left: 64%;
			top: 35%;
			border-right: none;			
			border-left: none;
		}
		#s9{
			left: 64%;
			top: 65%;
			border-right: none;			
			border-left: none;
			border-top: none;
			border-bottom: none;
		}
		.won{
			height: 90%;
			width: 90%;
			position: absolute;
			background-color: rgba(20, 20, 20, .75);
			top: 5%;
			left: 5%;
			display: none;
			z-index: 8;
			color: #ffffff;
		}
		.won h2{
			font-size: 6vw;
			margin: 2% 2%;
		}
		.won button{
			color: #DDD;
			border: none;
		}
		.turns{
			width: 80%;			
			Position: relative;
			height: 7vw;
			margin: auto;
			text-align: center;
			font-size: 7vw;
			color: #000000;
			margin-top:10px;
			line-height: 24px;
		}
		.copy{
			color: #5bd39b;
			font-size: 32px;
			text-align: center;
		}
		.copy a{
			text-decoration: none;
		}

@media (min-width: 500px) {
  .turns {font-size: 40px; height:40px;}
}		
@media (min-width: 750px) {
  .starter {font-size: 30px;}
  .container button{font-size: 60px;}
  .choose {font-size: 45px;padding-left:55px;}
   button.x, button.o {font-size: 90px;}

  .spots span {font-size: 120px;}  
  .won h2 {font-size: 40px;}
}