.wrapper {
  display: grid;
  grid-template-areas: "Login Info" "Login Info";
  grid-gap: 0px;
  margin-left: auto;
  margin-right: auto;
  /* offset-x | offset-y | blur-radius | color */
  box-shadow: 0px 0px 20px black;
}

.container-right {
  background-color: white;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  width: 350px;
  grid-area: Info;
}

.container-left {
  background-color: black;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  width: 550px;
  grid-area: Login;
}

@media only screen and (max-width: 900px) {
  .container-left {
    display: none;
  }
  .wrapper {
    width: 350px;
  }
  .container-right {
    border-radius: 20px;
  }
}
/* Fading animation */
.fadeIn {
  animation: fadeIn 1s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/* Fading animation */
.fadeOut {
  animation: fadeOut 1s;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}