/* Background */

body {
  background-image: url("/assets/images/constructionpaper.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 3D Logo Header */

.headerlogo {
  position: absolute;
  top: 0px;
  left: 0px;
  transform: scale(0.7);
}

/* Header Grid */

.header-grid {
  display: grid;
  grid-template-columns: 1fr 250px;
  place-items: start end;
  justify-items: end;
}

.birdsofnj {
  margin-top: 12px;
}

.birdsofnjtext {
  font-family: 'Inknut Antiqua';
  font-size: 1rem;
  color: rgb(0, 0, 0)
}

/* Title and Subtitle */

.pagetext {
  position: absolute;
  text-align: center;
  top: 180px;
  right: 50%;
  transform: translate(50%, -50%);
}

.title {
  font-family: 'Inknut Antiqua';
  font-size: 3rem;
  color: rgb(0, 0, 0);
}

.subtitle {
  font-family: 'Inknut Antiqua';
  font-size: 1rem;
  color: rgb(100, 100, 100);
  margin-top: -50px;
  line-height: 1.5;
}

/* Photo Grid */

.photo-grid {
    display: grid;
    
  /* Grid Style */
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 10px;
    padding: 20px;
    padding-top: 200px;

  /* Hides the grid initially */

    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s ease-in-out; /* Optional smooth fade-in effect */
}

  /* This class will be added via JavaScript when ready */

.photo-grid.is-visible {
    opacity: 1;
    visibility: visible;
}

  /* Photo Grid Image Style */

.photo-grid img {
  width:100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* Footer Grid */

.footer-grid {
  position: sticky;
  bottom: 0px;
  right: 0px;
  z-index: 9000;

  display: grid;
  grid-template-columns: 1fr 70px;
  place-items: end end;
  justify-items: end;
}

.footer {
  font-family: 'Inknut Antiqua';
  font-size: 1rem;
  color: rgb(0, 0, 0)
}

.glassespenguin {
  margin-bottom: 12.5px;
}

/* Fonts */

  /* inknut-antiqua-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inknut Antiqua';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/inknut-antiqua-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  /* rubik-burned-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik Burned';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rubik-burned-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}