*{font-family:Arial,Helvetica,sans-serif;box-sizing:border-box}body{background:#333;color:#cef;max-width:800px;padding:1rem;margin:0 auto}.new-item-form{display:flex;flex-direction:column;gap:.5rem}.form-row{display:flex;flex-direction:column;gap:.1rem}.btn{background:hsl(200,100%,50%,.1);border:1px solid hsl(200,100%,50%);color:#0af;padding:.25em .5em;border-radius:.25em;cursor:pointer;outline:none}.btn:hover,.btn:focus-visible{background:hsl(200,100%,50%,.2)}.new-item-form input{outline:none;border:1px solid hsl(200,100%,40%);background:hsl(200,100%,30%);border-radius:.25em;padding:.25em .5em;color:#cef}.new-item-form input:focus{border:1px solid hsl(200,100%,70%)}.new-item-form input::placeholder{color:#85c2f8}.header{font-size:1.5rem;margin-top:1.5rem;margin-bottom:.5rem}.list{margin:0;padding:0;margin-left:1rem;list-style:none}.list thead{background-color:#046;color:#cef}.list th,.list td{padding:.5rem;width:200px;text-align:center}.list tr:nth-child(even){background-color:#069}.list tr:hover{background-color:#08c;cursor:pointer}.pagination{display:flex;justify-content:center;gap:.5 rem;list-style:none;margin-top:1rem}.pagination li{padding:.25rem .5rem;background-color:#00aaff1a;color:#0af;border:1px solid hsl(200,100%,50%);border-radius:.25rem;cursor:pointer}.pagination li:hover,.pagination li:focus-visible{background-color:#0af3}.pagination li.disabled{opacity:.5;pointer-events:none}.action{filter:invert(100%)}.btn-edit img,.btn-delete img{width:20px;height:20px}.btn-edit,.btn-delete{background:none;border:none;color:#0af;padding:.25em .5em}.btn-edit:hover,.btn-delete:hover{background:none}.dropdown select{background:rgb(208,231,251);color:#000;border-radius:4px}
