@keyframes logo {
  to {
    width: 100px;
    height: 121px;
    top: 80px;
    left: 77px;
    transform: scale(1);
  }
}

#logoLogIn {
  position: absolute;
  animation: logo 1s forwards;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/img/join_logo_header.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@media screen and (max-width: 1159px) {
  @keyframes logorepo {
    to {
      width: 64px;
      height: 78px;
      top: 37px;
      left: 38px;
      background-image: url(/img/join_logo_header.svg);
    }
  }

  #logoLogIn {
    position: absolute;
    animation: logorepo 0.75s forwards;
    animation-delay: 0.5s;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(/img/join_logo.svg);
  }
  @keyframes fadeInRepo {
    to {
      background-color: #f6f7f8;
      z-index: -99;
    }
  }
  #bgLogInRepo {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 9;
    animation: fadeInRepo 0.75s forwards;
    animation-delay: 0.5s;
    background-color: #2a3647;
  }
}

@media screen and (max-height: 700px) {
  @keyframes logorepo {
    to {
      width: 32px;
      height: 32px;
      top: 8px;
      left: 8px;
      background-image: url(/img/join_logo_header.svg);
    }
  }
}