:root {
  --blue-primary: rgb(0, 65, 119);
  --blue-secondary: rgb(103, 185, 252);

  --blue-primary-light: rgba(0, 87, 158, 0.664);
  --blue-focus: rgba(0, 119, 199, 0.527);

  --white: #ffffff;
  --gray-border: rgba(128, 128, 128, 0.5);
  --black-shadow: rgba(0, 0, 0, 0.288);
  --black-shadow-light: rgba(0, 0, 0, 0.178);

  --gradient-blue: linear-gradient(
    3deg,
    var(--blue-secondary),
    var(--blue-primary)
  );
}

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

h1 {
  color: var(--blue-primary);
}

p {
  font-size: 13px;
  color: var(--blue-primary-light);
}

a {
  color: var(--blue-primary);
}

.containerLogin {
  display: flex;
  gap: 2rem;
  background: var(--white);
  width: 40%;
  border-radius: 1rem;
  margin: 0 auto;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.inputsLogin {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.containerLogin form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

input {
  padding: 0.5rem;
  border-radius: 1rem;
  border: 1px solid var(--gray-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue-focus);
}

button {
  padding: 0.5rem;
  border-radius: 1rem;
  border: none;
  width: 35%;
  color: var(--white);
  background: rgba(0, 64, 160, 0.699);
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 5px var(--black-shadow-light);
}

.cardWelcome {
  background: var(--gradient-blue);
  border-radius: 6rem 1rem 1rem 6rem;
  width: 100%;
  display: grid;
  place-items: center;
  color: var(--white);
}

img {
  filter: brightness(200%);
  width: 80%;
}

.form-message {
  margin-top: 10px;
  font-size: 0.9rem;
}

.form-message.error {
  color: red;
}

.form-message.success {
  color: green;
}