css.css

@import url("./nord.css");

:root {
}

button {
  width: 80px;
}

#uName {
  height: 45px;
  width: 100%;
  border-radius: 50px;
  padding: 10px;
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  border: none;
}

#uName:focus {
  outline: none;
}

#pWord {
  height: 45px;
  width: 100%;
  border-radius: 50px;
  padding: 10px;
  grid-row: 2;
  grid-column: 2;
  justify-self: center;
}

#pWord:focus {
  outline: none;
}

#lun {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}

#lpw {
  grid-row: 2;
  grid-column: 1;
  align-self: center;
}

#submit {
  border-radius: 50px;
  padding: 10px;
  grid-row: 3;
  background-color: var(--nord1);
  align-self: center;
  justify-self: center;
  grid-column-start: 1;
  grid-column-end: 3;
  width: 75%;
  border: none;
}

#submit:active {
  background-color: rgb(43, 43, 43);
}

#login-form {
  grid-row: 3;
  grid-column: 2;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto auto;
}

#formtype {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: auto auto;
  border-radius: 50px;
  height: 60px;
  background-color: var(--nord1);
  width: 200px;
}

#login {
  grid-column: 1;
  border-radius: 50px;
  padding: 10px;
  height: 45px;
  align-self: center;
  justify-self: center;
  background-color: var(--nord3);
  border: none;
}

#login:active {
  background-color: var(--nord2);
}

#signup {
  grid-column: 2;
  border-radius: 50px;
  padding: 10px;
  height: 45px;
  align-self: center;
  justify-self: center;
  background-color: var(--nord1);
  border: none;
}

#signup:active {
  background-color: var(--nord2);
}

body {
  display: grid;
  grid-template-rows: 20% 40% 30% 10%;
  grid-template-columns: 35% 30% 35%;
  background-color: var(--nord0);
}