/* Reset and base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: url('GIF/PS2bg-copy.gif') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  min-height: 100vh;
}

/* Top spacer above navbar */
.top-gap {
  height: 40px; /* adjust for desired gap */
}

/* Nav Bar */
.navbar {
  background-color: rgba(57, 61, 52, 0.61);
  padding: 1rem;
  width: 60%;
  margin: 0 auto;
  border-radius: 2px;
  z-index: 10;
}

.navbar ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
}

.navbar li a {
    pointer-events: auto;
  color: #85c39f;
  font-family: Bank Printer;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
    transition: color 0.3s ease, transform 0.2s ease;
  transform-origin: center;
  
}

.navbar li a:hover {
  color: #b711b1;
  transform: scale(1.08);
    overflow: visible;

}

.site-header {
  display: flex;
  justify-content: center;
  margin-top: -60px; /* adjust if you need to shift it */
  margin-bottom: -90px;
  z-index: 1;
  pointer-events: none;
}

.header-img {
  max-width: 80%;
  height: auto;
  image-rendering: auto;
  filter: invert(75%) sepia(28%) saturate(448%) hue-rotate(90deg) drop-shadow(4px 4px 3px #b711b1);;
}

/* Main Content */
.content {
  display: flex;
  gap: 1rem;
  width: 60%;
  margin: 2rem auto;
}

/* Columns */
.left-column {
  flex: 1;
  font-family: Bank Printer;
  color: #e0faeb;
  font-size: 0.8rem;
}

.right-column {
  flex: 2;
  display: block;
}

.right-column .row {
  width: 100%;
  display: block; 
}

.left-column .row h2,
.right-column .row h2 {
  font-size: 1.8rem; /* adjust to your desired size */
}

.right-column .row:nth-of-type(1) h2 {
  padding-bottom: 10px;
}


.row {
  position: relative;
  background-color: rgba(57, 61, 52, 0.61);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 2px;
  z-index: 1;
  overflow: visible;
}

.row p {
  color: rgb(255, 255, 255);
  font-family: bank printer;
}

.log-input {
  display: none; /* hide input UI */
}

.site-log {
  font-family: Bank Printer;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 280px;
  max-height: 600px;  /* fixed height */
  overflow-y: auto;   /* vertical scroll if needed */
  padding-right: 10px; /* add some right padding so scrollbar doesn't cover text */
  scrollbar-width: thin; /* for Firefox */
  scrollbar-color: #8b0f86 transparent;
}

.log-entry {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 0.5rem 1rem;
  border-left: 4px solid #b711b1;
  border-radius: 2px;
  pointer-events: auto;
  color: white;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.log-entry:hover::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('GIF/darkstatic.gif') center center / cover no-repeat;
  opacity: 0.15;   /* low opacity */
  pointer-events: none; /* so it doesn't block hover or clicks */
  z-index: 0;
  transition: opacity 0.3s ease;
}

/* Make sure content is above the pseudo-element */
.log-entry > * {
  position: relative;
  z-index: 1;
}

.log-entry .log-date {
  display: block;
  font-size: 0.8rem;
  color: #85c39f;
  margin-bottom: 0.2rem;
}



.row h2 {
  font-family: 'Ledlight';
  font-weight: bold;
  font-size: 2rem;
  color: #85c39f;
  text-shadow: 4px 4px 2px #0d1511;
}

/* Optional: Custom scrollbar for Webkit browsers (Chrome, Safari) */
.site-log {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
  pointer-events: auto;
}

.site-log::-webkit-scrollbar-track {
  background: transparent;
}

.site-log::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  border: 2px solid transparent;
}

.right-column .row:nth-of-type(2) {
  padding: 0 1rem;
  background-color: rgba(240, 248, 255, 0);
}

.site-log-header {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space between text and image */
}

.site-log-header h2 {
  margin: 0;
}

/* Stamp Row Horizontal Layout */
.stamp-wrapper {
  display: flex;
  align-items: center;  /* vertical center alignment */
  gap: 0.7rem;          /* space between stamp and info */
}

.stamp-img {
  width: 120px;
  margin-top: 8px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 2px #000);
}

.stamp-info {
  display: flex;
  flex-direction: column; /* stack note and buttons vertically */
  gap: 0.3rem;
  align-items: flex-start; /* align text and buttons to the left */
}

.stamp-note {
  font-size: 1rem;
  color: #cfcfcf;
  font-family: Frusciante;
  line-height: 1.2;
}

/* Button and Embed Code same as before */
.reveal-code-btn {
  padding: 0.08rem 0.6rem;
  font-size: 0.7rem;
  background-color: rgba(133, 195, 159, 0.3);
  color: #85c39f;
  border: 1px solid #85c39f;
  border-radius: 2px;
  cursor: pointer;
  font-family: Bank Printer, sans-serif;
}

.reveal-code-btn:hover {
  background-color: rgba(183, 17, 177, 0.3);
  color: #b711b1;
  border-color: #b711b14d;
}

.embed-code {
  display: none;      
  width: 220px;
  height: 60px;
  font-size: 0.65rem;
  font-family: monospace;
  background: #111;
  color: #85c39f;
  border: 1px solid #85c39f;
  border-radius: 2px;
  resize: none;
}


.right-split {
  display: flex !important;  /* force flex layout */
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
  background-color: rgba(57, 61, 52, 0.61); /* keep your row bg */
  border-radius: 2px;
  position: relative;
  padding: 0;
}

/* Left section: flexible chat area */
.middle-section {
  background-color: rgba(57, 61, 52, 0.61);
  min-height: 280px;
  border-radius: 2px;
  padding: 1rem;
  margin-left: -1rem;
  margin-right: -4rem;
  box-sizing: border-box;
  flex: 1 1 auto;
}

.guestbook-container {
  width: 100%;
  height: 100%;
  background: rgba(57, 61, 52, 0.7);
  padding: 0.5rem;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.guestbook-messages {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #85c39f;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  font-family: monospace;
  font-size: 0.85rem;
}

.message {
  border-bottom: 1px solid #444;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  color: #fff;
}

.message small {
  color: #aaa;
}

.guestbook-form input,
.guestbook-form textarea {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.3rem;
  background: #111;
  color: #85c39f;
  border: 1px solid #85c39f;
  border-radius: 3px;
}

.guestbook-form button {
  background: rgba(133,195,159,0.3);
  border: 1px solid #85c39f;
  color: #85c39f;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  width: 100%;
}

.guestbook-form button:hover {
  background: rgba(183,17,177,0.3);
  color: #b711b1;
}




/* Right section: fixed width for avatar + bubble */
.right-section {
  width: 400px; /* shrink if needed */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
}

.avatar-textbubble-wrapper {
  display: flex;
  align-items: flex-end;
}

.avatar {
  width: 400px;
  margin: 0;
}

.text-bubble {
  margin: 0;
}
/* Avatar + Text Bubble Container: horizontal layout */
.avatar-textbubble-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 1rem; /* space between avatar and bubble */
}

/* Avatar image style */
.avatar {
  position: absolute;
  bottom: 0;   /* start at bottom of parent row */
  right: -68px;
  width: 320px;
  height: auto;
  margin: 0;   /* no need for margins anymore */
  z-index: 10; /* sit on top of other elements */
  filter: drop-shadow(-4px -4px 2px #85c39f);
}

.text-bubble {
  position: absolute;
  top: -22px;
  left: 30px; 
  background: #e3e0d9;
  color: black;
  padding: 0.6rem 1rem;
  border-radius: 2px;
  min-width: 20%;
  max-width: 40%;
  font-size: 1.2rem;
  line-height: 1.3;
  animation: floatBounceRotate 3s ease-in-out infinite;
  z-index: 10;
}

.text-bubble p {
  font-family: Frusciante;
  color: #040404;
    text-align: left;
}

.text-bubble::after {
  content: "";
  position: absolute;
  top: 80%;
  right: -18px;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left-color: #e3e0d9;
}

@keyframes floatBounceRotate {
  0% {
    transform: scaleX(-1) translateY(0) rotate(0deg);
  }
  25% {
    transform: scaleX(-1) translateY(-6px) rotate(2deg);
  }
  50% {
    transform: scaleX(-1) translateY(0) rotate(0deg);
  }
  75% {
    transform: scaleX(-1) translateY(-6px) rotate(-2deg);
  }
  100% {
    transform: scaleX(-1) translateY(0) rotate(0deg);
  }
}


@keyframes floatBounceRotate {
  0% {
    transform: translateY(0) rotate(-0.5deg);
  }
  50% {
    transform: translateY(-6px) rotate(1deg);
  }
  100% {
    transform: translateY(0) rotate(-0.5deg);
  }
}


@font-face {
  font-family: 'Thin Worms';
  src: url('Fonts/Thin Worms/MBThinWorms.woff2') format('woff2'),
       url('Fonts/Thin Worms/MBThinWorms.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Beautiful Horror';
  src: url('Fonts/Beautiful Horror/BeautifulHorror.woff2') format('woff2'),
       url('Fonts/Beautiful Horror/BeautifulHorror.woff') format('woff');
}
@font-face {
  font-family: 'Bank Printer';
  src: url('Fonts/Bank Printer/F25BankPrinter.woff2') format('woff2'),
       url('Fonts/Bank Printer/F25BankPrinter.woff') format('woff');
}
@font-face {
  font-family: 'Ledlight';
  src: url('Fonts/LED LIGHT/LEDLIGHT.woff2') format('woff2'),
       url('Fonts/LED LIGHT/LEDLIGHT.woff') format('woff');
}
@font-face {
  font-family: 'Paris';
  src: url('Fonts/Paris/Parisienne.woff2') format('woff2'),
       url('Fonts/Paris/Parisienne.woff') format('woff');
}
@font-face {
  font-family: 'Wartext';
  src: url('Fonts/Wartext/WarText.woff2') format('woff2'),
       url('Fonts/Wartext/Wartext.woff') format('woff');
}
@font-face {
  font-family: 'Frusciante';
  src: url('Fonts/Hand/FruscianteHand.woff2') format('woff2'),
       url('Fonts/Hand/FruscianteHand.woff') format('woff');
}