.title {
  font-size: 8rem;
  font-family: var(--titleFont);
  text-align: center;
}

.loginContainer {
  display: flex;
  height: 100vh;
  align-self: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 50px 0 50px;
  border-radius: 20px;
}

.btnContainer {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  height: 86px;
  width: 100%;
  opacity: 100%;
  transition: var(--standardTransition);
}

.btnContainer.hide {
  height: 0px;
  opacity: 0%;
}

#btnLogin,
#btnSignUp {
  margin: 5px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  white-space: nowrap;
}

.loginForm {
  display: flex;
  flex-direction: column;
  height: 288px;
  padding: 10px 25% 10px 25%;
  overflow: hidden;
  opacity: 100%;
  transition: var(--standardTransition);
}

.loginForm.hide {
  height: 0px;
  opacity: 0%;
}

#lblLogin {
  margin: 10px 0 10px 0;
}

.imgStartPage {
  content: url('../../assets/projectCard6.svg');
  align-self: center;
  width: 40%;
  aspect-ratio: 505 / 596;
}

.btnGuest {
  color: white;
  cursor: pointer !important;
  grid-column: 1 / 3;
}

.btnGuest:hover {
  color: white;
}

@media only screen and (max-width: 800px) {
  .title {
    font-size: 5rem;
    line-height: 5rem;
    white-space: nowrap;
    margin-bottom: 3rem;
  }

  .btnContainer {
    grid-template-columns: 60%;
    margin-left: auto;
    margin-right: auto;
    height: 134px;
  }

  #btnLogin,
  #btnSignUp {
    grid-column: 1 / 3;
  }
}