Ahora vamos a estilizar el HTML de la pantalla "nueva contraseña". Diseño nos sugirió la siguiente visual tanto para móvil como para desktop. La única salvedad es que en esta última versión no se debe mostrar el logo.

Estilos a implementar

:root {
  --white: #fff;
  --black: #000;
  --very-light-pink: #c7c7c7;
  --text-input-field: #f7f7f7;
  --hospital-green: #acd9b2;
  --sm: 14px;
  --md: 16px;
  --lg: 18px;
}

body {
  margin: 0;
  font-family: "Quicksand", sans-serif;
}

.Login {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}

.form-container {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 300px;
}

.logo {
  width: 150px;
  margin-bottom: 48px;
  justify-self: center;
  display: none;
}

.title {
  font-size: var(--lg);
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}

.subtitle {
  color: var(--very-light-pink);
  font-size: var(--md);
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 32px;
  text-align: center;
}

.label {
  font-style: var(--sm);
  font-weight: bold;
  margin-bottom: 4px;
}

.form {
  display: flex;
  flex-direction: column;
}

.input {
  background-color: var(--text-input-field);
  border: none;
  border-radius: 8px;
  height: 30px;
  font-size: var(--md);
  padding: 6px;
  margin-bottom: 12px;
}

.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

.login-button {
  margin-top: 12px;
  margin-bottom: 30px;
}

@media (max-width: 640px) {
  .logo {
    display: block;
  }
}

Display Grid para centrar elementos

Como puedes ver en nuestra clase login, con solo dos líneas de código podemos centrar nuestro contenido:

display: grid;
place-items: center;

La propiedad abreviada place-items te permite alinear elementos, tanto horizontal como verticalmente, en un contenedor con Grid o Flexbox. Es decir, es la abreviatura de las propiedades align-items y justify-items. Si no se establece el segundo valor, se utiliza el primero para ambas alineaciones.

Cómo ordenar los estilos

Una manera de hacerlo es según su propósito, siguiendo el siguiente orden:

1. Posicionamiento
2. Modelo de caja