:root {
  --bg1: #0d1117;
  --bg2: #161b22;
  --fg2: #c9d1d9;
  --alt-fg1: #8b949e;
  --lines: #21262d;
  --primary: #1f6feb;
}

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

.page-wrap {
  align-items: center;
  background-color: var(--bg1);
  display: flex;
  height: 100vh;
  padding: 0;
}

.session-form-hold {
  margin: 0 auto;
  max-width: 480px;
  position: relative;
  width: 100%;
}

.mat-card {
  background-color: var(--bg2);
  color: var(--fg2);
  padding: 0 0 18px;
  border: 0;
}

.logo-wrapper {
  background-color: var(--bg2);
  background-image: url('stars-sky-800w.jpg');
  background-size: cover;
  border-bottom: solid 1px var(--lines);
  height: 250px;
  padding: 20% 0;
  position: relative;
  text-align: center;
}

.logo {
  height: auto;
  width: 256px;
}

.form-container {
  padding: 20px 32px 8px;
}

.input-field {
  margin-bottom: 16px;
}

label {
  display: block;
  color: var(--fg2);
  margin-bottom: 4px;
}

input {
  width: 100%;
  padding: 8px;
  background-color: var(--bg1);
  color: var(--fg2);
  border: 1px solid var(--lines);
  border-radius: 4px;
}

.submit-button {
  width: 100%;
  padding: 10px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #388bfd;
}

.copyright {
  color: var(--alt-fg1);
  font-size: 85%;
  margin: 10px 0;
  text-align: center;
}

@media (max-width: 600px) {
  .page-wrap {
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
  }
  .mat-card {
    min-height: 100vh;
  }
}