.popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(41, 41, 41, 0.744);
        z-index: 1000;
        justify-content: center;
        align-items: center;
      }
      .popup-content {
        background: #111;
        color: #fff;
        max-width: 90%;
        max-height: 90%;
        overflow: auto;
        padding: 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        position: relative;
      }
      .popup-content h1 {
        margin-top: 0;
      }
      .popup-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: var(--close-bg, #41403f);
        border: none;
        color: var(--close-color, #f8f8f8);
        padding: var(--close-padding, 0.5rem 1rem);
        border-radius: var(--close-border-radius, 0.5rem);
        cursor: pointer;
      }      
      header {
        border-bottom: 3px solid #d6bde3;
         position: sticky;
           position: sticky;
  top: 0;
  animation: stick linear both;
  animation-timeline: scroll();
  animation-range: 0px 45px;
}
@keyframes stick {
  0% {
    padding-block: 20px 20px; /* 30 + 30 = 60 */
    clip-path: shape(/* code from generator */);
  }
  to {
    padding-block: 5px 30px; /* 5 + 55 = 60 */
    clip-path: shape(/* code from generator */);
  }
}
      h1 {
  margin: 0;
}
      .menubutton {
  border: none;
  color: white;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  background-color: #1b1b1b;
  transition: background-color 0.3s;
}

.menubutton:hover {
  background-color: #294b6e;;
}

.patchbutton:active {
  transform: translateY(2px);
}   
    .patchbutton {
  border: none;
  color: rgb(140, 255, 0);
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  background-color: #014dff;
  transition: background-color 0.3s;
}

.patchbutton:hover {
  background-color: #294b6e;;
}

.patchbutton:active {
  transform: translateY(2px);
}
#showHeaderBtn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  display: none;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background-color: #1b1b1b;
  color: white;
  cursor: pointer;
  font-size: 14px;
}
#showHeaderBtn:hover {
  background-color: #294b6e;
}
header.retracted {
  display: none;
}
#HeaderBtn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  display: none;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background-color: #ff0000;
  color: white;
  cursor: pointer;
  font-size: 14px;
}
#HeaderBtn:hover {
  background-color: #294b6e;
}
header.retracted {
  display: none;
}
 .centered { text-align: center; }