body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

main {
  padding: 140px 20px 60px;
}

/* Title */
main h2 {
  font-size: 28px;
  color: rgb(119, 29, 29);
  text-align: center;
  margin-bottom: 20px;
}

/* Form Wrapper */
main form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;

  background: rgba(97, 228, 176, 0.06);
  border: 1px solid rgba(119, 29, 29, 0.15);
  border-radius: 12px;

  padding: 25px;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Groups */
.genre-name,
.genre-color {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Labels */
label p {
  font-weight: bold;
  color: rgb(119, 29, 29);
}

/* Input text */
input[type="text"] {
  padding: 12px;
  border: 1px solid rgba(119, 29, 29, 0.3);
  border-radius: 10px;
  font-size: 16px;
}

/* Input focus */
input[type="text"]:focus {
  outline: none;
  border-color: rgb(119, 29, 29);
  box-shadow: 0 0 0 4px rgba(119, 29, 29, 0.15);
}

/* Color Input */
input[type="color"] {
  width: 80px;            /* better than % for control */
  height: 45px;

  padding: 0;
  border: 1px solid rgba(119, 29, 29, 0.3);
  border-radius: 6px;     /* small radius OR 0 for sharp rectangle */

  cursor: pointer;

  background: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  box-shadow: 0 0 0 2px rgba(119, 29, 29, 0.08);
}

/* remove inner color padding in some browsers */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}

/* Button */
button {
  padding: 12px;
  border-radius: 10px;
  border: 2px solid rgb(119, 29, 29);
  background: rgb(119, 29, 29);
  color: white;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s ease;
}

button:hover {
  background: transparent;
  color: rgb(119, 29, 29);
}

/* Footer*/
footer {
  background: rgb(119, 29, 29);
  color: white;
  padding: 20px;
  text-align: center;
}

/* Desktop */
@media (min-width: 961px) {
  main {
    padding: 140px 80px 60px;
  }

  form {
    padding: 35px;
  }

  main h2 {
    font-size: 34px;
  }
}

/* Error Container*/
.error-container {
  max-width: 500px;
  margin: 0 auto 20px;

  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.4);
  border-radius: 10px;

  padding: 12px 16px;
}

/* Errors list */
.error-list {
  margin: 0;
  padding-left: 18px;
}

/* Error items */
.error-list li {
  color: rgb(231, 76, 60);
  font-weight: bold;
  font-size: 14px;
  margin: 4px 0;
}