How to edit the style of a web form - html

Question

So in my CSS I already have a class for my text which makes a clear white box appear behind the text to make it more readable, I would also like to do this for my login page, Id like to make it a black box in the middle of the screen sort of like the steam login page https://store.steampowered.com/login/ but putting it in a div and class doesnt seem to work.
ive tried putting the div in the form and ive also tried putting the form in the div
</div>
<form>
<div class="acc">
Username:<br>
<input type="text" name="Username">
<br>
Password:<br>
<input type="text" name="Password">
</div>
</form>
.acc(
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: normal;
color: #000000;
margin-left: auto;
margin-right: auto;
background-color:black;
text-align:center;
vertical-align: middle;
padding:20px 47px;
}

Answer 1

Try styling the input elements either directly or by applying a class to them. See a working demo below:
body {
background-color: #252831;
color: white;
}
.container {
display: flex;
flex-direction: column;
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
.input-wrap {
margin: 5px;
}
input {
background-color: #353A47;
border: 1px solid #4C4B63;
}
<div class="container">
<form>
<div class="input-wrap">
<label>Username:</label>
<input type="text">
</div>
<div class="input-wrap">
<label>Password:</label>
<input type="password">
</div>
</form>
</div>

Answer 2

Although this is similar to another answer, I've changed the font colour so it will display, rather than black text on a black background
input {
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: normal;
color: #ffffff;
margin-left: auto;
margin-right: auto;
background-color:black;
text-align:center;
vertical-align: middle;
padding:20px 47px;
}