#hex-container {
   position: absolute;
   width: 720px;
   top: 50%;                         /* 3 */
   left: 50%;
   transform: translate(-50%, -50%);
}

.hex-left {
  float: left;
  border-right: 180px solid var(--tile-background-color);;
  border-top: 312px solid transparent;
  border-bottom: 312px solid transparent;
}

.hex-center {
  float: left;
  width: 360px;
  height: 624px;
  background-color: var(--tile-background-color);;
  display: block;
}

.hex-right {
  float: left;
  border-left: 180px solid var(--tile-background-color);;
  border-top: 312px solid transparent;
  border-bottom: 312px solid transparent;
}

.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#logo-image {
  margin-top: 50px;
  margin-bottom: 20px;
  margin-left: 27px;
}

#login-button, #send-instructions-button  {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 200px;
}

#back-to-login-button {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 166px;
}

#id_username {
  width: 320px;
}
#id_password {
  width: 320px;
}
#id_email {
  width: 320px;
}


#forgot-your-password-text {
    color: var(--sub-text-color);
}