body{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
  background-color: #1a1a1a; /* Darker background */
  color: #e0e0e0; /* Lighter text */
  font-family: sans-serif; /* Modern font */
  font-size: 14px; /* Slightly smaller base font size */
}

#control-holder{
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow items to wrap */
  justify-content: center; /* Center items */
  padding: 15px; /* Reduced padding */
  gap: 15px; /* Reduced gap */
  margin: 0;
  text-align: center;
}

.control-section {
  display: flex;
  flex-direction: column; /* Stack controls vertically within sections */
  align-items: center; /* Center controls horizontally */
  gap: 2px; /* Minimal gap */
  padding: 3px; /* Minimal padding */
  background-color: #383838; /* Slightly lighter for contrast */
  border-radius: 2px; /* Minimal radius */
  border: 1px solid #484848;
  min-width: unset;
  flex-basis: 85px; /* **Very small basis** */
  flex-grow: 1;
  flex-shrink: 1; /* Allow shrinking */
}

#color-container {
  flex-direction: row; /* Override column for colors */
  flex-wrap: wrap;
  justify-content: flex-start; /* Align swatches left */
  gap: 2px; /* Minimal gap */
  flex-basis: 120px; /* Give color section slightly more initial space */
}

.gallery{
  display: inline-block;
  object-fit: cover;
  background-color: red;
  height: 300px;
  width: 33%;
}

/* General Control Styles */
.control-button,
.control-select,
.control-input {
  padding: 2px 4px; /* Minimal padding */
  font-size: 0.8em; /* Smaller font */
  min-height: 20px; /* Reduced height */
  margin: 1px;
  border-radius: 2px; 
  border: 1px solid #484848;
  width: calc(100% - 4px); /* Make controls fill section width */
  box-sizing: border-box; /* Include padding/border in width */
  background-color: #333;
  color: #e0e0e0 !important; /* Ensure text color is applied */
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  text-align: center;
  display: inline-block; /* Needed for buttons */
  vertical-align: middle; /* Align items better */
}

.control-button {
  background-color: #4a4a4a; /* Slightly lighter default button background */
}

.control-button:hover,
.control-select:hover,
.control-input:not(.control-color-picker):hover {
  background-color: #505050;
  border-color: #777;
}

/* Style for the p5 color picker */
.control-color-picker {
  height: 20px !important; 
  min-height: 20px !important;
  padding: 0px !important; /* No padding */
  border: 1px solid #484848 !important;
  width: 95% !important; /* Slightly less than 100% */
  margin: 1px auto !important; /* Center */
  display: block !important; /* Ensure centering works */
}

.color-swatch {
  width: 15px; /* Tiny */
  height: 15px;
  border: 1px solid #555;
  margin: 1px;
  border-radius: 3px; 
  cursor: pointer;
}

.color-swatch:hover {
  border-color: #bbb;
  transform: scale(1.1); /* Slight zoom effect */
}

.smear-button {
  padding: 2px 4px; 
  min-height: 20px; 
  font-size: 0.75em; /* Tiny */
  border-radius: 4px; /* Keep smear button rectangular */
  width: auto;
  height: auto;
  font-weight: bold;
  color: #000 !important; /* Ensure black text */
  background-color: #fff !important; /* Ensure white background */
}

a{
  color: #64b5f6; /* Brighter link color */
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Remove default browser styles potentially overriding p5.js ones */
input,
button,
select {
  /* Resetting some base styles if needed, 
     but relying on specific classes is better */
  /* background-color: initial; */
  /* border: initial; */
}

/* Basic Responsiveness */
@media (max-width: 600px) {
  #control-holder {
    flex-direction: column; /* Stack sections vertically */
    align-items: center;
    padding: 10px;
    gap: 10px;
  }
  .control-section {
    width: 90%; /* Make sections take more width */
    min-width: unset;
  }
  body {
    font-size: 13px;
  }
}

#controls-wrapper {
  /* Styles are set dynamically in JS, but defaults can go here */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Softer shadow */
  max-width: 85vw; /* Slightly stricter max width */
  /* background-color set in JS */
  border-radius: 6px; /* Smaller radius */
  padding: 2px; /* Minimal padding */
}

#controls-toggle {
  display: block; /* Make button take full width of its container */
  width: calc(100% - 4px); /* Adjust */
  margin-bottom: 2px; 
  font-size: 0.8em; /* Smaller */
  padding: 2px 5px; 
}

/* Adjust control holder margin when inside wrapper */
#control-holder {
  margin-top: 0;
  padding: 2px; /* Minimal padding */
  gap: 3px; /* Minimal gap */
  max-height: 60vh; 
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; /* Ensure flex properties */
  flex-wrap: wrap; /* Ensure wrapping */
  max-width: 600px; /* **Explicit max-width to force wrapping** */
}

/* Ensure canvas isn't obscured by fixed controls */
#sketch-holder {
  position: relative; /* **Make this the positioning context** */
  z-index: 1; /* Lower z-index than controls */
  /* Add padding-top if controls overlap initially */
  /* padding-top: 50px; */ 
}

/* Override responsiveness for control-holder when inside the wrapper */
@media (max-width: 600px) {
  #controls-wrapper {
    max-width: 95vw;
    max-height: 70vh;
  }

  #controls-wrapper #control-holder {
      padding: 2px;
      gap: 3px;
      max-width: 90vw; /* Adjust max-width for smaller screens */
  }

  #controls-wrapper .control-section {
      flex-basis: 75px; /* Tiny basis */
      padding: 2px;
  }
}