/* ====== GLOBAL STYLES ====== */
html, body {
  margin: 0;
  padding: 0;
  background-color: #0c0032;
  background-image: url('star.png');
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
  color: white;
  font-family: Arial, sans-serif;
 

}
.times-font { font-family: "Times New Roman", serif; }
.italic { font-style: italic; }
.text-yellow { color: yellow; }
.text-shadow-black { text-shadow: 2px 2px black; }
.small-text { font-size: 14px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mb-5 { margin-bottom: 5px; }
.mb-8 { margin-bottom: 8px; }
.mb-15 { margin-bottom: 15px; }
.mb-30 { margin-bottom: 30px; }
.mb-60 { margin-bottom: 60px; }
a {
  color: white;
  text-decoration: underline;
  font-size: 16px;
}

/* ====== CONTENT WRAPPER ====== */
.content-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* ====== SIDEBARS ====== */
aside.sidebar {
  position: fixed;
  top: 0;
  width: 200px;
  height: 100%;
  background-color: black;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  overflow-y: auto;
}
.left-sidebar { left: 0; }
.right-sidebar { right: 0; }
aside.sidebar img { width: 110px; margin: 5px 0; }
.sidebar-heading {
  font-size: 16px;
  font-weight: bold;
  color: yellow;
  text-shadow: 1px 1px black;
  margin-bottom: 8px;
  text-align: center;
}



/* ====== RIGHT SIDEBAR SPECIAL ====== */
.right-sidebar img.album-cover { width: 195px; }
.right-sidebar img[src="catstrat.gif"] {
  width: 200px;  /* Change to desired size */
  height: auto;  /* Keeps proportions */
} 
.right-sidebar img.sidebar-button {
  width: 120px;       /* match sidebar scale */
  height: auto;
  margin-top: 10px;   /* space between each button */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ====== MARQUEE ====== */
.marquee {
  width: 100%;
  background-color: black;
  color: yellow;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
.marquee-text {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 12s linear infinite;
  will-change: transform;
}
@keyframes scroll {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

/* ====== HEADER ====== */
.site-title {
  margin-top: 30px;
  font-size: 56px;
  color: yellow;
  text-shadow: 2px 2px black;
}

.site-subtitle {
  margin-top: 5px;
  font-size: 16px;
  font-style: italic; /* Make subtitle italic */
}

/* ====== NAVIGATION ====== */
nav {
  margin-top: 20px;
}

nav a {
  margin: 0 15px; /* Add spacing between links */
}

/* ====== MAIN CONTENT ====== */
main { margin: 40px auto; max-width: 100%; }
.pet-image {
  width: 300px;
  height: auto;
  cursor: url('pet.png') 32 32, pointer;
}
.pet-text { font-size: 15px; margin-top: 10px; }
.bio-text, .followup-text {
  max-width: 500px;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 1.6;
}
.followup-text { margin-top: 25px; color: #ffec99; }

/* ====== CAMERAS SECTION ====== */
.cameras-section { margin-top: 80px; margin-bottom: 60px; }
.cameras-section h2 {
  font-size: 26px;
  color: yellow;
  text-shadow: 2px 2px black;
  margin-bottom: 40px;
}
.camera-row {
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
  align-items: stretch;
}
.camera-item {
  max-width: 250px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.camera-item img {
  width: 100%;
  height: auto;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.3s ease;
}
.camera-item img.sony:hover { content: url('c12.png'); }
.camera-item img.samsung:hover { content: url('c22.png'); }
.camera-item h3 { margin-top: 10px; font-size: 18px; color: yellow; }
.camera-item p { font-size: 14px; line-height: 1.4; color: white; }
.camera-gif { margin-top: auto; }
.camera-gif img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* ====== FOOTER ELEMENTS ====== */
.gif-banner {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.gif-banner img, .mail-gif img { image-rendering: pixelated; }
.gif-banner img { height: 40px; }
.mail-gif { text-align: center; margin-bottom: 25px; }
.mail-gif img { height: 40px; }

/* ====== CONTACT SECTION ====== */
.contact-section {
  max-width: 500px;
  margin: 0 auto 60px;
  font-size: 14px;
  line-height: 1.6;
}
.contact-section h2 {
  font-size: 15px;
  margin-top: 20px;
  margin-bottom: 5px;
  color: yellow;
}
.contact-sub { margin-bottom: 15px; }
.contact-section a { color: #80cfff; text-decoration: underline; }
.contact-section a:hover { color: yellow; }

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  aside.sidebar { display: none; }
  .content-wrapper { padding: 0 10px; max-width: 100%; }
}