body {
  font-family: Arial, sans-serif;
  background-color: #f7f5f2;
  color: #333;
  margin: 0px;
  background: radial-gradient(circle at top left, #fdf6f0, #caa46b);
  min-height: 100vh;
}

h1 {
  text-align: center;
  color: #6b4f4f;
  background: linear-gradient(90deg, #c28f6b, #6b4f4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.container, #shot-history, #bean-averages {
  background-color: #ffffff83;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

h1, h2 {
  color: #6b4f4f;
}

h2 {
    margin: 0px;
}

.espresso-form {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.espresso-form label {
  display: block;
  margin: 5px 0 2px 0;
  font-weight: bold;
}

.espresso-form input[type="text"],
.espresso-form input[type="number"] {
  width: 100%;
  padding: 6px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding-right: 0px;
}

.espresso-form input[type="submit"] {
  background-color: #6b4f4f;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}

.espresso-form input[type="submit"]:hover {
  background-color: #5a3e3e;
}

#shot-history {
  margin-bottom: 20px;
}

.shot {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-left: 5px solid #6b4f4f;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.feedback-good {
  color: #2e7d32; /* green */
  font-weight: bold;
}

.feedback-warning {
  color: #f9a825; /* orange */
  font-weight: bold;
}

.feedback-bad {
  color: #c62828; /* red */
  font-weight: bold;
}

#bean-averages {
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#clear-shots {
  background-color: #c62828;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 20px;
}

#clear-shots:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: not-allowed;
}

#clear-shots:hover:not(:disabled) {
  background-color: #a71d1d;
}

.container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  min-height: auto;
}

.flex-main {
  display: flex;
  gap: 20px;     
  align-items: flex-start; 
  flex-wrap: wrap;   
}

.left-column {
  flex: 1;         
  min-width: 250px;  
  max-width: 600px;
}

.right-column {
  flex: 2;           
  min-width: 300px;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 20px;  
}

#shot-history {
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#bean-averages {
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-weight: bold;
}

@media (max-width: 800px) {
  .flex-main {
    flex-direction: column;
  }
}

.ideal {
  font-weight: bold;
  font-size: 1rem;    
  color: #6b4f4f;           
  background-color: #fff3e0;
  padding: 8px 12px;
  border-left: 4px solid #6b4f4f;
  border-radius: 5px;
  margin-bottom: 15px;
  margin: 10px 0;
}