:root {
  --mainColor1: #44596a;
  --mainColor2: #526f7f;
  --mainColor3: #76928a;
  --accentColor1: #a3afae;
  --accentColor2: #c9cac8;
  --whiteColor: #fcfcfc;
}

* {
  font-family: "POPPINS";
}

#left_login_container {
  background: linear-gradient(
    135deg,
    rgba(255, 244, 207, 1) 0%,
    rgba(255, 175, 0, 1) 25%,
    rgba(211, 74, 36, 1) 50%,
    rgba(153, 40, 0, 1) 75%
  );
  height: 100vh;
}

#right_login_container {
  height: 100vh;
}

#brand_name {
  color: white;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  row-gap: 0px;
  justify-content: end;
}

#brand_name span {
  background: linear-gradient(
    135deg,
    rgba(255, 175, 0, 1) 25%,
    rgba(211, 74, 36, 1) 50%,
    rgba(153, 40, 0, 1) 75%
  );
  -webkit-background-clip: text !important;
  height: auto;
  padding: 0;
  margin: 0;
  font-size: 6.5em;
  line-height: 0.8;
}

@media only screen and (max-width: 767px) {
  #body_container {
    display: flex !important;
    flex-direction: column !important;
  }

  .brand_el {
    font-size: 2.5rem !important;
  }

  #left_login_container {
    height: 15vh;
    border-radius: 0 0 20px 20px !important;
  }
  #right_login_container {
    height: 85vh;
  }

  .card {
    border-radius: 1rem !important;
  }

  #login_form button {
    width: 100%;
    background: linear-gradient(
      135deg,
      rgba(255, 175, 0, 1) 25%,
      rgba(211, 74, 36, 1) 50%,
      rgba(153, 40, 0, 1) 75%
    );
    border: 0px;
  }
}