body {
	margin: 0;
	padding: 0;
}

button, h1, form {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.sudoku-menu {
	width: 50%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.sudoku-menu button {
	font-size: 24px;
	margin: 10px;
	padding: 5px;
}
input[type='number'] {
    -moz-appearance:textfield;
}

.sudoku-container input::-webkit-outer-spin-button,
.sudoku-container input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.sudoku-container {
	border: 2px solid #666;
	margin-left: auto;
	margin-right: auto;
}

.sudoku-container td {
	margin: 0; padding: 0; min-width:23px;text-align:center
}
.sudoku-container input {
	width: 32px;
	height: 20px;
	text-align: center;
	font-size: 18px;
	padding: 0;
	padding-top:10px;
	border: 1px #ccc solid;
	border:none;
	background: transparent;xborder:1px solid green;
	
}
.sudoku-container input.notes {
	margin:-10px 0 0 0;
	font-size:.7em;
	position: absolute;
	padding-left: 0.1em;
	text-align:left;
	height: 10px;
}

.sudoku-container .sudoku-input-error {
	background: #ffc9d7;
}
.sudoku-container.valid-matrix {
	border: 5px solid #7edb37;
}
.sudoku-section-two {
	border:1px solid #ccc
}
.sudoku-container .sudoku-section-two  input {border:none}
.sudoku-section-one {
	background: #ccc;
}
.blue {color:blue}
table.sudoku-container {
	border-collapse: separate;
	box-sizing: content-box;
}
.sudoku-container * {
	box-sizing: content-box!important;
}
@media all and (max-width:675px){
	.sudoku-container input {width: 40px;
	
	}
}
@media all and (max-width:530px){	
.sudoku-container input {width: 25px;
font-size: 20px;

}}
@media all and (max-width:330px){
	.sudoku-container input {
		width: 20px;	
		font-size: 18px;
	}
	.sudoku-container input.notes{
	width: 20px;	
		font-size: .6em;
}}