body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  background-color: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  max-width: 95%;
  width: 500px;
  margin: 1rem;
}

h1 {
  text-align: center;
  color: #333;
}

.mixing-area {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 2rem 0;
}

.color-result {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  border: 2px solid #ccc;
  margin: 0 auto;
}

.color-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.color-slider {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.slider {
  width: 100%;
  height: 25px;
}

#redSlider::-webkit-slider-thumb {
  background: red;
}

#yellowSlider::-webkit-slider-thumb {
  background: yellow;
}

#blueSlider::-webkit-slider-thumb {
  background: blue;
}

button {
  display: block;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

.color-selection {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.color-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
  border: 3px solid #333;
  flex: 0 0 auto;
}

.color-button:hover {
  transform: scale(1.1);
}

.color-button.selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px #333;
}

.color-button.locked {
  position: relative;
  opacity: 0.5;
  cursor: not-allowed;
}

.color-button.locked::after {
  content: "🔒";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

.color-button.unlocked {
  opacity: 1;
  cursor: pointer;
}

.red {
  background-color: #FF0000;
}

.yellow {
  background-color: #FFFF00;
}

.blue {
  background-color: #0000FF;
}

.orange {
  background-color: #FFA500;
}

.green {
  background-color: #008000;
}

.purple {
  background-color: #800080;
}

.indigo {
  background-color: #4B0082;
}

.violet {
  background-color: #9400D3;
}

.white {
  background-color: #FFFFFF;
  border: 3px solid #999;
}

.black {
  background-color: #000000;
  border: 3px solid #333;
}

.pink {
  background-color: #FF69B4;
}

.brown {
  background-color: #8B4513;
}

.cyan {
  background-color: #00FFFF;
}

.magenta {
  background-color: #FF00FF;
}

.selected-colors {
  text-align: center;
  margin-top: 1rem;
  min-height: 3em;  /* Add minimum height to prevent layout shift when more colors are listed */
}

#colorList {
  font-weight: bold;
}

.gray {
  background-color: #808080;
}

.darkgray {
  background-color: #404040;
}

.lightgray {
  background-color: #C0C0C0;
}

.lime {
  background-color: #32CD32;
}

.skyblue {
  background-color: #87CEEB;
}

.deepblue {
  background-color: #00008B;
}

.maroon {
  background-color: #800000;
}

.rose {
  background-color: #FF007F;
}

.ruby {
  background-color: #E0115F;
}

.vermillion {
  background-color: #E34234;
}

.scarlet {
  background-color: #FF2400;
}

.absolutezero {
  background-color: #0048BA;
}

.lemon {
  background-color: #FFF700;
}

.marygold {
  background-color: #FFB200;
}

.almond {
  background-color: #FFEBCD;
}

.amaranth {
  background-color: #E52B50;
}

.amber {
  background-color: #FFBF00;
}

.apple {
  background-color: #B32020;
}

.azure {
  background-color: #007FFF;
}

.lavender {
  background-color: #E6E6FA;
}

.amethyst {
  background-color: #9966CC;
}

.blood {
  background-color: #8B0000;
}

.aquamarine {
  background-color: #7FFFD4;
}

.audio-controls {
  text-align: center;
  margin-bottom: 1rem;
}

#musicToggle {
  background-color: #6a5acd;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#musicToggle:hover {
  background-color: #483d8b;
}

.americanbronze {
  background-color: #7B3F00;
}

.ancientbronze {
  background-color: #967444;
}

.bubblegum {
  background-color: #FFB6C1;
}

.bubbleacid {
  background-color: #7FB98F;
}

.ballblue {
  background-color: #21ABCD;
}

.blueberrybatter {
  background-color: #4B61D1;
}

.bronze {
  background-color: #CD7F32;
}