<style>
    body{
    font-family: Arial, Helvetica, sans-serif;
    background-image: linear-gradient(45deg, cyan, magenta);
    text-align: center;
}

.tela-login{
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 80px;
    border-radius: 15px;
    color: white;
}
input{
    padding: 15px;
    border: none;
    outline: none;
    font-size: 15px;
    border-radius: 10px;
}

button{
    background-color: dodgerblue;
    border: none;
    padding: 15px;
    width: 100%;
    border-radius: 10px;
    color: white;
    font-size: 15px;
    cursor: pointer;
}
button:hover{
    background-color: deepskyblue;
}

#register{
    text-decoration: none;
    color: white;
}

</style>

<body>

<div class="tela-login">

<h1>Login</h1>

<% if(messages.error) { %> 
    <%= messages.error %> 
<% } %> 

<form action="/login" method="POST" > 


<div>
    <label for='email'></label>
    <input type="email" id="email" name="email" required placeholder="Email">
</div>

<br>

<div>
    <label for='password'></label>
    <input type="password" id="password" name="password" required placeholder="Senha">
</div>

<br><br>

<button type="submit">Login</button>

<br><br>

</form>
<a id="register" href="/register">Cadastrar</a>

</div>

</body>