* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
  }



  body {
      line-height: 1.6;

      color: #222;
  }
  body {
      position: relative;
      min-height: 100vh;

      font: 16px/26px Helvetica, Helvetica Neue, Arial;

      background: #000 url('../img/img_0749.scaled.jpg') center/cover no-repeat fixed;
  }
  /* - dim overlay */
  body::before {
      position: fixed;  /* ..or:  position: absolute; */
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 0;
      inset: 0;

      background: rgba(0, 0, 0, 1);

      pointer-events: none;
      transition: background-color 2500ms ease;

      content: '';
  }
  body.bg-ready::before {
     background: rgba(0, 0, 0, 0.7);
  }




  header {
      margin-bottom: 30px;
      padding: 20px;

      color: #fffa;
  }
  header h1 {
      margin-bottom: 5px;

      font-size: 28px;
  }
  header .subtitle {
      font-size: 14px;

      opacity: 0.8;
  }



  footer {
      display: flex;

      color: #fff6;
  }

  footer .copyRightNotice {
      padding: 20px;
      margin-left: auto;
  }







  nav {
      display: flex;
      align-items: center;

      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      border-radius: 4px;
      margin-bottom: 30px;
      padding: 15px;

      background: #fffc;
  }


  .nav-group {
    display: flex;
    align-items: center;
    gap: 0.50rem;
  }


  nav a {
      display: inline-block;

      border-radius: 4px;
      padding: 8px 16px;
      min-width: 4.5em;

      text-decoration: none;
      text-align: center;
      font-weight: bold;

      color: #3C4B2E;
  }

  nav a.active {
      background: #3C4B2E;
      color: white;
  }


  nav a:hover ,
  nav a.active:hover {
      background: #c60;
      color: white;
  }




  div.main {
      margin-right: 3.2em;
  }
  div.primary {
  }
  div.secondary {
      margin-left: 3.5em;
  }
  div.final {
      margin-left: auto;
  }




  a.content-edit-home ,
  a.home {
  }
  a.edit-list {
  }
  a.preview {
  }
  a.publish {
  }
  a.live-site {
  }
  a.logout {
  }





  .container {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
  }


  .content-box {
      background: #ddd;
      padding: 30px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .content-box.second-facing {
      background: #fffa;
  }


  .front-facing {
      animation: fade-in_front-facing 800ms ease forwards;
  }

  @keyframes fade-in_front-facing {
      from { opacity: 0; }
      to   { opacity: 1; }
  }



  .message {
      background: #d4edda;
      color: #155724;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 4px;
      border: 1px solid #c3e6cb;
  }


  .error {
      background: #f8d7da;
      color: #721c24;
      border-color: #f5c6cb;
  }



  .draggable_msg {
      position: absolute;
      z-index: 1;

      inset: 0;

      pointer-events: none;
  }

  .draggable_msg div {
      position: absolute;
      top: 40px;
      left: 16%;
      transform: translateX(-50%);
      pointer-events: auto;
      cursor: move;

      margin: 0;
      padding: 12px 16px;

      font-size: 18px;

      background: #c00c;
      border: 1px solid #f88;
      border-radius: 12px;
      color: #fbb;

      text-shadow:
        0 0 2px #000f,
        0 0 12px #9009
        ;
  }

  section.draggable_msg.is-hidden {
      display: none;
  }

  .debug_box div {
      font-size: 18px;

      background: #f00a;
      color: #fbb;
  }





  h2 {
      color: #3C4B2E;
      margin-bottom: 20px;
      font-size: 24px;
  }



  table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
  }
  th, td {
      text-align: left;
      padding: 12px;
      border-bottom: 1px solid #ddd;
  }
  th {
      background: #f8f9fa;
      font-weight: bold;
      color: #3C4B2E;
  }
  tr:hover {
      background: #f8f9fa;
  }




  .btn {
      display: inline-block;

      border-radius: 4px;
      border: none;
      padding: 10px 20px;

      text-decoration: none;
      cursor: pointer;

      font-weight: bold;
      font-size: 14px;
      font-size: 17px;

      background: #3C4B2E;
      color: white;
  }
  .btn:hover {
      background: #4C5B3E;
      background: #c60;
  }


  .btn-secondary {
      /* background: #78593C; */
  }
  .btn-secondary:hover {
      background: #88694C;
  }


  .btn-small {
      min-width: 4em;
      padding: 6px 12px;

      text-align: center;
      font-size: 14.6px;
  }





  .home-grid > div:nth-child(1) a {
      background: #4C5B3E;
      background: #88694C;
  }
  .home-grid > div:nth-child(2) a {
      background: #3C4B2E;
  }
  .home-grid > div:nth-child(3) a {
      background: #c60;
  }
  .home-grid > div:nth-child(4) a {
      background: #78593C;
  }



  textarea {
      width: 100%;
      min-height: 400px;
      font-family: 'Courier New', monospace;
      font-size: 13px;
      padding: 15px;
      border: 2px solid #ddd;
      border-radius: 4px;
      resize: vertical;
  }
  textarea:focus {
      outline: none;
      border-color: #3C4B2E;
  }




  .section-id {
      font-size: 12px;
      color: #666;
      font-family: monospace;
  }


  .form-note {
      font-size: 13px;
      color: #666;
      margin-top: 10px;
      font-style: italic;
  }


  .action-buttons {
      margin-top: 20px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
  }





  .home-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 30px;
  }


  .home-card {
      display: flex;
      flex-direction: column;

      background: #fffc;
      padding: 30px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      text-align: center;
  }
  .home-card h3 {
      color: #3C4B2E;
      margin-bottom: 15px;

      font-size: 22px;
  }
  .home-card p {
      color: #666d;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
  }
  .home-card a {
      margin-top: auto;
      align-self: center;

      font-size: 17px;
  }




  .confirm-box {
      background: #fff3cd;
      border: 2px solid #ffc107;
      padding: 20px;
      border-radius: 4px;
      margin-bottom: 20px;
  }

  .confirm-box p {
      margin-bottom: 15px;
      font-weight: bold;
  }