.login {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  border-radius: 16px;
  background-color: var(--dark);
  cursor: pointer;
  transition: width 2s,
  height 2s;
}

.login:hover {
  bottom: 17px;
  right: 17px;
  border: var(--light) 3px solid;
}

.login img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  transition: top 1.5s,
  width 1.5s;
}

.login h1 {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  white-space: nowrap;
  font-size: 1px;
  color: var(--light);
  opacity: 0;
  transition: all 2s;
}

.login input {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1px;
  height: 1px;
  background-color: var(--light);
  opacity: 0;
  transition: all 2s;
  border: none;
  font-size: 18px;
  font-weight: bold;
  padding: 8px;
}

.input-1 {
  top: 30%;
}

.input-2 {
  top: 50%;
}

.login.open {
  width: 350px;
  height: 380px;
  bottom: 18px;
  right: 18px;
  border: var(--light) 2px solid;
  cursor: default;
}

.login.open img {
  top: 85%;
  width: 25%;
  cursor: pointer;
}

.login.open h1 {
  font-size: 32px;
  opacity: 1;
}

.login.open input {
  height: 50px;
  width: 280px;
  opacity: 1;
}