@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

  :root {
    background: #f5f5f5;
    font-family: 'Inconsolata', monospace;
    --s: 140px; /* control the size of the images */
  }

  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    align-items:center;
    justify-content: center;
  }

  header {
    width: 100%;
    height:auto;
    padding-bottom: 20px; /* Add padding to the top and bottom */
  }

  header img {
    width: 48px;
    margin-right: -22px;
  }

  .header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; /* Adjust the space between the title and the menu */
  }

  .social-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px; /* Adjust spacing between icons as needed */
  }
  
  .social-menu a {
    color: #757575; /* Match the color scheme of your site */
    font-size: 16px; /* Adjust the size of the icons */
  }
  
  .social-menu a:hover {
    color: #0f0f0f; /* Highlight color on hover */
  }
  

  main {
    height: 100%;
  }

  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px; /* Adjust the space between menu items */
  }

  nav a {
    text-decoration: none;
    color: #4f4f4f; /* Adjust the text color as needed */
    font-size: 18px; /* Adjust the font size as needed */
  }

  nav a:hover {
    text-decoration: underline;
  }

  h1 {
    font-weight: normal;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 5px;
    position: relative;
  }

  .gallery input {
    position: absolute;
   /*  border: 2px solid #4f4f4f; */
    inset: calc(50% - var(--s) / 3);
    cursor: pointer;
    --g: linear-gradient(#4f4f4f 0 0) no-repeat;
    background: var(--g) 50%/var(--b, 0%) 3px, var(--g) 50%/3px var(--b, 0%);
    transition: 1.5s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .gallery > a > img {
    width: var(--s);
    aspect-ratio: 1;
    object-fit: cover;
    transform: scale(.1);
    filter: brightness(0.1);
    pointer-events: none;
    transform-origin: var(--x) var(--y);
    transition: 0.8s calc((var(--i) - 1) * .1s);
    border-radius: 20px;
    overflow: hidden;
  }

  /* Assign indices and transformation origins to images */
  .gallery > a:nth-of-type(1) > img {--i:1;--x: 150%;--y:150%;}
  .gallery > a:nth-of-type(2) > img {--i:2;--x:  50%;--y:150%;}
  .gallery > a:nth-of-type(3) > img {--i:3;--x: -50%;--y:150%;}
  .gallery > a:nth-of-type(4) > img {--i:4;--x: 150%;--y:50%; }
  .gallery > a:nth-of-type(5) > img {--i:5 }
  .gallery > a:nth-of-type(6) > img {--i:6;--x: -50%;--y:50%; }
  .gallery > a:nth-of-type(7) > img {--i:7;--x: 150%;--y:-50%;}
  .gallery > a:nth-of-type(8) > img {--i:8;--x:  50%;--y:-50%;}
  .gallery > a:nth-of-type(9) > img {--i:9;--x: -50%;--y:-50%;}

  .gallery > input:checked ~ a > img {
    transform: scale(1);
    filter: brightness(1);
    pointer-events: initial;
  }

  .gallery > input:checked {
    transform: translateY(-240px) scale(.5) rotate(45deg);
    --b: 70%;
  }

  .gallery > input:checked ~ a > img:hover {
    transform: scale(1.05);
    transition: 0.2s ease;
    z-index: 999;
  }  

  .gallery > a {
    pointer-events: none; /* Prevents clicking on the links by default */
    cursor: default; /* Sets the default cursor */
  }
  
  .gallery > input:checked ~ a {
    pointer-events: auto; /* Allows clicking on the links when gallery is opened */
    cursor: pointer; /* Changes the cursor to indicate clickable items */
  }
  
  .gallery > input:checked ~ a > img {
    cursor: pointer; /* Ensure the cursor changes to pointer over images when gallery is opened */
  }
  

  /* Responsive adjustments for gallery and navigation */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 20px;
  }

  header img {
    margin-right: 0;
  }

  .social-menu {
    margin-top:20px;
  }

  nav ul {
    flex-direction: column; /* Stack nav items vertically on smaller screens */
    align-items: center;
  }

  .gallery > input:checked ~ a > img {
    transform: scale(0.9);
    filter: brightness(1);
    pointer-events: initial;
  }
}

footer {
  width: 100%;
  margin-bottom: 20px;
  color: #2d2d2d;
  position:absolute;
  left:0;
  bottom:0;
  text-align: center;
  font-size: 14px;
}

footer p {
  margin: 0;
}