.heading-1 {
   position: fixed;
   top: 20%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: rgb(255, 0, 51);
}

.paragraph-1 {
   position: fixed;
   top: 35%;
   left: 33%;
   transform: translate(-50%, -50%);
   color: rgb(255, 255, 255);
}

.container {
   position: fixed;
   width: 100%;
   height: 100vh;
   overflow: hidden;

}

.image {
   position: fixed;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1;
}

.hidden
{
  display: none;
}

.hello {
   position: fixed;
   top: 90%;
   left: 85%;
   transform: translate(-50%, -50%);
   color: rgb(255, 0, 51);
   translate: calc();
}

html, body {
  height: 100%;
  margin: 0;
}

.menu-items {
     position: fixed;
   top: 10%;
   left: 10%;
   transform: translate(-50%, -50%);
   color: rgb(255, 0, 51);
   font-family: bbh hegarty, serif;
}

.bbh-hegarty-regular {
  font-family: "BBH Hegarty", sans-serif;
  font-weight: 400;
  font-style: normal;
} 
/* unvisited link */
a:link {
  color: rgb(229, 5, 2);
}

/* visited link */
a:visited {
  color: rgb(255, 134, 21);
}

/* mouse over link */
a:hover {
  color: rgb(255, 0, 238);
}

/* selected link/when clicked */
a:active {
  color: rgb(255, 174, 0);
}
body {
  /* path is relative to this CSS file */
  background-image: url("images/moon-face.gif");
background-size: contain;        
  background-position: center;   /* center the image */
  background-repeat: no-repeat;  /* don't tile */
  background-attachment: fixed;  /* optional: keeps image fixed on scroll */
  min-height: 100vh;
}



/* make images responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* layout container */
.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem;
}

/* touch-friendly buttons/links */
.button, .button-off, .button-on {
  display: inline-block;
  padding: 0.75rem 1rem;
  min-height: 44px;           /* mobile touch target */
  font-size: 1rem;
  border-radius: 6px;
}

/* small-screen adjustments */
@media (max-width: 600px) {
  html { font-size: 15px; }
  .container { padding: 0.6rem; }
  h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
  .hello h1 a { font-size: 1.8rem; }
  .button, .button-off, .button-on { width: 100%; text-align: center; }
  .menu-items {position: relative; top: 20%; left: 60%; font-size: clamp(0.95rem, 1.2vw + 0.2rem, 1.15rem); margin: 0 0 1rem 0;
 }
 }


/* ...existing code... */