#credentials-container{
  border: var(--borders);
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 500px;
  max-width: var(--max-width);
  background: var(--color5);
  margin: var(--margins);
}
#credentials-container h1{
  background: var(--color1);
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 0 10px 10px;
  border-bottom: var(--borders);
  text-align: left;
}
#credentials-container .credentials-form{
  display: grid;
  grid-template-columns: 50% 50%;
  /*grid-gap: 5px;
  padding: 10px;*/
}
#credentials-container .credentials-form  *{
  margin: 5px 0;
  padding: 5px;
  height: 50px;
  border-radius: 4px;
  border: 1px solid black;
  box-sizing: border-box;
  margin: 5px;
}
#credentials-container .credentials-form input{
  height: 40px;
  background: var(--input-color);
  font-weight: bold;
  font-size: 15px;
}
#credentials-container .credentials-form button{
  width: 150px;
  background: var(--color2);
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  border: none;
}
#credentials-container .credentials-form button:hover{
  background: var(--color1);
}
#credentials-container .credentials-form button:active{
  background: var(--color4);
}
#credentials-container .credentials-form .credentials-error{
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 80px;
  margin-top: 50px;
  text-align: left;
  background: var(--error-color);
  grid-column: span 2;
  border: none;
}
#credentials-container .credentials-form .credentials-error{
  display: none;
}

#credentials-container > :nth-child(2){
  display: none;
}