@media screen and (min-width: 0px) and (max-width: 479px) {
.shift-input {
font-size: 24px!important;
width: 44px!important;
height: 44px!important;
}
.instruct .text {
max-width: 325px!important;
}
}
body {
background-image: url("../../back/misc/color.jpg");
background-attachment: fixed;
background-size: cover;
}
.logo {
width: 80%;
padding-top: 20px;
}
h4 {
margin: 0px 0 10px 0;
background: #F16C37;
background: linear-gradient(135deg, #F16C37, #6A846B);
opacity: 0.6;
font-weight: 900;
padding: 3px 15px;
}
.shift-wrap {
margin: 0 15px 0 15px;
}
.shift-board {
display: table;
margin: auto;
padding: 5px;
background-color: red;
border: 15px inset #000;
border-radius: 10px;
}
.shift-input {
background-color: #fff;
border-radius: 5px;
color: #443a00;
font-weight: 900;
font-size: 34px;
width: 54px;
height: 54px;
margin: 3px;
}
.puzscore {
width: 60px;
font-weight: 900;
padding-left: 5px;
}
.zmoves {
padding: 5px 15px 0px 10px;
font-weight: 900;
}
.shift-input:hover {
-webkit-transform: scale(1.1); 
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.game-btn {
background: #6F84FE;
background: linear-gradient(180deg, #6F84FE, #0FCCA6);
}
.game-btn:hover {
color: #0b028f;
background: #6F84FE;
background: linear-gradient(0deg, #6F84FE, #0FCCA6);
} 
.instruct .text {
max-width: 400px;
}
.instruct label {
color: #800000;
font-weight: 900;
padding: 1px 10px 3px 10px;
position: relative;
}
.instruct input[type="radio"] {
position: relative;
top: 1.5px;
width: 12px;
height: 12px;
margin-left: 3px;
}
.score-board {
max-width: 400px;
border: 15px inset #000;
border-radius: 10px;
}
.score-board h4 {
font-size: 16px;
}
.score-board tr:nth-child(even) {
background: #6F84FE;
background: linear-gradient(0deg, #6F84FE, #0FCCA6);
}
.score-board tr:nth-child(odd) {
background: #6F84FE;
background: linear-gradient(180deg, #6F84FE, #0FCCA6);
}