@font-face {
        font-family: "sniglet"; /* Choose a name for your font */
        src: url("fonts/Sniglet Regular.otf") format("otf"), /* Path to your font file */
             url("fonts/Sniglet Regular.ttf") format("ttf"),
             url("fonts/Sniglet-webfont.woff") format("woff"); /* Include other formats for broader browser support */
        font-weight: normal; /* Define font weight if applicable */
        font-style: normal;  /* Define font style if applicable */
}

html {
  min-height: 100%;
}

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0;
  min-height: 100vh;
  justify-content: center; /* center columns horizontally */
  align-content: center;   /* center rows vertically */
  justify-items: center;   /* center items in their cells horizontally */
  align-items: center;     /* center items in their cells vertically */
  gap: 0vw;
  background-size: cover;
  background-color: black;
  color: hsla(112, 74%, 73%, 1.00);
  font-family: "Kode Mono", monospace;
  font-size: 1.3vw;
}

/* Make the Three.js canvas fill the window and sit behind content */
#c {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  pointer-events: none; /* allow clicks through the background */
}

/* Ensure page content stacks above the canvas (but not the canvas itself) */
body > *:not(#c, .loader) {
  position: relative;
  z-index: 0;
}

.item-a { grid-column: 1 / 2; grid-row: 1 / 2; }
.item-b { grid-column: 2 / 3; grid-row: 1 / 2; }
.item-c { grid-column: 3 / 4; grid-row: 1 / 2; }
.item-d { grid-column: 1 / 2; grid-row: 2 / 3; }
.item-e { grid-column: 2 / 3; grid-row: 2 / 3; }
.item-f { grid-column: 3 / 4; grid-row: 2 / 3; }
.item-g { grid-column: 1 / 2; grid-row: 3 / 4; }
.item-h { grid-column: 2 / 3; grid-row: 3 / 4; }
.item-i { grid-column: 3 / 4; grid-row: 3 / 4; }

.grid-item {
  /* border: 1px dashed #f9f9f9ff; Adds a 1px solid light gray border to each item */
  border-radius: 50%; 
  text-align: center;
  display: flex;
  justify-content: space-evenly; /* Horizontally center */
  align-items: center;    
  justify-items: center;
  padding: 1.5vw;

}


h1 {
  text-align: center;
  font-weight: 400;
  font-style: normal;
  color: hsla(112, 79%, 63%, 1.00);
  font-size: 12vw;
  line-height: 0;
  padding: 0;
  font-family: "Henny Penny", system-ui;
  font-weight: 400;
  font-style: normal;
} 

.z-layer:not(:first-child) {
	color: #0cc182ff;
}


.newButtons {
  width: 30%;
  height: auto;
  cursor: url("images/Moon Link Select 2.cur"), grab;
  animation: shake 0.5s;
  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
  
}


.grid-buttons{
  text-align: center;
  display: flex;
  justify-content: space-between; /* Horizontally center */
  align-items: center;    

}

a {
 cursor: url("images/moon.cur"), grab;
  
}

.selfie {
  width: 50%;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Ensure the container for the selfie is centered when not using .grid-item */
.item-c {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-selfie {
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;    
  padding: 0.5vw;
}


.email {
  color: #0cc181ff;

}

@media screen and (max-width: 768px) {
  body {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    font-size: 2vh;
    gap: 1vh;
  }

  /* Rearrange the visual order */
  .item-a { order: 1; } 
  .item-e { order: 2; } 
  .item-i { order: 3; } 
  .item-g {order: 4; }

  /* Reset grid positions for mobile */
  .item-a, .item-b, .item-c,
  .item-d, .item-e, .item-f,
  .item-g, .item-h, .item-i {
    grid-column: 1;
    grid-row: auto;
  }

  h1 {
    font-size: 11vh;
  }

  .grid-item {
  border-radius: 2%; 
  text-align: center;
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;    
  padding: 1.5vw;
  margin: 3vh;
  margin-left: 6vh;
  margin-right: 6vh;


  }

  .grid-buttons {
    margin-top: 3vh;
    margin-bottom: 3vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .grid-selfie {
    margin-top: 2vh;
    margin-bottom: 2vh;
  }

}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000ff; /* Semi-transparent black */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-content: center;
  z-index: 9999; /* Ensure it sits above all other content */
  transition: opacity 1.5s ease, visibility 1s ease;
}



.loader-hidden {
  opacity:0;
  visibility: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.cat {
  width: 25%;
  height: auto;
  display: block;
  margin: 0 auto;
  animation: shake 1s linear infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}