html, body, #root {
  height: 100%;
  width: 100%;
}

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;

  backdrop-filter: blur(5px);
  background-color: rgba(0,0,0,0.2);
  z-index: 1000;

  width: 100%;
  height: 50px;
}

.desktop {
  padding: 15px;
}

.login {
  transition: backdrop-filter;
  height: 100%;
}

.login.active {
  backdrop-filter: blur(15px);
}

.login .time {
  transition: bottom 1s, opacity 1s;
  height: 100%;
  opacity: 1;
  text-align: left;
  vertical-align: bottom;
  color: white;
  font-size: 60px;
}
.login .time.active {
  height: 0;
  opacity: 0;
}


.login .user {
  opacity: 0;
  transition: opacity 1s, height 1s;
  height: 0;
}

.login .user.active {
  opacity: 1;
  height: 100%;
}