@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .layout {
    @apply px-4 sm:px-10 md:px-20 xl:px-40 2xl:px-80 ;
  }
  .auto-grid {
    --auto-grid-min-size: 27rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
    grid-gap: 1.5rem;
    @media (max-width: 640px) {
      --auto-grid-min-size: 20rem;
    }
  }

  /* PHOTOS DYNAMIC */

  .background {
    display: grid;
    place-items: center;
  } 

  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 800px;
  }

  .card {
    position: relative;
    left: 0px;
    width: 140px;
    border-radius: 8px;
    height: 420px;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
    flex: 0.4;
  }

  .card img {
    height: 420px;
  }

  .card h2 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
  }

  .card:hover h2 {
    writing-mode: unset;
    font-weight: bold;
    transition: 0.4s ease-in-out;
    margin-left: 0.25rem;

  }

  .card h3 {
    opacity: 0;
  }

  .card:hover h3 {
    display:inline;
    margin-right: 0.5rem;
    opacity: 1;
    transition: 0.4s ease-in-out;
    transition-delay: 0.4s;
  }

  .card:hover {
    flex: 4;
    cursor: pointer;
    border-radius: 8px;
    @media (max-width: 640px) {
      flex: 2.8;
    }
  }

  /*  TYPEWRITER EFFECT */

  .typewriter h1 {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    /* margin: 0 auto; Gives that scrolling effect as the typing happens */
    letter-spacing: .05em; /* Adjust as needed */
    animation: 
      typing 4.5s steps(50, end),
      blink-caret .75s step-end infinite;
  }
  
  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
  }

}

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: #111827;
  /* background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb)); */
}