@media screen and (min-width: 0px) and (max-width: 599px) {
.tdcell {
width: 25px!important;
height: 25px!important;
}
.enterscore input[type="text"] {
font-size: 16px!important;
}
}
@media screen and (min-width: 599px) and (max-width: 767px) {
.tdcell {
width: 30px!important;
height: 30px!important;
} 
}
@media screen and (min-width: 0px) and (max-width: 599px) {
.enterscore input[type="text"] {
font-size: 16px!important;
}
.enterscore .text {
font-size: 18px!important;
}
}
body {
background-image: url(../../back/misc/13.jpg);
background-attachment: fixed;
background-size: cover;
}
.roofdrop {
position: relative;
margin: 20px;
}
.roofdrop .logo {
width: 40%;
}
.roofdrop  .game-table {
border-collapse: collapse;
}
.roofdrop .game-table img {
width: 100%;
height: 100%;
}
.roofdrop .score-inputs {
position: relative;
margin-bottom: 20px;
}
.roofdrop .enterscore .text {
font-size: 25px;
}
.roofdrop .enterscore input[type="text"] {
border: 0;
margin: 10px 0px;
font-size: 23px;
background-color: inherit;
color: inherit;
vertical-align: unset;
}
.roofdrop .tdcell {
width: 42px;
height: 42px;
padding: 1px;
}
.roofdrop .game-btn {
background-color: #98caeb;
color: #000;
border: 1px solid #7d7b7b;
}
.roofdrop .score-board {
max-width: 500px;
box-shadow: 1px 2px 2px 1px #000;
}
.roofdrop .score-board .top {
border-bottom: 1px solid #b2d6f0;
}
.roofdrop .score-board tr:nth-child(even), .roofdrop .score-board .title {
background-color: #b2d6f0;
}
.roofdrop .score-board tr:nth-child(odd) {
background-color: #cce7fb;
}
.note .text {
max-width: 800px;
}
.note2 .text, .note3 .text {
max-width: 400px;
}
.roofdrop .score-alert {
bottom: 5%;
}