body {
    background-image: url('template.png');
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    min-height: 100vh;
    min-width: 100vw;
    max-width: 100%;
    max-height: 100%;

  }
  

  
  .number {
    position: absolute;
    font-family: "Roboto Mono", monospace;
        font-size: 1.2pc;
    font-weight: bold;
    color: rgb(0, 0, 126);
  }
  
  .number-1 {
    font-size: 1.5pc;
    font-weight: bold;
    color:rgb(71, 71, 71);
    top: calc(0% + 1vw);
    left: 1vw;
  }
  
  .number-2 {
    top: calc(28%);
    left: 1vw;
  }
  
  .number-3 {
    top: calc(83%);
    left: 1vw;

}

  .number-4 {
    top: calc(15%);
    left: 1vw;
  }
  
  .number-5 {
    top: calc(9%);
    left: 1vw;
  }

  .number-6 {
    top: calc(12% );
    left: 1vw;
  }

  .number-7 {
    top: calc(5%);
    left: 1vw;
  }

  .number-8 {
    top: calc(80%);
    left: 1vw;
  }
  .number-9 {
    font-size: 1.4pc;
    font-weight: bold;
    color:rgb(255, 255, 255);
    top: calc(86%);
    left: 1vw;
  }

  .number-10 {
    top: calc(31%);
    color: green;
    left: 1vw;
  }

  .number-10.negative {
    color: red; /* color for negative numbers */
  }

  .graph {
    top: calc(100%);
    left: 1vw;

}

.number-11 {
    top: calc(18%);
    left: 1vw;
  }