/* General Reset */
body {
   margin: 0;
   font-family: Arial, sans-serif;
   color: #333;
}

/* Sticky Header */
header {
   position: sticky;
   top: 0;
   background-color: #f8f9fa;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 20px;
   border-bottom: 1px solid #ddd;
   z-index: 1000;
}
header .logo {
   font-size: 18px;
   font-weight: bold;
   color: #007bff;
}
header .ad-banner {
   width: 320px;
   height: 50px;
   background-color: #ddd;
   text-align: center;
   line-height: 50px;
   font-size: 14px;
   color: #666;
}

/* Main Content */
main {
   padding: 20px;
}

main h1 {
   font-size: 24px;
   margin-bottom: 20px;
   text-align: center;
}

.main-content {
   display: flex;
   flex-direction: column;
   width: 100%;  /* Ensures full width on mobile */
   max-width: 1000px; /* Fixed width for larger screens */
   margin: 0 auto;
   overflow: hidden; /* Prevent expansion due to content changes */
   box-sizing: border-box; /* Ensure padding does not affect layout */
   height: 100%; /* Fix height issues for landscape mode */
   min-height: 500px; /* Ensure a minimum height for stability */
}

/* Tool Container */
.tool-container {
   margin-bottom: 20px;
   border: 1px solid #ddd;
   padding: 20px;
   background-color: #fff;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.tool-container input[type="file"] {
   margin: 20px 0;
}

/* Color Palette */
#color-palette {
   display: flex;
   flex-wrap: wrap; /* Allow boxes to wrap on smaller screens */
   gap: 10px;
   margin-top: 20px;
   justify-content: center; /* Center-align boxes */
   display: none; /* Hide initially */
   max-width: calc((50px * 5) + (10px * 4)); /* Limit to 5 boxes per row */
}

.color-box {
   width: 50px;  /* Fixed size for each box */
   height: 50px;
   /* border: 1px solid #ddd; */
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   /* margin: 5px; */
   flex-shrink: 0; /* Prevent shrinking */
   display: none; /* Hide initially */
}

/* Ads */
.inline-ad {
   margin: 20px 0;
   width: 300px;
   height: 250px;
   background-color: #ddd;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   line-height: 250px;
   font-size: 14px;
   color: #666;
}

.sticky-ad {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50px;
   background-color: #ddd;
   text-align: center;
   line-height: 50px;
   font-size: 14px;
   color: #666;
}

/* Footer */
footer {
   padding: 20px;
   background-color: #f8f9fa;
   border-top: 1px solid #ddd;
   text-align: center;
   font-size: 14px;
}

footer .ad-banner {
   width: 320px;
   height: 50px;
   background-color: #ddd;
   margin: 10px auto;
   text-align: center;
   line-height: 50px;
   font-size: 14px;
   color: #666;
}

/* Responsive Design */
@media (max-width: 1024px) {
   header {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   header .ad-banner {
      width: 468px;
      height: 60px;
      margin-top: 10px;
   }

   main {
      padding: 30px;
   }

   .tool-container {
      max-width: 700px;
      margin: 0 auto;
   }

   .inline-ad {
      width: 300px;
      height: 250px;
   }

   footer .ad-banner {
      width: 468px;
      height: 60px;
   }

   #color-palette {
      justify-content: center; /* Ensure alignment */
      gap: 8px; /* Reduce gaps for smaller screens */
      max-width: calc((50px * 5) + (8px * 4)); /* Maintain max 5 per row */
   }
}

@media (max-width: 768px) {
   #color-palette {
      gap: 5px; /* Tighter gaps for compact screens */
      max-width: calc((50px * 5) + (5px * 4)); /* Maintain wrapping */
   }

   .tool-container {
      width: 90%;
      padding: 15px;
   }

   .main-content {
      max-width: 90%; /* Keep consistent width */
      margin: 0 auto;
   }
}

@media (min-width: 1025px) {
   main {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 20px;
   }

   .main-content {
      width: 70%; /* Consistent width for larger screens */
   }

   .ads-sidebar {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .tool-container {
      margin-bottom: 20px;
      padding: 20px;
      border: 1px solid #ddd;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   }

   .inline-ad {
      width: 300px;
      height: 250px;
      margin: 0 auto;
   }

   .large-vertical-ad {
      width: 300px;
      height: 600px;
      background-color: #ddd;
      text-align: center;
      line-height: 600px;
      font-size: 14px;
      color: #666;
   }
}