@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); * { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } body { background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } .main { display: flex; justify-content: center; align-items: center; height: 100vh; } #output { margin-top: 20px; border: 1px solid #ccc; padding: 10px; width: 80%; margin-left: auto; margin-right: auto; min-height: 100px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .container { background-color: rgba(255, 255, 255, 0.5); text-align: center; padding: 20px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius: 20px; width: 400px; } .button { display: flex; justify-content: center; align-items: center; flex-direction: column; } #startButton { margin-top: 20px; padding: 20px; width: 100px; height: 100px; border-radius: 50%; cursor: pointer; background-color: rgb(159, 159, 252); } #startButton:hover { background-color: rgb(50, 50, 200); } #copyButton { margin-top: 10px; padding: 5px 10px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 4px; } #copyButton:hover { background-color: #45a049; } #clearButton { margin-top: 10px; padding: 5px 10px; cursor: pointer; background-color: #af4c4c; color: white; border: none; border-radius: 4px; } #clearButton:hover { background-color: #ac3434; }