@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.jpg);
background-attachment: fixed;
background-size: cover;
}
.roofdrop {
position: relative;
margin: 20px;
}
.roofdrop .logo {
width: 55%;
}
.open-inst {
color: #d4d4d4;
}
.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 .enterscore, .roofdrop .enterscore input[type="text"] {
color: #fff;
}
.roofdrop .tdcell {
width: 42px;
height: 42px;
}
.roofdrop .game-btn {
background-color: #344451;
color: #d4d4d4;
border: 1px solid #7d7b7b;
}
.roofdrop .score-board {
max-width: 565px;
color: #d4d4d4;
}
.roofdrop .score-board tr:nth-child(even), .roofdrop .score-board .title {
background-color: #344451;
}
.roofdrop .score-board tr:nth-child(odd) {
background-color: #516677;
}
.note .text {
max-width: 800px;
}
.note2 .text, .note3 .text {
max-width: 400px;
}
.roofdrop .score-alert {
bottom: 5%;
}