body { margin: 0; font-family: Arial, sans-serif; background-color: #eafce7; color: #1b4d1b; }
header { background-color: #2e7d32; color: white; padding: 15px; text-align: center; }
.logo-title { display: flex; align-items: center; justify-content: center; gap: 15px; }
.logo { width: 40px; height: 40px; border-radius: 8px; }
nav ul { list-style: none; display: flex; justify-content: center; gap: 20px; padding: 0; margin: 10px 0 0; }
nav li { cursor: pointer; font-weight: bold; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 15px; padding: 20px; text-align: center; }
.box { background-color: #1a1a1a; color: white; padding: 20px; border-radius: 8px; font-size: 14px; cursor: pointer; transition: 0.3s; }
.box:hover { background-color: #333; }
#audioList { list-style-type: none; padding: 0; }
#audioList li { margin: 10px 0; cursor: pointer; color: darkblue; }
#audioList li:hover { text-decoration: underline; }
footer { background-color: #2e7d32; color: white; text-align: center; padding: 10px; font-size: 14px; }
.back-btn { margin: 10px; background-color: #2e7d32; color: white; border: none; padding: 10px; cursor: pointer; border-radius: 5px; }
@media (max-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }