Bulls&Cows mobile

by Weron2

HTML

<head>
	<meta charset="utf-8">
	<title>Bulls an cows</title>
	<style>
	body {
		background-color: #ffffff;
	}
	
	div {
		border-radius: 50%;
		width: 9vw;
		height: 9vw;
		margin-left: 1vw;
		display: inline-block;
	}
	
	div.c0 {
		background-color: green;
	}
	
	div.c1 {
		background-color: yellow;
	}
	
	div.c2 {
		background-color: purple;
	}
	
	div.c3 {
		background-color: orange;
	}
	
	div.c4 {
		background-color: blue;
	}
	
	div.c5 {
		background-color: red;
	}
	
	div.c6 {
		background-color: white;
	}
	
	div.c8 {
		background-color: black;
	}
	
	div.c9 {
		background-color: gray;
	}
	
	.btn {
		height: 16vw;
		width: 16vw;
		font-size: 2vw;
	}
	
	@media screen and (orientation: landscape) {
		div {
			width: 10vh;
			height: 10vh;
			margin-left: 1vh;
		}
		.btn {
			height: 10vh;
			width: 10vh;
			font-size: 1vw;
		}
	}
	</style>
</head>

<body>
	<table align="center" width="99%" style="position: absolute; bottom: 4vw; margin-inline-start: 0; margin-inline-end: 0;">
		<tbody>
			<tr>
				<td id="cup" colspan="2" border="0"></td>
			</tr>
			<tr>
				<td colspan="2">
					<hr>
				</td>
			</tr>
			<tr>
				<td id="box"></td>
				<td>
					<div class="c6"></div>
				</td>
			</tr>
			<tr>
				<td id="colors" align="center">
					<div class="c0" onclick="select(this.className)" ondblclick="select(this.className)" style="width: 16vw; height: 16vw;	margin-left: 2vw;"></div>
					<div class="c1" onclick="select(this.className)" ondblclick="select(this.className)" style="width: 16vw; height: 16vw;	margin-left: 2vw;"></div>
					<div class="c2" onclick="select(this.className)" ondblclick="select(this.className)" style="width: 16vw; height: 16vw;	margin-left: 2vw;"></div>
					<br>
					<div class="c3" onclick="select(this.className)" ondblclick="select(this.className)" style="width: 16vw; height: 16vw;	margin-left: 2vw;"></div>
					<div class="c4" onclick="select(this.className)" ondblclick="select(this.className)" style="width: 16vw; height: 16vw;	margin-left:...