* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: Arial, sans-serif;

  background:
    linear-gradient(
      135deg,
      #031525,
      #063b59,
      #02111d
    );

  color: white;
}

.login-container {
  width: 380px;
  padding: 40px;

  text-align: center;

  background:
    rgba(
      4,
      27,
      45,
      0.95
    );

  border:
    1px solid
    rgba(
      0,
      204,
      255,
      0.4
    );

  border-radius: 18px;

  box-shadow:
    0 0 35px
    rgba(
      0,
      204,
      255,
      0.2
    );
}

.login-container h1 {
  margin-top: 0;
  margin-bottom: 8px;

  color: #00ccff;
}

.login-container h2 {
  margin-top: 0;
  margin-bottom: 30px;

  font-size: 18px;
  font-weight: normal;

  color: #b9ddea;
}

#loginForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#loginForm input {
  width: 100%;
  padding: 14px 16px;

  font-size: 16px;

  color: white;
  background: #061d2c;

  border: 1px solid #1c607d;
  border-radius: 9px;

  outline: none;
}

#loginForm input:focus {
  border-color: #00ccff;
}

#loginForm button {
  padding: 14px;

  font-size: 17px;
  font-weight: bold;

  color: #00131d;
  background: #00ccff;

  border: none;
  border-radius: 9px;

  cursor: pointer;
}

#loginForm button:hover {
  filter: brightness(1.1);
}

#loginMessage {
  min-height: 22px;
  margin-bottom: 0;

  color: #ff8d8d;
}