body {
    font-size: 85%;
    font-family: "Times New Roman", serif;
    color: #363b69; 
    margin: 0;
    padding: 1px; /* fixed padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 20px;
    cursor: url("fotos/arrowhead-rounded-outline.png"), auto;

    /* Background with overlay */
    background-color: rgba(227, 246, 213, 0.2); /* overlay color */
    background-image: url("fotos/resources/IMG_5746 (1).jpg");
    background-repeat: repeat;      /* repeat the image */
    background-size: auto;          /* keep image repeating */
    background-blend-mode: lighten; /* blend overlay + image */
}

/* Custom selection color */
::selection {
    background: #363b69;  /* dark red background */
    color: white;          /* white text */
}


  /* Top GIFs */
  .gifs-top {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .gifs-top img {
    max-width: 120px;
    height: auto;
  }

  /* Main columns container */
  .columns-container {
    display: flex;
    justify-content: center;
    gap: 0; /* columns touch each other */
    flex-wrap: wrap;
  }

  /* Left & Right column boxes */
  .column-box {
    background-color: beige;
    border: 2px solid #363b69;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
    width: 230px;
    font-family: Monospace;
    font-style: italic;
    color: #363b69;
    box-shadow: 2px 2px 0px #363b69;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  

  /* Buttons styling */
  .buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .buttons button {
    font-family: monospace;
    background-color: beige;
    border: 1px solid #363b69;
    padding: 5px 10px;
    cursor: url("fotos/hand-pointer.png"), auto;
    transition: all 0.2s ease;
    text-align: left;
  }

  .buttons button:hover {
    background-color: #f5e3c0;
    transform: scale(1.05);
  }

  .buttons a {
    color: #363b69;
    text-decoration: none;
  }
  
  
.left-column-box {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* vertical centering inside the column */
    gap: 8px;                  /* space between items */
    text-align: center;        /* optional horizontal centering */
}

.left-column-box h3 {
    margin: 0 0 0px 0;         /* reduce space below title */
}

.left-column-box .title-text-centered p {
    margin: 0;                 /* remove extra margins */
    text-align: justify;       /* justify paragraph */
}



 /* Right image */
.right-column-box img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
}

  
  .hover-img {
  transition: transform 0.3s ease; /* smooth animation */
}

.hover-img:hover {
  transform: scale(1.03); /* grows slightly on hover */
  cursor: pointer;       /* makes it clear it’s clickable */
}

  /* Music box styling */
  .music-box {
    margin: 20px auto;
    background-color: beige;
    border: 2px solid #363b69;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    width: 220px;
    font-family: monospace;
    color: #363b69;
    box-shadow: 2px 2px 0px #363b69;
  }

  .music-box h4 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    text-transform: uppercase;
  }

  .player-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  .player-btn {
    background: #363b69;
    color: beige;
    border: none;
    padding: 4px 10px;
    cursor: url("fotos/hand-pointer.png"), auto;
    font-family: monospace;
    font-size: 0.8rem;
    border-radius: 3px;
    box-shadow: 1px 1px 0px #333;
  }

  .player-btn:hover {
    background: #a84646;
  }

  .progress-bar {
    width: 100%;
    height: 6px;
    background: #ddd;
    border: 1px solid #363b69;
    border-radius: 3px;
    overflow: hidden;
  }

  .progress {
    height: 100%;
    width: 0%;
    background: #363b69;
  }
  
.scroll-container {
  width: 220px;       /* width of your music box */
  overflow: hidden;
  border: hidden; 
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  cursor: pointer;
  transform: translateX(0);
  transition: none;
  text-transform: none !important; /* force normal case */
}


/* Only animate on hover */
.scroll-container:hover .scroll-text {
  animation: scrollText 8s linear infinite;
}

@keyframes scrollText {
  0% {
    transform: translateX(0);      /* start fully visible */
  }
  50% {
    transform: translateX(-50%);   /* move halfway */
  }
  100% {
    transform: translateX(0);      /* return to start */
  }
}

/* Star particle styling */
  .star {
    position: fixed;
    width: 6px;
    height: 6px;
    background: gold;
    border-radius: 50%;
    pointer-events: none; /* don’t block clicks */
    z-index: 9999;
    opacity: 1;
    transform: translate(-50%, -50%);
    animation: fadeOut 0.8s forwards;
  }

  @keyframes fadeOut {
    to {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0);
    }
  }
  
  /* Scrollbar width */
::-webkit-scrollbar {
    width: 16px; /* thick retro style */
}

/* Scrollbar track (background) */
::-webkit-scrollbar-track {
    background: beige; /* same as your column boxes */
    border: 2px solid #363b69;
    border-radius: 0; /* squared corners for retro look */
    box-shadow: inset 2px 2px 0px #fff, inset -2px -2px 0px #333; /* 3D look */
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    background: #363b69; /* dark red */
    border: 2px solid beige;
    border-radius: 0;
    box-shadow: inset 2px 2px 0px #fff, inset -2px -2px 0px #333;
}

/* Scrollbar on hover */
::-webkit-scrollbar-thumb:hover {
    background: #a84646;
}

.clock-box {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
    letter-spacing: 2px;
    background-color: beige;
    border: 2px solid #363b69;
    border-radius: 6px;
    box-shadow: 2px 2px 0px #363b69;
    padding: 10px;
    width: 220px;      /* same width as your column boxes */
    gap: 0;
}

/* Blink effect */
.blink {
    animation: blink 1s step-start infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}