:root {
    --gray: #808080;
    --gray-medium: #c1bfbf;
    --gray-light: #d3d3d3;
    --paper-color: #eff8fe;
  }
  
  h1 {
    font-size: 1.2rem;
  }

  .container {
    padding-left:1rem;
    padding-right:1rem;
    padding-top: 1rem;
    transform:rotate(-3deg);
    z-index: 1;
    color: #2c2d2e;
  }
  
  .paper {
    position: relative;
    padding: 10px;
    /*width: 12rem;
    min-height: 120px;*/
    background: linear-gradient(
      135deg,
      var(--paper-color),
      85%,
      var(--gray-light)
    );
    box-shadow: 1px 0 1px var(--gray);
    text-align: center;
    font-family:'Consolas Bold',monospace;
  }
  
  /* Tacks */
  .paper::before {
    content: "";
    position: relative;
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray);
  }
  
  .paper::after {
    content: "";
    position: relative;
    right: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray);
  }
  
  .numbers {
    display: flex;
    /*min-height: 11rem;*/
    height: 60%;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .number {
    position: relative;
    width: 100%;
    background: linear-gradient(
      to right,
      var(--paper-color),
      80%,
      var(--gray-light)
    );
    border-top: 1px dashed var(--gray);
    box-shadow: 1px 1px 1px var(--gray);
    transform-origin: center top;
  }
  
  .link-wrapper {
    position: absolute;
    display: flex;
    top: 0;
    transform: rotate(90deg);
    transform-origin: top left;
    font-size: 0.5rem;
    margin-left: 1rem;
    margin-top: 1rem;
    align-items: center;
    width: 10rem;
    font-family:'Courier New', Courier, monospace;
  }
  
  .link-wrapper i {
    margin-right: 5px;
    font-size: 1.1rem;
  }
  
  .link-wrapper a {
    text-decoration-style: dashed;
    font-family: sans-serif;
  }
  
  .number:nth-child(2) {
    transform: skew(-5deg, 0deg);
    background: var(--paper-color);
  }
  
  .number:nth-child(2)::after,
  .number:nth-child(4)::after {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      var(--gray-light),
      5%,
      rgba(211, 211, 211, 0)
    );
  }
  
  .number:nth-child(1),
  .number:nth-child(3) {
    background: linear-gradient(
      to right,
      var(--paper-color),
      60%,
      var(--gray-light)
    );
  }
  
  .number:nth-child(4) {
    transform: skew(-8deg, 0deg);
    background: var(--paper-color);
  }
  
  .number:nth-child(5) {
    transform: skew(-3deg, 0deg);
  }
  

  .paper p {
    font-size: 8px;
  line-height: 12px;
  margin: 0px;
  }