@font-face {
    font-family: 'pixel';
    src: url('pixelfont.ttf');
  }

  @font-face {
    font-family: 'pixel2';
    src: url('pixel2.ttf');
  }

  @font-face {
    font-family: 'dgtext';
    src: url('textdg.otf');
  }
  
   #thefile {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
  }
  #content {
    position: relative;
    width: 128px;
    height: 256px;
  }
  
  #image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none; /* Make the image non-interactive */
  }
  
  #canvas {
    position: absolute;
    width: 134px;
    top: 50px;
    left: 142px;
    z-index: 2;
    transform: rotate(90deg);
    transform-origin: top left;
  }
  
  
  
  .hello {
      width: 8em;
      padding: 1em 0;
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      text-transform: uppercase;
      font-family: pixel; color: #ff4400; position: fixed; left: 80px; z-index: 99999;
      top: 10;
  }
  
      span {
          animation: marquee 7s infinite normal linear;
          padding: 0 0.5em;
      }
  
  @keyframes marquee {
      to {
          transform: translateX(-100%);
      }
  }
  
  
  #background-image {
    position: fixed;
    top: 10px;
    left: 10px;
    pointer-events: none; /* Disable pointer events on the background image */
  }