body{text-align:center;font-family:Arial;transition:all .3s}body.dark{color:#fff;background:#222}body.light{color:#000;background:#f5f5f5}#app{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:20px;display:grid}.card{cursor:pointer;background:#333;border-radius:10px;padding:10px}body.light .card{color:#000;background:#fff}.card img{width:100px}button{cursor:pointer;margin:5px;padding:5px 10px}.modal{background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal-content{background:#333;border-radius:10px;padding:20px}body.light .modal-content{color:#000;background:#fff}#closeModal{cursor:pointer;font-size:24px}