@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background-image: linear-gradient(to bottom, #13678a, #00537c, #012030);
  height: 100vh;
  width: 100vw;
}

main {
  position: relative;
  height: 100vh;
  width: 100vw;
}

#login {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  width: 250px;
  height: 500px;
  border: 1px solid black;
  border-radius: 15px;
  overflow: hidden;

  transition: width 0.3s, height 0.3s;
  transition-timing-function: ease;
}

#img {
  display: block;
  background-image: url(../Imagens/premium_photo-1664478157873-50d4963c1d11.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 200px;
}

#form {
  display: block;
  padding: 10px;
}

#form > h1 {
  text-align: center;
  margin: 15px;
}

#form {
  font-size: 0.8em;
  text-align: center;
}

label {
  display: none;
}

#divEmail {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 5px;
  margin: 5px 0px;
}

#divEmail > input {
  height: 20px;
  width: 50%;
  text-align: center;
}

#divPass {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 5px;
  margin: 5px 0px;
}

#divPass > input {
  height: 20px;
  width: 50%;
  text-align: center;
}

#divButton > input {
  display: block;
  width: 70%;
  padding: 10px;
  margin: auto;
  background-color: #01aa39;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
}

#divButton > input:hover {
  background-color: #02c744de;
  transition: 0.3s;
}

#divButton > a {
  display: block;
  text-align: center;
  font-size: 0.8em;
  color: black;
  margin: 10px;
}