body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   background: #252525;
   color: rgb(255, 255, 255);
   display: flex;
   justify-content: center;
   padding: 40px;

   
}


.container {
  width: 400px;
  background: #2c2c2c;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

label {
    font-size: 0.9rem;
    color: rgb(255, 255, 255);
}


input {
    width: 100%;
    padding: 8px;
    margin: 8px 0;
    border-radius: 5px;
    border: none;
}

.input-row {
    display: flex;
    gap: 10px;
}

.input-row button {
  width: 40px;
}


button {
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #00c896;
  color: white;
}

button:hover {
    background: #008160;
}

.button {
    display: flex;
    gap: 10px;
    margin-top: 10px;    
}

#pieceList {
    list-style: none;
    padding: 0;

}

#pieceList li {
    background: #4c4c4c;
    padding: 8px;
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
}

.remove {
    cursor: pointer;
    color: rgb(253, 0, 0);
    font-weight: bold;
}
    
#result {
    margin-top: 20px;
}

.bar {
    background: #3c3c3c;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    
}