table {
margin: 3em auto;
width: auto;
font-size: 100%;
}
td {
padding: 0 .25em;
border: .06em solid silver;
width: 1.95em;
text-align: center;
}
td a {
font-size: 150%;
display: block;
text-decoration:none;
}
td a:hover {
color: green;
}
.prev, .next {
width: 30px;
font-size: 125%;
height: 25px;
line-height: 25px;
border: .06em solid silver;
}
.dots {
padding: 0;
width:auto;
}
.little {
display: none;
}
.currentpage {
font-size: 150%;
font-weight: bold;
color: red;
padding: 0;
border: .06em solid red;
box-shadow: inset 0 0 0 .06em red;
}
.dots input::-webkit-outer-spin-button,
.dots input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.dots input[type="number"]{
-moz-appearance: textfield;
}
.dots input[type="number"] {
position: relative;
margin: 12px 0 0 0;
text-align: center;
width: auto;
padding: 5px 0 0 0;
border: none;
text-decoration: none;
outline: none;
font-size: 125%;
}
.dots input[type="number"]:focus {
text-decoration-color: green;
}
.dots input[type="number"]:hover {
text-decoration-color: blue;
}
input[type='number']::placeholder {
display:block;
font-size: 125%;
height: 100%;
color:black;
font-weight:bold;
opacity: 1;
letter-spacing: .15em;
}

@media screen and (max-width: 600px){

table {
margin: 4em auto;
width: auto;
line-height: 20px;
border: 1px solid gray;
} table td.prev, table td.next {
width: 22px;
font-size: 17px;
line-height: 6px;
border: none;
}
.little input::-webkit-outer-spin-button,
.little input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} .little input[type="number"]{
-moz-appearance: textfield;
}
input.numbi {
font-size: 125%;
color: red;
padding:0;
text-align: center;
margin: 8px 0 -8px 0;
border: .06em solid red;
box-shadow: inset 0 0 0 .06em red;
}
.little {
display: inline-block;
width: 50px;
line-height: 40px;
margin: 0 5px 0 0;
text-align: center;
padding: 0 1px;
font-size: 18px;
border:none;
}
.page {
display: none;
}
.dots {
display: none;
}
.currentpage {
display: none;
}

}