/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #fff; /* Optional: Set a background color */
}

/* Header Styles */
header {
  background-color: #434141;
  color: white;
  padding: 1rem;
  text-align: center;
}

/* Navigation Styles */
nav {
  background-color: #333; /* Dark background for the navbar */
  padding: 20px 0; /* Add padding to make it bigger */
}

nav ul {
  display: flex; /* Use flexbox for horizontal distribution */
  justify-content: space-evenly; /* Even spacing between items */
  list-style: none; /* Remove default list styling */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

nav ul li {
  margin: 0 15px; /* Optional: spacing between items */
}

nav ul li a {
  color: white; /* Link text color */
  text-decoration: none; /* Remove underlines */
  padding: 10px 20px; /* Padding around links */
  display: block; /* Block-level for padding to work */
  transition: background-color 0.3s; /* Smooth hover effect */
  font-size: 18px; /* Increased font size */
}

nav ul li a:hover {
  background-color: #555; /* Darker background on hover */
  border-radius: 5px; /* Rounded corners on hover */
}

/* Main Content Styles */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Full height layout */
}

.main-content {
  flex: 1; /* Takes up available space */
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  padding: 1rem; /* Padding around main content */
}

.sidebar {
  background-color: #f4f4f4;
  padding: 1rem;
  flex: 1 1 250px; /* Responsive flex sizing */
  margin: 0.5rem; /* Margin around sidebar */
}

.content {
  background-color: #e8e8e8;
  padding: 1rem;
  flex: 2 1 500px; /* Responsive flex sizing */
  margin: 0.5rem; /* Margin around content */
}

/* Footer Styles */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}

/* Button Styles */
button {
  margin: 20px 0;
  padding: 10px 20px;
  font-size: 25px;
  color: #333;
  background-color: #e8e8e8;
  border: 2px solid #333;
  cursor: pointer;
  display: block;
  
}

/* Responsive Styles */
@media (max-width: 768px) {
  .main-content {
      flex-direction: column; /* Stack content on small screens */
  }

  .sidebar {
      order: 2; /* Order for small screens */
  }

  .content {
      order: 1; /* Order for small screens */
  }

  nav ul {
      flex-direction: column; /* Stack nav items vertically */
      align-items: center; /* Center items */
  }

  nav ul li a {
      padding: 10px; /* Adjust padding for smaller screens */
  }
}

@media (max-width: 480px) {
  header {
      font-size: 1.2rem;
      padding: 0.5rem; /* Smaller padding */
  }

  footer {
      font-size: 1rem;
      padding: 0.5rem; /* Smaller padding */
  }
}

/* Drop Zone Styles */
.dropzone-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.dropzone {
  width: 200px; /* Maintain enough space for the box */
  height: 150px; /* Match the height of the box */
  display: flex; /* Flexbox for centering */
  justify-content: center; /* Center the box horizontally */
  align-items: center; /* Center the box vertically */
  background-color: lightgray; /* Background for drop zone */
  border: 2px dashed #333; /* Dashed border */
  position: relative; /* Position for the close button */
  overflow: hidden; /* Prevent overflow issues */
  box-sizing: border-box; /* Ensure dimensions include border and padding */
}

.dropzone p {
  margin: 0;
}


/* Close Button Styles */
.close-btn {
  position: absolute; /* Absolute positioning within the drop zone */
  top: 5px;           /* Position it at the top of the drop zone */
  right: 5px;         /* Position it at the right of the drop zone */
  background-color: #ffd676; /* Red color for the button */
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 5px;
  border-radius: 50%;  /* Makes it round like an 'X' button */
}

.close-btn:hover {
  background-color: #ff4500; /* Darker red on hover */

}

/* Add Drop Zone Button */
#addDropZone {
  padding: 10px 20px;
  background-color: seagreen;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

/* Box Styles */
.box {
  flex: 0 0 auto; /* Prevent the box from resizing */
  width: 150px; /* Ensure fixed width */
  height: 150px; /* Ensure fixed height */
  display: flex; /* Flexbox for centering content */
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
  text-align: center; /* Ensure text alignment */
  font-size: 16px; /* Adjust font size to fit */
  font-weight: bold; /* Bold text */
  overflow: hidden; /* Prevent text overflow */
  background-color: cornflowerblue;
  border: 2px solid black;
  cursor: grab;
  margin: 0; /* Ensure no extra margin */
}

/* Box Container Styles */
.box-container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  gap: 10px; /* Spacing between boxes */
}

/* Miscellaneous Styles */
h1  {
    font-size: 48px;           /* Makes the title bigger */
    font-weight: bold;         /* Makes the text bold */
    color: #fff;               /* White color for text */
    text-align: center;        /* Centers the title */
    letter-spacing: 2px;       /* Adds space between the letters */
    font-family: 'Arial', sans-serif;  /* Change to a more stylish font */
    text-transform: uppercase; /* Makes the title uppercase */
    padding: 20px 0;           /* Adds vertical padding for spacing */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow for effect */
  }

p {
  font-size: 24px;
  text-align: center;
  color: rgb(145, 134, 134);
}

 a {
  color: rgba(255, 144, 236, 0.797);
  font-size: 10px;
  text-decoration: underline;
  
}

footer p {
  font-size: 16px;
  text-align: center;
  color: cornflowerblue;
}

#randomWord {
  font-size: 24px;
  margin-top: 20px;
  color: #333;
}
/* Centering for "Construction Site" */
h2 {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 10vh; /* Optional: Full viewport height */
  text-align: center;
  font-size: 28px; /* Adjust font size as needed */
  color: #333; /* Color of the text */
  font-weight: bold;
}

/* Image container setup */
.image-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
  max-width: 100%;  /* Ensure the container doesn't exceed the page width */
  justify-content: space-evenly;  /* Distribute images evenly */
}

/* Default size for images to be visible but not too big */
.styled-image {
  width: 200px;  /* Adjust the width to your preference */
  height: auto;  /* Maintain aspect ratio without cropping */
  object-fit: contain; /* Ensures the entire image fits without being cropped */
  border-radius: 8px;
  margin: 10px;
  transition: transform 0.3s ease-in-out; /* Smooth transition effect */
}

/* Optional: Add a hover effect for interactivity */
.styled-image:hover {
  transform: scale(1.05); /* Slight zoom effect when hovered */
}

.comments-container {
  width: 300px;
  margin: 20px auto;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.comment-box {
  margin-bottom: 15px;
}

textarea {
  width: 100%;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  resize: none;
  height: 50px;
}



button:hover {
  background-color: #ff9bdc;
}

.comments-section {
  max-height: 300px;
  overflow-y: auto;
  padding-top: 10px;
}

.comment {
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  position: relative;
}

.comment .comment-body {
  margin-bottom: 5px;
}

.comment .comment-actions {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.comment .reply {
  cursor: pointer;
}

.comment .like, .comment .delete {
  cursor: pointer;
}

.reply-box {
  display: none;
  margin-left: 20px;
  padding-top: 10px;
}