:root
   {
      --ruler-color-1: rgba(0, 0, 0, 1);
      --ruler-color-2: rgba(0, 0, 0, 0.5);
      --ruler-bg-color: #ffffff;
      --ruler-invert-color-1: rgba(255, 255, 255, 1);
      --ruler-invert-color-2: rgba(255, 255, 255, 0.5);
      --ruler-invert-bg-color: #000000;
   }

.ruler
   {
      background-image: linear-gradient(90deg, var(--ruler-color-1) 0, var(--ruler-color-1) 2%, transparent 2%), 
                        linear-gradient(180deg, var(--ruler-bg-color) 50%, transparent 50%), 
                        linear-gradient(90deg, transparent 50%, var(--ruler-color-1) 50%, var(--ruler-color-1) 52%, transparent 52%), 
                        linear-gradient(180deg, var(--ruler-bg-color) 70%, transparent 70%), 
                        linear-gradient(90deg, transparent 10%, var(--ruler-color-2) 10%, var(--ruler-color-2) 12%, transparent 12%, 
                                               transparent 20%, var(--ruler-color-2) 20%, var(--ruler-color-2) 22%, transparent 22%,     
                                               transparent 30%, var(--ruler-color-2) 30%, var(--ruler-color-2) 32%, transparent 32%,  
                                               transparent 40%, var(--ruler-color-2) 40%, var(--ruler-color-2) 42%, transparent 42%, 
                                               transparent 60%, var(--ruler-color-2) 60%, var(--ruler-color-2) 62%, transparent 62%, 
                                               transparent 70%, var(--ruler-color-2) 70%, var(--ruler-color-2) 72%, transparent 72%, 
                                               transparent 80%, var(--ruler-color-2) 80%, var(--ruler-color-2) 82%, transparent 82%, 
                                               transparent 90%, var(--ruler-color-2) 90%, var(--ruler-color-2) 92%, transparent 92%
                                       );
      background-size: 10px 10px;
      background-repeat: repeat-x;
      min-height: 10px;
      padding-top: 10px;
      text-align: center;
      width: 100%;      
   }

.ruler-invert
   {
      background-image: linear-gradient(90deg, var(--ruler-invert-color-1) 0, var(--ruler-invert-color-1) 2%, transparent 2%), 
                        linear-gradient(180deg, var(--ruler-invert-bg-color) 50%, transparent 50%), 
                        linear-gradient(90deg, transparent 50%, var(--ruler-invert-color-1) 50%, var(--ruler-invert-color-1) 52%, transparent 52%), 
                        linear-gradient(180deg, var(--ruler-invert-bg-color) 70%, transparent 70%), 
                        linear-gradient(90deg, transparent 10%, var(--ruler-invert-color-2) 10%, var(--ruler-invert-color-2) 12%, transparent 12%, 
                                               transparent 20%, var(--ruler-invert-color-2) 20%, var(--ruler-invert-color-2) 22%, transparent 22%,     
                                               transparent 30%, var(--ruler-invert-color-2) 30%, var(--ruler-invert-color-2) 32%, transparent 32%,  
                                               transparent 40%, var(--ruler-invert-color-2) 40%, var(--ruler-invert-color-2) 42%, transparent 42%, 
                                               transparent 60%, var(--ruler-invert-color-2) 60%, var(--ruler-invert-color-2) 62%, transparent 62%, 
                                               transparent 70%, var(--ruler-invert-color-2) 70%, var(--ruler-invert-color-2) 72%, transparent 72%, 
                                               transparent 80%, var(--ruler-invert-color-2) 80%, var(--ruler-invert-color-2) 82%, transparent 82%, 
                                               transparent 90%, var(--ruler-invert-color-2) 90%, var(--ruler-invert-color-2) 92%, transparent 92%
                                       );
      background-size: 10px 10px;
      background-repeat: repeat-x;
      min-height: 10px;
      padding-top: 10px;   
      text-align: center;
      width: 100%;      
   }
.ruler-viewport
   {
      position: fixed;
      top: 0rem;
      left: 0rem;
      right: 0rem;
      background-color: black;
      color: white;
      z-index: 1;
   }
.ruler-viewport .value
   {
          
   }