body {
  background-image: url("img/Intranet.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Video Toaster */
#overlay-tl, #overlay-br {
  position: fixed;
  display: grid;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
}

#overlay-tl div,
#overlay-br div {
  width: 60px;
  height: 60px;
}

@keyframes slide-in-tl {
  from { transform: translate(-100%, -100%); }
  to   { transform: translate(0, 0); }
}

@keyframes slide-in-br {
  from { transform: translate(var(--start-dist), var(--start-dist)); }
  to   { transform: translate(calc(-1 * var(--end-dist)), calc(-1 * var(--end-dist))); }
}

#overlay-tl.fade-out,
#overlay-br.fade-out {
  opacity: 0;
}