body {
        font-family: sans-serif;
        padding: 40px;
        background: aliceblue;
    }

    /* Coloris z-index */
    .clr-picker {
        z-index: 100000; 
    }

    /* Dropzone */
    .dropzone {
        border: 1px solid #888;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #888;
        font-size: calc(var(--flat-page-height)/10);
        text-align: center;
        transition: background 0.2s, border-color 0.2s;
        position: absolute;
        overflow: hidden;
        box-sizing: border-box;
    }
    .dropzone.dragover {
        border-color: #3b82f6;
        background: #eef4ff;
        color: #3b82f6;
    }
    .dropzone img {
      width: 100%;
      height: 100%;
      object-fit: cover;     /* fills div, may crop */
      z-index: 99;
      cursor: pointer;
      box-sizing: border-box;
    }

    /* Page information text layer */
    .overlay-info {
      user-select: none;
      position: absolute;
      z-index: 101;
      color: red;
      cursor: default;

      font-weight: bold;
      text-shadow:
          -2px  0   #fff,
          2px  0   #fff,
          0   -2px #fff,
          0    2px #fff,
          -2px -2px #fff,
          2px -2px #fff,
          -2px  2px #fff,
          2px  2px #fff;
    }
    .overlay-info span.large-text {
      font-size: calc(var(--flat-page-height)/3);
    }
    .overlay-info span.medium-text {
      font-size: calc(var(--flat-page-height)/6);
    }

    /* Page menu */
    #page-menu[hidden] { display: none; }
    #page-menu {
      position: absolute;
      left:0px;
      padding: 10px 0px;
      top:0px;
      background-color: whitesmoke;
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.1);
      z-index: 200;
      cursor: pointer;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 14px;
      border-radius: 10px;
    }
    .page-menu-item-disabled {
      padding: 6px 16px;
      color: rgba(0, 0, 0, 0.1);
    }
    .page-menu-item {
      padding: 6px 16px;
      color: black;
    }
    .page-menu-item:hover {
      padding: 6px 16px;
      color:red;
    }

    /* Buttons */
    .button {
      position: fixed;
      display: flex;
      right: 24px;

      width: 64px;
      height: 64px;
      border-radius: 50%;

      background: #e02320;      /* red */
      color: white;
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.05em;

      cursor: pointer;

      display: flex;
      align-items: center;
      justify-content: center;

      box-shadow: 0 6px 18px rgba(0,0,0,0.3);
      z-index: 100;
      user-select: none;
    }
    .set-background {
      bottom: 176px;
    }
    .instructions {
      bottom: 100px;
      font-size: 32px!important;
    }
    .to-pdf {
      bottom: 24px;
    }
    .button:hover {
      background: #261ab0;
    }

    /* Instruction modal */
    #instructions-modal[hidden] { display: none; }
    #instructions-modal {
      position: absolute;
      left:0px;
      top:0px;
      min-width: 100%;
      min-height: 100%;
      background-color: rgba(0,0,0,0.5);
      z-index: 200;
    }

    #instructions-text {
      width: 60vw;
      box-sizing: border-box;

      position: fixed;
      top: 50%;
      left: 20vw;             
      transform: translate(0, -50%);

      padding: 40px;
      border-radius: 1vmax;
      
      background-color: whitesmoke;

      color: #666666;
      font-size: 18pt;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      z-index: 201;
    }

    /* In progress modal */
    #working-modal[hidden] { display: none; }
    #working-modal {
      position: absolute;
      left:0px;
      top:0px;
      min-width: 100%;
      min-height: 100%;
      background-color: rgba(0,0,0,0.5);
      z-index: 200;
    }

    .dots {
        display: inline-block;
        width: 1.5em;
        text-align: left;
    }

    .dots::after {
        content: "";
        animation: working-dots 1.0s steps(1, end) infinite;
    }

    @keyframes working-dots {
        0%   { content: ""; }
        25%  { content: "."; }
        50%  { content: ".."; }
        75%  { content: "..."; }
    }

    #working-text {
      width: 30vw;
      box-sizing: border-box;

      position: fixed;
      top: 50%;
      left: 35vw;             
      transform: translate(0, -50%);
      text-align: center;

      padding: 40px;
      padding-left: 80px;
      border-radius: 1vmax;
      
      background-color: whitesmoke;

      color: #666666;
      font-size: 18pt;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      z-index: 201;
    }

    /* Coloris colour selector position */
    #coloris-field {
      position: fixed;
      left: 50vw;
      top: 50vh;
      opacity:0; 
      width:1px; 
      height:1px;    
    }
    #clr-picker {
      position: fixed;
      left: 50vw;
      top: 50vh;
    }