/* ===== GENERAL PAGE STYLES ===== */
body {
  font-family: "Comic Sans MS", cursive, sans-serif;
  background: repeating-linear-gradient(45deg, #fef3e2, #fef3e2 10px, #fff 10px, #fff 20px);
  margin: 0;
  color: #333;
}

header {
  width: 100%;
  height: 200px; /* adjust to match the section height you want */
  overflow: hidden;
}

.header-text {
  position: absolute;
  top: 25%; 
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 100px; /* increased size */
  color: rgb(244, 87, 113);
}

h1, h2 {
  text-shadow: 2px 2px #ff80c0;
}

a {
  color: #ff33aa;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ===== NAVIGATION BAR ===== */
nav {
  background-color: #ffb6e1;
  padding: 8px;
  text-align: center;
  border-bottom: 3px dashed #ff33aa;
}
nav a {
  margin: 0 12px;
  font-weight: bold;
}

/* ===== HEADER IMAGE ===== */
header {
  background: url('https://placekitten.com/800/200') center/cover no-repeat;
  height: 200px;
  border-bottom: 5px solid #ff33aa;
}

/* ===== ABOUT ME (ID CARD) ===== */
#about {
  background: #fff;
  margin: 20px;
  padding: 15px;
  border: 3px double #333;
  display: flex;
  align-items: center;
  max-width: 500px;
}
#about img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin-right: 15px;
  border: 2px solid #333;
}
.id-info {
  font-size: 14px;
}

.about-chat-container {
  display: flex;
  gap: 20px;
  margin: 20px;
  flex-wrap: nowrap; /* Prevents stacking */
}

#about, #chat-log {
  background: #fff;
  border: 3px dashed #ff33aa;
  padding: 15px;
  flex: 1;
  max-width: 500px;
}

#about {
  display: flex;
  align-items: center;
}

#about img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin-right: 15px;
  border: 2px solid #333;
}

#chat-log .message {
  margin-bottom: 10px;
}

#chat-log .message span {
  font-weight: bold;
  color: #ff33aa;
}


/* ===== FAVORITES SECTION ===== */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start; /* ensures items align at the top */
}

.fav-category {
  background: #fff0f6;
  border: 2px dashed #ff33aa;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 350px; /* ensure roughly same height for grid alignment */
}


.card-viewer {
  position: relative;
  width: 200px;
  margin: auto;
}

.card-viewer input {
  display: none;
}

.card {
  display: none;
  background: #fff;
  border: 2px dashed #ff33aa;
  padding: 10px;
  text-align: center;
}

.card img {
  max-width: 100%;
  border: 2px solid #ff33aa;
  margin-bottom: 8px;
}

.prev, .next {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 10px;
  background: #ffb6e1;
  border: 2px solid #ff33aa;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.prev { left: -35px; }
.next { right: -35px; }

/* Show correct card */
#book1:checked ~ #c1,
#book2:checked ~ #c2,
#book3:checked ~ #c3,
#song1:checked ~ #s1,
#song2:checked ~ #s2,
#movie1:checked ~ #m1,
#movie2:checked ~ #m2,
#yt1:checked ~ #y1,
#yt2:checked ~ #y2 {
  display: block;
}

/* Slider stays the same */
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border: 2px solid #ff33aa;
  background: #fff;
}
.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 15px;
  text-align: center;
}


.card-viewer {
  position: relative;
  width: 200px;
  margin: auto;
}

.card-viewer input {
  display: none;
}

.card {
  display: none;
  background: #fff0f6;
  border: 2px dashed #ff33aa;
  padding: 10px;
  text-align: center;
}

.card img {
  max-width: 100%;
  border: 2px solid #ff33aa;
  margin-bottom: 8px;
}

.prev, .next {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 10px;
  background: #ffb6e1;
  border: 2px solid #ff33aa;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.prev { left: -40px; }
.next { right: -40px; }

/* Show card when its radio is selected */
#book1:checked ~ #c1,
#book2:checked ~ #c2,
#book3:checked ~ #c3 {
  display: block;
}



/* ===== CHAT LOG ===== */
#chat-log {
  background: #fff;
  border: 3px dashed #ff33aa;
  margin: 20px;
  padding: 15px;
  max-width: 500px;
}
.message {
  margin-bottom: 10px;
}
.message span {
  font-weight: bold;
  color: #ff33aa;
}

/* ===== FOOTER ===== */
footer {
  background: #ffb6e1;
  padding: 10px;
  text-align: center;
  border-top: 3px dashed #ff33aa;
  margin-top: 30px;
}