/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('stars.jpg');
  text-align: center;
  color: white;
  font-family: "Times New Roman", serif;
  cursor: url('star-cursor.png') 16 16, auto;
}

.text-box{
  background-color: #1f203f;
  border: 2px solid #ec9915;  
  padding: 15px;
  margin: 30px auto;
  width: fit-content;
  text-align: center;
  border-radius: 10px; 
  font-size: 0.9rem; 
  
  box-shadow: 0 0 10px #ec9915,
              0 0 20px #ec9915,
              0 0 30px #ec9915; 
  animation: glow-pulse 3s infinite ease-in-out;
} 

@keyframes glow-pulse {
  0% {
    box-shadow: 0 0 5px #ec9915,
                0 0 10px #ec9915,
                0 0 15px #ec9915;
  }
  50% {
    box-shadow: 0 0 20px #ec9915,
                0 0 35px #ec9915,
                0 0 50px #ec9915;
  }
  100% {
    box-shadow: 0 0 5px #ec9915,
                0 0 10px #ec9915,
                0 0 15px #ec9915;
  }
}

.solid-box {
  background-color: #25264b;
  border: 2px solid #ec9915;
  width: 750px;
  margin: 30px auto;
  border-radius: 10px;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  position: relative;
  overflow: visible;
  height: auto;
  z-index: 1;
}
.inmyroom {
  width: 120px;
  height: 120px;
  border: 2px solid white;
  border-radius: 5px;
  overflow: hidden;
  position: absolute;
  top: 20px;  
  left: 20px; 
  box-shadow: 0 0 6px white, 0 0 10px rgba(255, 255, 255, 0.6);
}
.inmyroom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-text {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid white;
  color: white;
  padding: 12px 16px;           
  border-radius: 5px;
  font-size: .95rem;
  width: 370px;              
  position: absolute;
  top: 20px;
  left: 160px;
  text-align: left;

  box-shadow: 0 0 6px white, 0 0 10px rgba(255, 255, 255, 0.6);
}
.chat-box {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 120px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid white;
  border-radius: 8px;
  padding: 10px;
  color: white;
  font-size: 0.75rem;
  overflow-y: auto;
  box-shadow: 0 0 6px white, 0 0 10px rgba(255, 255, 255, 0.6);
}
.intro-container {
  position: relative;
  min-height: 160px;
}
.cbox-frame {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 170px;
  height: 250px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 6px white, 0 0 10px rgba(255, 255, 255, 0.6);
}

.portfolio-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px; /* gaps */
  margin-bottom: 30px;
}

.link-box {
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px solid #ec9915;
  color: white;
  text-decoration: none;
  padding: 18px 30px;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #ec9915;
  font-family: "Times New Roman", serif;
}

.link-box:hover {
  background-color: #ec9915;
  color: #1f203f;
  box-shadow: 0 0 15px #ec9915, 0 0 30px #ec9915;
}
.portfolio-title {
  margin-top: 120px;
  font-size: 1.25rem;
  color: white;
  font-weight: normal;
  text-align: center;
  margin-bottom: 20px;
}
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 15px;
  padding: 10px;
  box-sizing: border-box;
  align-items: stretch;
}

.photo-gallery a {
  display: block;
  height: 100%; 
}

.photo-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Ensures no extra spacing below */
  border: 2px solid #ec9915;
  border-radius: 8px;
  box-shadow: 0 0 8px #ec9915;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.wide {
  grid-column: span 2;
}
.lb-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  color: white;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 0 10px black;
  z-index: 9999;
  cursor: pointer;
}

.back-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  z-index: 999;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.back-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%; /* <- This makes it a circle */ 
  filter: drop-shadow(0 0 6px #ec9915);
}

.back-button:hover {
  transform: scale(1.1);
}

@keyframes floatStars {
  0% { transform: translateY(0); opacity: 0.6; }
  50% { opacity: 1; }
  100% { transform: translateY(-100vh); opacity: 0; }
}

.falling-star {
  position: fixed;
  top: 100%;
  left: calc(100% * var(--x));
  width: 8px;
  height: 8px;
  background: gold;
  border-radius: 50%;
  animation: floatStars 12s linear infinite;
  animation-delay: var(--delay);
  z-index: -1; 
  pointer-events: none;
  opacity: 0;
}

.text-box h1 {
  background: linear-gradient(to right, #ec9915, #fffbe7, #ec9915);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.photo-gallery img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border-radius: 15px;
}

.photo-gallery img:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow: 0 0 15px #ec9915, 0 0 25px #ec9915;
}


*{
  cursor: url('star-cursor.png') 16 16, auto;
}

.concerts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
}

.concerts-grid a img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 2px solid #ec9915;
  box-shadow: 0 0 8px #ec9915;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.concerts-grid a img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #ec9915, 0 0 25px #ec9915;
}

.concerts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 per row */
  gap: 30px;
  justify-items: center;
  padding: 20px;
}

.concert-tile {
  text-align: center;
  max-width: 300px;
}

.concert-tile img {
  width: 100%;
  border: 2px solid #ec9915;
  border-radius: 10px;
  box-shadow: 0 0 10px #ec9915;
  transition: transform 0.3s ease;
}

.concert-tile img:hover {
  transform: scale(1.05);
}

.concert-caption {
  margin-top: 10px;
  color: white;
  font-size: 0.95rem;
  font-family: "Times New Roman", serif;
}