.header, .main{
  visibility: visible;
  pointer-events: auto; /* ensure it's set */
}

.main{
  pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 500px;
    position: fixed; /* Fix position relative to the viewport */
    top: 50%; /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Offset by 50% of its own size */
    text-align: left;
    z-index: 1; /* Set z-index to be above background but below scroll-content */
}

.main h2{
    text-decoration: underline;
}

@media only screen and (max-width: 960px) {
  .main{
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: fixed; /* Fix position relative to the viewport */
  top: 50vh; /* Vertically center */
  left: 50%; /* Horizontally center */
  transform: translate(-50%, -50%); /* Offset by 50% of its own size */
  text-align: left;
  z-index: 10000; /* Set z-index to be above background but below scroll-content */
}
}