body {
  background-color: #f7f7f7;
}

#login-container {
  width: 450px;
  max-width: 90%;
  margin: auto;
  margin-top: 50px;
  background-color: #fff;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 20px 0 0 20px rgba(222, 222, 222, 0.53);
          box-shadow: 0 0 20px 0 0 20px rgba(222, 222, 222, 0.53);
  overflow: hidden;
}
#login-container #trigger-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#login-container #trigger-buttons #signInButton, #login-container #trigger-buttons #signUpButton {
  height: 40px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  border: none;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  color: #9548cb;
  font-weight: bold;
  border-radius: 0;
}
#login-container #trigger-buttons #signInButton.active, #login-container #trigger-buttons #signUpButton.active {
  background-color: #9548cb;
  color: #fff;
}
#login-container #trigger-buttons #signInButton:not(.active):hover, #login-container #trigger-buttons #signUpButton:not(.active):hover {
  background-color: #fff;
  opacity: 0.8;
}
#login-container #trigger-buttons #signInButton:focus, #login-container #trigger-buttons #signUpButton:focus {
  outline: none;
}
#login-container #trigger-buttons #signInForm, #login-container #trigger-buttons #signUpForm {
  width: 100%;
  padding: 10px;
  background-color: white;
}

#login-content {
  padding: 10px;
  border-top: 2px solid #9548cb;
}

#signUpForm {
  display: none;
}

#signInForm input:not([type=submit]), #signUpForm input:not([type=submit]) {
  display: block;
  width: 100%;
  border: none;
  background-color: #eaeaea;
  margin: 10px 0px;
  height: 40px;
  color: #121212;
}
#signInForm input[type=submit], #signUpForm input[type=submit] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  color: white;
  padding: 5px 20px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  font-weight: bold;
  border: 1px solid #f2f2f2;
  color: #fff;
  line-height: 38px;
  background: -webkit-gradient(linear, left top, right top, from(#803BCF), to(#CF68BE));
  background: linear-gradient(to right, #803BCF 0%, #CF68BE 100%);
  -webkit-animation: buttonGradientAnimation 3s ease-in-out infinite;
          animation: buttonGradientAnimation 3s ease-in-out infinite;
  background-size: 200% auto;
  width: 100%;
}
#signInForm input[type=submit]:hover, #signUpForm input[type=submit]:hover {
  background: -webkit-gradient(linear, left top, right top, from(#803BCF), to(#CF68BE));
  background: linear-gradient(to right, #803BCF 0%, #CF68BE 100%);
  color: #444;
}

#signInButton {
  background-color: white;
  color: #34b3a0;
}

#error-message {
  color: red;
  margin-top: 10px;
}

.custom-logo-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  width: 100%;
}
.custom-logo-link img {
  height: 50px;
  width: auto;
}