<style>
	/* CSS Code */
    
	/* Heading */
	h1 {
		color: white;
		font-size: 50px;
	}
    .main{
        color: black;
        font-size: 50px;
    }
    .body{
        background-color: black;
        background-image: url("./img/bgnew.jpg");
    }
	/* 3*3 Grid */
	#b1, #b2, #b3, #b4, #b5,
	#b6, #b7, #b8, #b9 {
		width: 80px;
		height: 52px;
		margin: auto;
		border: 3px solid black;
		border-radius: 6px;
		font-size: 30px;
		text-align: center;
	}

	/* Reset Button */
	#but {
		box-sizing: border-box;
		width: 95px;
		height: 40px;
		border: 3px solid dodgerblue;
		margin: auto;
		border-radius: 4px;
		font-family: Verdana,
			Geneva, Tahoma, sans-serif;

		background-color: black;
		color: white;
		font-size: 20px;
		cursor: pointer;
	}

	/* Player turn space */
	#print {
		font-family: Verdana,
			Geneva, Tahoma, sans-serif;

		color: dodgerblue;
		font-size: 20px;
	}

	/* Main Container */
	#main {
		text-align: center;
	}

	/* Game Instruction Text */
	#ins {
		font-family: Verdana,
			Geneva, Tahoma, sans-serif;
			
		color: black;
		font-size: 19px;
	}

@media only screen and (max-width: 340px) {
    #b1, #b2, #b3, #b4, #b5,
	#b6, #b7, #b8, #b9 {
        width: 50px;
		height: 32px;
		margin: auto;
		border: 3px solid black;
		border-radius: 3px;
		font-size: 20px;
		text-align: center;
    }
  }
  
  @media only screen and (max-width: 340px) {
    #ins {
		font-family: Verdana,
			Geneva, Tahoma, sans-serif;
			
		color: black;
		font-size: 14px;
    }
}
@media only screen and (max-width: 340px) {
    .main{
        color: black;
        font-size: 30px;
    }
}
@media only screen and (max-width: 340px) {
    #but {
		box-sizing: border-box;
		width: 87px;
		height: 36px;
		border: 2px solid dodgerblue;
		margin: auto;
		border-radius: 4px;
		font-family: Verdana,
			Geneva, Tahoma, sans-serif;

		background-color: black;
		color: white;
		font-size: 16px;
		cursor: pointer;
    }
}

  </style>