Looking to implement a responsive login form using Flexbox and achieve a design similar to the mockup images. How can I accomplish this?
.wrapper {
display: flex;
flex-flow: row wrap;
text-align: center;
background: linear-gradient(to bottom, #F4F6F9, #D3D8E8);
font-family: Arial;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div class="wrapper">
<main class="main">
<h2>Login</h2>
<form method="POST" action="main.html">
<label for="username"><b>Username:</b></label>
<input id="username" type="text" placeholder="Username" required/><br/>
<label for="password"><b>Password:</b></label>
<input id="password" type="password" placeholder="Password" required/><br/>
<input class="button" type="submit" value="Login"/><br/>
</form>
</main>
</div>
</body>
</html>