body { font-family: sans-serif; margin: 0; padding: 0; } .container { width: 100%; max-width: 500px; margin: 0 auto; } .gravador { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .gravacao { width: 200px; height: 200px; background-color: #ccc; border-radius: 5px; display: flex; justify-content: center; align-items: center; } .gravacao button { width: 100px; height: 50px; border: none; background-color: #000; color: #fff; font-size: 20px; cursor: pointer; } .audio { width: 100%; height: 200px; } .musica { display: flex; justify-content: center; align-items: center; } .playlist { list-style: none; margin: 0; padding: 0; } .playlist li { width: 200px; height: 50px; background-color: #ccc; border-radius: 5px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .playlist li a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; color: #000; font-size: 20px; } .player { width: 200px; height: 50px; background-color: #ccc; border-radius: 5px; display: flex; justify-content: center; align-items: center; } .player button { width: 100px; height: 50px; border: none; background-color: #000; color: #fff; font-size: 20px; cursor: pointer;