/* general */


body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* Prevents horizontal scrolling */
}

mainTitle {
  font-size: 2.5rem;
  margin-top: 10px;
}

.mainTitle{
  text-align: center;
}




#upload-btn{
  padding: 10px 20px;
  background-color: #194988;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 1em;
}

.custom-upload-btn {
  display: inline-block;
  padding: 10px 20px;
  width: 23rem;
  background-color: #0d2646;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  text-align: center;
  margin-bottom: 10px;
}

.custom-upload-btn:hover {
  background-color: #2980b9;
}

button {
  padding: 10px 5%; /* Adjusts size based on screen width */
  font-size: 1rem; /* Relative size */
}

/* index.html */
/* Modal container */
#image-modal{
  position: fixed; /* Stay in place */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(122, 122, 131, 0.8); /* Black with transparency */
  z-index: 1000; /* Above all other elements */
  display: flex;
  justify-content: center;
  align-items: center; /* Center vertically and horizontally */
}

/* Modal image height: 700px; /* Fixed height **/
#modal-img{
  max-width: 95%; /* Allow the image to shrink to fit the viewport */
  max-height: 95%; /* Maintain aspect ratio within the viewport */
  height: 600px; /* Fixed height */
  width: auto;
  height: auto;
  border-radius: 10px; /* Optional: Add rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow */
  transition: transform 0.3s ease; /* Smooth resizing effect */
}

/* Optional: Modal image hover effect */
#modal-img:hover {
  transform: scale(1.05); /* Slight zoom effect */
  
}


@media (min-width: 768px) { /* Target PC screens */
  #photo-gallery {
    display: flex; 
    justify-content: center; /* Center single image */
  }

  #photo-gallery img {
    max-width: 100%;
    max-width: 600px;
    height: auto; /* Adjust height limit */
    object-fit: cover; /* Ensures the image fills the space without distortion */
  }
}

@media (max-width: 767px) { /* Target mobile screens */
  #photo-gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; /* Stack images */
  }

  #photo-gallery img {
    max-width: 90%;
    height: auto; /* Allow full size on mobile */
  }
}


img {
  border: 2px solid #ccc;
  border-radius: 5px;
  max-width: 100%;  /* Ensures images scale down */
  height: auto;     /* Maintains aspect ratio */
}

img {
  cursor: pointer;
}

.birdcount_class {
  border-radius: 5px;
  text-align: center;
  font-size: 1rem;
  margin-top: 10px;
}

.header-container {
  display: flex;
  flex-direction: row; /* Stack elements vertically */
  align-items: center;  /* Center horizontally */
  justify-content: center; /* Center vertically (if using full height) */
  gap: 20px;  /* Space between elements */
  top: 30%;
  left: 50%;
}

.all-button-container{
  display: flex;
  align-items: center;  /* Align vertically */
}

label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Ensures it takes the full width */
  margin-top: 10px; /* Adjust spacing as needed */
}

input[type="checkbox"] {
  margin-right: 8px; /* Space between checkbox and label text */
}

.bird-count-div {
  display: none;
  min-width: 150px;  /* Adjust width as needed */
  height: auto;  /* Adjust height as needed */
  align-items: center;  /* Align vertically */
}

.all-button-container{
  display: block; 
}


/* Wrapper for all buttons */
.button-container {
  display: block;             /* Use flexbox to align items horizontally */
  justify-content: space-between; /* Distribute the buttons with space between */
  text-align: center;
  align-items: center;       /* Vertically align buttons to the center */
  margin-top: 10px;
  margin-bottom: 20px;           /* Optional: Adds space above the buttons */
  margin-left: 2rem;         /* Adds margin to the left of the button container */
}



.upload-button-container {
  display: block;             /* Use flexbox to align items horizontally */
  justify-content: space-between; /* Distribute the buttons with space between */
  text-align: center;
  align-items: center;       /* Vertically align buttons to the center */
  margin-top: 10px;          /* Optional: Adds space above the buttons */
  margin-left: 2rem;         /* Adds margin to the left of the button container */
}

.navButtons {
  margin: 10px auto; /* Centers the button horizontally */
  padding: 10px 20px;
  background-color: #194988;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 1em;
}

.navButtons:hover {
  background-color: #2980b9;
}

.backButtons {
  display: block; /* Ensures it behaves like a block element */
  margin: 10px auto; /* Centers the button horizontally */
  padding: 10px 20px;
  background-color: #194988;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 1em;
}

.backButtons:hover {
  background-color: #2980b9;
}

.comments-section {
  display: flex;
  flex-direction: column; /* Stack the children vertically */
  align-items: flex-start; /* Align all children to the left */
  padding-left: 100px; /* Moves the content in from the left edge */
  padding-right: 50px; /* Optional: Adds space to the right if needed */
}

/* birdBlog.css */

#blog-section {
  margin: 20px auto;
  max-width: 800px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* Blog posts container */
#blog-posts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Individual blog post styling */
.blog-post {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.blog-post h3 {
  color: #3498db;
  margin: 0;
}

.blog-post p {
  color: #555;
}

.blog-post .date {
  font-size: 0.9em;
  color: #999;
}

/* birdBlog.html */
/* Create Blog Section Styles */
#create-blog-section {
  background-color: white;
  padding: 20px;
  margin: 20px auto;
  max-width: 800px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#create-blog-section h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
}

#create-blog-section form {
  display: flex;
  flex-direction: column;
}

#create-blog-section label {
  font-size: 1.1rem;
  margin-bottom: 5px;
  color: #555;
}

#create-blog-section select,
#create-blog-section input,
#create-blog-section textarea {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 15px;
}

#create-blog-section select:focus,
#create-blog-section input:focus,
#create-blog-section textarea:focus {
  border-color: #4CAF50;
  outline: none;
}

#create-blog-section button {
  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

#create-blog-section button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

#create-blog-section button:hover:not(:disabled) {
  background-color: #45a049;
}

/* Blog Posts Section Styles */
#blog-section {
  margin: 20px auto;
  max-width: 800px;
  padding: 20px;
}

#blog-section h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
}

#blog-posts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bird-photo {
  max-width: 100%; /* Ensure the image doesn't exceed the container width */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove inline spacing below the image */
  margin: 10px auto; /* Center the image within the container */
  border-radius: 8px; /* Optional: Add rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

/* Optional: Add styles to the blog container for consistency */
.blog-post {
  padding: 15px;
  border: 1px solid #ddd; /* Light border around each blog */
  border-radius: 8px; /* Rounded corners for the blog boundary */
  margin-bottom: 20px; /* Spacing between blogs */
  background-color: #f9f9f9; /* Subtle background color */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
  overflow: hidden; /* Ensure content stays inside the boundary */
}

.blog-post h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

.blog-post .date {
  font-size: 1rem;
  color: #777;
  margin-bottom: 10px;
}

.blog-post p {
  font-size: 1.1rem;
  color: #444;
}

.blog-post p strong {
  font-weight: bold;
}

.blog-post .content p {
  margin: 10px 0;
  line-height: 1.6;
  color: #444;
}

.blog-post .content br {
  line-height: 1.6; /* Ensures consistent spacing with paragraphs */
}

.blog-post .content {
  text-align: left; /* Ensures content (like paragraphs) is left-aligned */
}

.blog-post img.bird-photo {
  width: 100%; /* Makes the image fill the width of the container */
  height: auto; /* Maintains the aspect ratio of the image */
  max-width: 100%; /* Ensures the image does not exceed the container width */
}

#bird-photo-preview img.uploaded-image {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  border: 2px solid #ccc;
  border-radius: 8px;
}

.no-image {
  font-style: italic;
  color: gray;
  text-align: center;
  margin-top: 10px;
}

.paging-button1 {
  margin: 10px;
  padding: 10px 20px;
  background-color: #194988;;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.paging-button {
  margin: 10px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.paging-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.paging-button:hover:not(:disabled) {
  background-color: #45a049;
}

.blog-paging-button {
  margin: 10px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.blog-paging-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.blog-paging-button:hover:not(:disabled) {
  background-color: #45a049;
}

.bird-photo {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.bird-photo:hover {
  transform: scale(1.05);
}

/* Modal Background */
#image-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#image-modal img {
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;  /* prevent browser pinch zoom on image */
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.1s ease-out;
}


/* Modal Content */
.modal-content1 {
  position: relative;
  max-width: 98%;
  max-height: 98%;
}

/* Image inside the modal */
#modalImage1 {
  width: 100%;
  height: auto;
  max-height: 95vh;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.3);
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 30px;
  color: rgb(63, 61, 61);
  cursor: pointer;
}

#make-comment {
  display: flex;
  align-items: center; /* Align elements vertically */
  gap: 10px; /* Add some spacing */
}

#make-comment {
  display: flex;
  align-items: center; /* Align elements vertically */
  gap: 10px; /* Add spacing */
}

#checkbox-container {
  display: flex;
  align-items: center; /* Ensure checkbox and label align */
  margin-left: auto; /* Push to the right */
  gap: 7px; /* Add spacing between checkbox and label */
}

#comments {
  transform: translateY(8px); /* Adjust alignment slightly */
}


/* Form containers */
#login-container, #upload-container {
  width: 90%;
  max-width: 400px;
  margin: 20px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
}

/* Input fields */
input[type="text"], input[type="password"], input[type="datetime-local"], input[type="file"] {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

/* Checkbox label */
label {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin: 10px 0;
}

input[type="checkbox"] {
  margin-right: 5px;
}

/* Upload success message */
#upload-status {
  font-weight: bold;
  color: green;
  margin-top: 10px;
}

/* Error messages */
#login-error {
  font-weight: bold;
  color: red;
  margin-top: 10px;
}

#bird-list-container {
  width: 90%;
  max-width: 700px;
  margin: 20px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.bird-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Puts buttons on either side */
  width: 100%;
  margin-bottom: 15px;
}

.bird-list-header h2 {
  margin: 0;
  flex-grow: 1; /* Allows title to stay centered */
  text-align: center;
}

.paging-button {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  background-color: #194988;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.paging-button:hover {
  background-color: #153366;
}


.bird-item {
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bird-photo {
  width: 700px;  /* Set your desired width */
  height: auto;  /* Maintain aspect ratio */
  border-radius: 8px; /* Optional: Adds rounded corners */
  object-fit: cover; /* Ensures the image fills the box */
}


.bird-description,
.bird-location,
.bird-date_time {
  width: 80%;
  margin: 5px 0;
  padding: 5px;
}

.edit-btn,
.save-btn {
  margin-top: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.edit-btn {
  background-color: #194988;
  color: white;
}

.save-btn {
  background-color: green;
  color: white;
}

/* birdlist.html */

.bird-list-class {
  font-weight: bold;
  font-style: normal;
  padding: 0;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  font-size: 1.13rem;
  line-height: 1.328;
  margin: 0 auto .25rem auto; /* Centers the list horizontally */
  letter-spacing: 0rem;
  max-width: 400px;
  color: blue; /* Set text color to blue */
  list-style-type: none; /* Removes bullet points */
  text-align: center; /* Centers text inside the container */
}

.bird-list-class li {
  text-align: left; /* align left each <li> item */
  cursor: pointer; /* Show hand cursor on hover */
  display: block; /* Ensures each item takes full width */
  max-width: 400px;
}

#bird-search {
  width: 100%;
  max-width: 400px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  display: block;
  margin: 20px auto;
}

#media-container {
  display: flex;
  justify-content: center; /* Aligns horizontally to the center */
  align-items: center;     /* Aligns vertically to the center */
  height: 70vh;           /* Makes the container take up full height of the viewport */
}

/* Scroll */
#slideshow-container {
  position: relative;
  width: 90%;
  margin: 0 auto;
  /* Ensure the container fills the viewport height */
  height: 90vh;
  background: rgba(0, 0, 0, 0.1);
}

/* Make sure the photo fills the container while fully displaying the image */
#photo {
  width: 100%;
  height: 100%;
  object-fit: contain; /* This ensures the entire image is visible */
  display: block;
}

/* Bird name overlay positioned over the image */
#bird-name {
  position: absolute;
  margin-top: 5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  color: white;
  text-shadow: 2px 2px 4px #000;
  display: none;
  pointer-events: none;
}

/* Bird name overlay positioned over the image */
#bird-namer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  color: white;
  text-shadow: 2px 2px 4px #000;
  display: none;
  pointer-events: none;
}

/* Container for the buttons placed below the image */
.button-container {
  margin-top: 20px;
  text-align: center;
}

/* Style the buttons */
.button-container button {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: #68b661;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}


/* Container for search */
#search-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;
    margin: 20px 0;
    gap: 10px; /* Space between input and button */
}

/* Search input */
#search-input {
    width: 200px; /* Adjust as needed */
    max-width: 80vw; /* Responsive on smaller screens */
    padding: 8px 12px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#search-input:focus {
    border-color: #68b661;
    box-shadow: 0 0 5px rgba(104, 182, 97, 0.5);
    outline: none;
}

/* Search button */
#search-btn {
    padding: 8px 16px;
    font-size: 16px;
    background-color: #68b661;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

#search-btn:hover {
    background-color: #57a64d;
}

#search-btn:active {
    transform: scale(0.97);
}



/* Scroll */
#mac-slideshow-container {
  position: relative;
  width: 90%;
  margin: 0 auto;
  /* Ensure the container fills the viewport height */
  height: 90vh;
  background: rgba(0, 0, 0, 0.1);
}

/* Make sure the photo fills the container while fully displaying the image */
#mac-photo {
  width: 100%;
  height: 100%;
  object-fit: contain; /* This ensures the entire image is visible */
  display: block;
}

/* Bird name overlay positioned over the image */
#mac-bird-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  color: white;
  text-shadow: 2px 2px 4px #000;
  display: block;
  pointer-events: none;
}

/* Container for the buttons placed below the image */
.mac-button-container {
  margin-top: 20px;
  text-align: center;
}

/* Style the buttons */
.mac-button-container button {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: #68b661;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}


@media (max-width: 767px) {
  .paging-button {
    display: none; /* hide buttons on small screens */
  }
}