<script>
  // This component is overridden when running in a real app.
  // This simply serves as a placeholder component for the real screen router.
</script>

<div>
  <h1>Screen Slot</h1>
  <span>
    The screens that you create will be displayed inside this box.
    <br />
    This box is just a placeholder, to show you the position of screens.
  </span>
</div>

<style>
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    border-style: dashed !important;
    border-width: 1px;
    color: #000000;
    background-color: rgba(0, 0, 0, 0.05);
    flex: 1 1 auto;
  }
</style>
