* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html {
   background: url("./oh-la-la.jpeg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}
body {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.wrapper {
   padding: 20px;
   max-width: 325px;
   width: 100%;
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
}
.header {
   font-size: 25px;
   text-align: center;
   margin-bottom: 25px;
}
.plates {
   margin-bottom: 25px;
}
.plates li {
   position: relative;
   list-style: none;
   padding: 10px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.plates li span {
   cursor: pointer;
}
.plates li label {
   cursor: pointer;
   padding-right: 2px;
}
.plates li input[type="checkbox"]:checked + label::before {
   content: "🧡";
}
.plates li input[type="checkbox"] + label::before {
   content: "⬜️";
   margin-right: 10px;
}
input[type="checkbox"] {
   opacity: 0;
   position: absolute;
   cursor: pointer;
   top: 15px;
   left: 15px;
}

.add-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
}
.add-item input {
   padding: 10px;
   outline: 0;
   border: 1px solid rgba(0, 0, 0, 0.1);
}