.shrinking-wrapper {
  background-image: radial-gradient(circle closest-corner at center top, #2F3A44 0%, #222A31 100%);
  background-size: cover;
  background-repeat: no-repeat;
  perspective: 1rem;
}

#shrinking-tip {
  width: 100%;
  position: absolute;
  top: 10%;
  color: #22caf0;
  z-index: 4;
  font-size: 1.8rem;
  font-family: "Fira Sans", sans-serif;
  font-style: italic;
  text-align: center;
  transition: opacity var(--transition-duration) ease;
}

#shrinking-tip-arrow {
  background-image: image-set(url("shrinking_ui/images/sending_arrow.png") 1x, url("shrinking_ui/images/sending_arrow@1.5x.png") 1.5x, url("shrinking_ui/images/sending_arrow@2x.png") 2x, url("shrinking_ui/images/sending_arrow@2.25x.png") 2.25x);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 2rem;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  height: 2rem;
}

@media (orientation: landscape) {
  #shrinking-tip {
    top: 13%;
  }

  #shrinking-tip-arrow {
    margin-top: 0.6rem;
  }
}

#shrinking-tip.hide {
  opacity: 0;
}

#shrinking-cover {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}