html {
  scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #333;
    color: #ffffff;
    overflow-x: hidden;
    background-image: url("../img/bg_test.png");
}

#title {
    transition: font-family 0.5s ease;
}

h1 {
    font-family: "Permanent Marker";
    z-index: 100;
    font-size: 100px;
    margin-top: 0;
}

p {
    font-family: "Rubik", sans-serif;
    width: 100%;
    font-size: 1.25rem;
}

.about {
    padding: 2rem;
    margin: 2rem;  
}


.about-container {
    display: flex;
    gap: 2em;
}


  .left-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left */
    margin: 0;
  }

  .left-column img {
    max-width: 100%; /* Ensure the image doesn’t overflow */
    height: auto; /* Maintain aspect ratio */
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .right-column {
    flex: 2;
  }

  .right-column h1 {
    margin-top: 0;
    margin-bottom: 0;
  }

  nav {
    backdrop-filter: blur(1px);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    box-sizing: border-box;
    position: fixed;
    top: 0; /* Distance from the top */
    width: 100%;
    color: white;
    padding: 1.5rem;
    z-index: 1000; /* Ensures it stays above other content */
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space between image and links */
}

.stuff {
    background-color: rgba(0, 0, 0, 0.35);
}

nav img {
    height: 5rem; /* Adjust the image size */
}

nav .clickystuff {
    display: flex; /* Group links together */
}

nav a {
    font-family: "Permanent Marker";
    font-size: 2rem;
    color: white;
    text-decoration: none;
    padding: 0 15px;
    border-right: 1px solid white; /* Adds a line to the right of each link */
    border-left: 1px solid white; /* Adds a line to the right of each link */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

nav a:hover {
    background-color: #ffffff;
    color: rgb(0, 0, 0) ;
}

.rotating-gallery-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.rotating-gallery {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    animation: scroll 2s infinite;
}

.rotating-gallery img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(90, 255, 216, 0.5), rgba(255, 79, 208, 0.5));
    z-index: 1;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.inside {
    position: absolute; /* Stack text over the gallery */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Ensure text is above the gallery */
    background: rgba(0, 0, 0, 0.65);
}

#projects {

    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .gallery {
    
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 8vw; /* Space between items */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }
  .gallery-item {
    position: relative;
    overflow: hidden; /* Prevent content from overflowing */
    text-align: center;
    padding: 10px;
    transition: transform 0.3s ease;
    min-height: 200px; /* Ensures the container has height */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Optional: round corners */
}

.gallery-item .image-container {
  position: relative; /* Ensures hover effects and absolute positioning work */
  width: 100%; /* Matches the grid column width */
  aspect-ratio: 4 / 3; /* Sets the aspect ratio for consistent sizing */
  overflow: hidden; /* Ensures any cropped parts are hidden */
}

.gallery-item .image-container .hover-item {
  opacity: 0; /* Hide hover image by default */
}

.gallery-item .image-container:hover .hover-item {
  opacity: 1; /* Show hover image on hover */
  transform: scale(1.05); /* Optional zoom-in effect */
}

.gallery-item .image-container img {
  position: absolute; /* Allows precise placement */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the container */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Optional hover effect */
}

/* Original image */
.gallery img {
    width: 100%; /* Responsive width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Prevent distortion */
    display: block; /* Prevent inline spacing issues */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}

/* Hover image */
.image-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image-container .hover-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%); /* Move it out of view initially */
    transition: transform 0.5s ease-in-out; /* Smooth transition on hover */
    object-fit: cover; /* Prevent distortion */
    z-index: 2; /* Ensure it's above the original image */
    clip-path: inset(0); /* Prevent overflow */
}

/* Ensure non-hover images are displayed correctly */
.image-container img:not(.hover-item) {
    position: relative;
    z-index: 1; /* Below the hover image */
}

/* Hover effect */
.gallery-item:hover .hover-item {
    transform: translateY(0); /* Slide into view on hover */
}

/* Ensure the hover image stays contained */
.gallery-item:hover .hover-item,
.gallery-item:hover img:not(.hover-item) {
    clip-path: inset(0); /* Contain both images within the bounds */
}
  
  .overlay-text {
    font-family: Permanent Marker;
    font-size: 12rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; /* Ensure it appears above both images */
    color: white; /* Adjust color for contrast */
    font-size: 18px; /* Adjust text size */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Optional: add shadow for readability */
    pointer-events: none; /* Prevent text from interfering with hover */
  }
  
  
  .wrappera {
    background-color: rgba(90, 255, 216, 0.15);
    padding: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 1536px;
    margin-inline: auto;
    position: relative;
    height: 4vw;
    overflow: hidden;
  }

  .wrapperb {
    background-color: rgba(255, 79, 208, 0.15);
    padding: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 1536px;
    margin-inline: auto;
    position: relative;
    height: 4vw;
    overflow: hidden;
  }

  @keyframes scrollLeft {
    0% {
      left: 100%;
    }
    100% {
      left: -100%; /* Move the item completely off the screen */
    }
  }

  @keyframes scrollRight {
    0% {
      left: -100%;
    }
    100% {
      left: 100%; /* Move the item completely off the screen */
    }
  }

  .item {
    min-height: 30px; /* Adjusted item height */
    border-radius: 6px;
    position: absolute;
    left: 100%; /* Start position is off-screen */
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    text-align: center;
    font-size: 3.5vw; /* Adjusted font size */
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    font-family: Permanent Marker, sans-serif;
    font-weight: black;
    padding-left: 6vw;
  }

  .a {

      animation-name: scrollLeft;
      width: 30vw; /* Adjusted item width */
  }

  .b {

      animation-name: scrollRight;
      width: 20vw; /* Adjusted item width */
  }

  .item1 {
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
  }

  .item2 {
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
  }

  .item3 {
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
  }

  .item4 {
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
  }

  .item5 {
    animation-delay: calc(30s / 8 * (8 - 5) * -1);
  }

  .item6 {
    animation-delay: calc(30s / 8 * (8 - 6) * -1);
  }

  .item7 {
    animation-delay: calc(30s / 8 * (8 - 7) * -1);
  }

  .item8 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
  }

/* Primary Cursor */
/*.custom-cursor {
    position: fixed;
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease-in-out, background-color 0.3s ease-in-out;
    transform: translate(-50%, -50%); /* Center on the mouse */
  /*}*/
  
  /* Secondary Cursor (trailing) */
  /*.trail-cursor {
    position: fixed;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    transform: translate(-50%, -50%); /* Center on the mouse */
  /*}*/
  
  /* Hover effect for both cursors *//*
  .trail-cursor.hover {
    transform: scale(1.25) translate(-50%, -50%); /* Keep centered during scaling */
    /*background-color: rgba(90, 255, 216, 0.25);
  }*/

  #contact {
    background-color: rgba(0, 0, 0, 0.35);
    padding: 40px 20px;
    text-align: center;
  }
  
  .contact-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  #contact h2 {
    font-family:"Permanent Marker";
    font-size: 2rem;
  }
  
  .contact-info {
    margin-bottom: 30px;
  }
  
  .contact-info p {
    font-size: 1rem;
  }
  
  .social-links a {
    margin: 0 15px;
  }
  
  .social-links img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s;
  }
  
  .social-links img:hover {
    transform: scale(1.1);
  }
  
  @media screen and (max-width: 600px) {
    .social-links {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
  }
  
  /* --- Responsive Design --- */
@media (max-width: 1200px) {
    p {
        font-size: 1.15rem;
    }



    h1 {
        font-size: 2.5rem;
    }

    body {
        cursor: auto;
    }

    .about-container {
        display: block; /* Stack elements vertically */
        text-align: center;
      }
  
      .left-column img {
        display: none;
      }
  
      .right-column {
        margin-top: 20px; /* Add spacing between the image and text */
      }

    .gallery img {
        width: 60vw; /* Adjust width for number of images visible */
    }

    .gallery {
        grid-template-columns: 1fr; /* One column */
    }
}

@media (max-width: 675px) {
    nav {
        justify-content: center;
    }

    nav img {
        display: none;
    }

    .clickystuff a {
        font-size: 1.5rem;
        text-align: center;
    }
    
}