.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60vw;
  margin: 0 auto;
  margin-top: 100px;
  background-color: #fff;
  padding: 20px;
  border-radius: 0.75em;
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-top: 1em;
}

.logo {
  width: 25vw;
}
input[type="text"],
input[type="password"] {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 0;
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
    0 0 0 1px hsla(0, 0%, 0%, 0.05), 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
    0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
  padding: 1em;
  border-radius: 3px;
  box-sizing: border-box;
  border: none;
}
button {
  width: calc(100% - 20px);
}

@media screen and (max-width: 767px) {
  .container {
    width: 80vw;
    margin-top: 200px;
  }
  .logo {
    width: 50vw;
  }
}

@media (prefers-color-scheme: dark) {
  .container {
    background-color: #1a1a1d;
    color: #cfcfd3;
  }

  input[type="text"],
  input[type="password"] {
    background-color: #22232a;
    color: #fff;
    border: none;
  }

  .logo {
    filter: brightness(100);
  }
}