body {
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: var(--block-space);
}

#app-wrapper.just-logged-in {
  animation: app-entrance 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#app-wrapper.just-logged-in #nav,
#app-wrapper.just-logged-in #sidebar-left,
#app-wrapper.just-logged-in #sidebar-right {
  animation: app-entrance-slide 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#app-wrapper.just-logged-in #nav {
  animation-delay: 0.2s;
}

#app-wrapper.just-logged-in #sidebar-left {
  animation-delay: 0.4s;
}

#app-wrapper.just-logged-in #sidebar-right {
  animation-delay: 0.6s;
}

#app-wrapper.just-logged-in #main-content {
  animation: app-entrance-slide 2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.8s;
}

@keyframes app-entrance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes app-entrance-slide {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[popover] {
  background-color: var(--color-bg);
  color: var(--color-text);
}