@media screen and (min-width: 0px) and (max-width: 479px) {
.container {
width: 380px!important;
padding: 10px!important;
} 
.word, .hidehint, .hint, .time {
font-size: 14px!important;
}
.content input {
height: 25px!important;
}
}
body {
background: url(../../back/misc/1.jpg);
background-attachment: fixed;
background-size: cover;
}
.poppins {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
.container {
width: 500px;
padding: 20px 30px 10px 30px;
background-color: #fff;
border: 15px double #106bb8;
}
.word {
user-select: none;
font-size: 28px;
letter-spacing: 24px;
word-break: break-all;
text-transform: uppercase;
}
p {
font-size: 18px;
margin-bottom: 10px;
}
.butts {
text-align: center;
}
.game-btn {
background-color: #106bb8;
color: #fff;
}
.content input {
width: 100%;
border: 1px solid blue;
height: 45px;
margin-bottom: 10px;
padding: 0 10px;
font-size: 18px;
border-radius: 5px;
}
.content input:focus {
border: 2px solid #722883;
}
.content input::placeholder {
color: #aaa;
}
.content input:focus::placeholder {
color: #bfbfbf;
}
.hint {
padding-left: 10px;
color: green;
font-size: 16px;
}
.hidehint {
font-size: 18px;
color: #dc0000;
cursor: pointer;
}
.time {
margin-top: 10px;
}