/* Reset and base styles */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #c0e0ff;
  background-image: url('red2_blu.gif'); /* Your repeatable background */
  background-repeat: repeat;
  background-position: top left;
  background-attachment: fixed;
  background-color: #000000; /* fallback color */
}

/* Container for content */
#container {
  max-width: 900px;
  margin: 30px auto;
  background: rgba(10, 20, 40, 0.85);
  border-radius: 10px;
  border: 2px solid #00bfff;
  box-shadow: 0 0 20px #00bfff66;
  padding: 30px 20px 10px 20px;
}

.netscape-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 36px auto 16px auto;
  padding: 10px 18px;
  background: rgba(0,0,0,0.35);
  border: 1px solid #006666;
  border-radius: 6px;
  font-size: 13px;
  color: #c0e0ff;
  max-width: 480px;
  text-align: center;
}

.netscape-badge {
  width: 48px;
  height: auto;
  image-rendering: pixelated;
}
.netscape-badge {
  width: 48px;
  height: auto;
  image-rendering: pixelated;
}
/* Header with peyote images */
.header-row-with-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* space between images and text */
  margin-bottom: 18px;
}

/* Container for the three header elements */
.header-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Peyote plant images */
.peyote-image {
  width: 80px; /* adjust size as needed */
  height: auto;
  object-fit: contain;
  border-radius: 8px; /* optional rounded corners */
  box-shadow: 0 0 8px #00bfff88;
}

/* Header with techno boxes */
.techno-box {
  background: linear-gradient(90deg, #d7ffb2 0%, #8ccf4d 100%);
  color: #222;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 26px;
  font-weight: bold;
  border: 2px solid #506f2c;
  border-radius: 4px;
  box-shadow: 2px 2px 8px #000a;
  padding: 10px 28px;
  margin: 0 10px;
  text-align: center;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #fff8, 0 0 8px #bfff90;
}

.techno-title {
  font-size: 38px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  color: #fff;
  letter-spacing: 5px;
  text-shadow: 0 0 8px #0080ff, 0 0 16px #00ffff;
  margin: 0;
}

/* Under construction box */
.under-construction {
  background: rgba(0,0,0,0.7);
  color: #ffff00;
  border: 2px dashed #00ffff;
  padding: 14px 10px;
  margin-bottom: 18px;
  font-size: 19px;
  text-align: center;
  border-radius: 7px;
}

/* Guestbook section */
.guestbook-section {
  background: rgba(0,0,0,0.6);
  border: 1px solid #00bfff;
  border-radius: 6px;
  padding: 15px 20px 10px 20px;
  margin-bottom: 16px;
}

.guestbook-section h2 {
  color: #00ffff;
  text-shadow: 0 0 8px #00bfff;
  margin-top: 0;
}

/* Guestbook form */
#guestbook-form {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center children horizontally */
  gap: 8px;
  margin-bottom: 12px;
}

#guestbook-form input,
#guestbook-form textarea {
  background: #101e2c;
  color: #c0e0ff;
  border: 1px solid #00bfff;
  border-radius: 4px;
  padding: 6px;
  font-size: 14px;
  width: 80%; /* fixed width for inputs */
  max-width: 500px;
  box-sizing: border-box;
}

#guestbook-form button {
  display: inline-block;
  width: auto;
  padding: 7px 20px;
  cursor: pointer;
  background: #00bfff;
  color: #101e2c;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  transition: background 0.2s;
  text-align: center;
}

#guestbook-form button:hover {
  background: #00ffff;
}

/* Guestbook entries list */
#guestbook-entries {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

#guestbook-entries li {
  background: #0c1630;
  border-left: 3px solid #00bfff;
  margin-bottom: 7px;
  padding: 7px 10px;
  font-size: 15px;
  border-radius: 3px;
}

/* View counter styling */
.view-counter {
  text-align: right;
  color: #00ffff;
  font-size: 16px;
  margin-bottom: 15px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 700px) {
  #container {
    padding: 7px 2vw 3vw 2vw;
  }
  .techno-title {
    font-size: 24px;
  }
  .techno-box {
    font-size: 16px;
    padding: 6px 10px;
  }
  #guestbook-form input,
  #guestbook-form textarea {
    width: 100%;
  }
}