@import url('colors.css');

.btn-theme {
  background-color: var(--theme-color) !important;
  color: white !important;
}

#app {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: right;
  overflow: hidden;
}

#RegisterForm,
#LoginForm {
  position: absolute;
  top: 50%;
  left: 25%;
  font-family: Nunito;
  background: #d9d9d934;
  border-radius: 10px;
  min-width: 350px;
  max-width: 450px;
  z-index: 400;
  border: 1px solid #ffffff4a;
  padding: 30px 10px;
  transform: translate(-50%, -50%);
}

h3 {
  font-weight: bolder;
}

.form-control {
  background-color: #ffffff43 !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
}

.form-control::placeholder {
  color: #f4f4f4be !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill {
  background-color: #ffffff43 !important;
  color: #fff !important;
}

button {
  transition: all !important;
  transition-duration: 500ms !important;
  font-size: 18px !important;
  font-weight: bolder !important;
  background-color: #fff !important;
  color: #000 !important;
}

button:hover {
  background-color: var(--theme-color) !important;
  color: #fff !important;
}

@media screen and (max-width: 930px) {
  #app {
    background-position: left;
  }

  #RegisterForm,
  #LoginForm {
    left: 35%;
  }
}

@media screen and (max-width: 600px) {

  #RegisterForm,
  #LoginForm {
    left: 50%;
  }
}