body { margin: 0; font-family: Arial, sans-serif; background-color: #111; color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; } .container { background-color: #222; width: 300px; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center; height: 250px; position: relative; } .divider { width: 100%; height: 1px; background-color: #444; margin: 10px 0; } .container h1 { font-size: 16px; margin-bottom: 10px; font-weight: normal; } .period { font-size: 20px; color: #ffa500; margin-bottom: 5px; } .time { font-size: 14px; color: #ffa500; margin-bottom: 20px; } .result { margin-top: 10px; font-size: 16px; font-weight: bold; } .buttons { display: flex; justify-content: space-around; margin-top: 20px; } .button { width: 50px; height: 50px; background-color: #333; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); position: relative; } .button img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: transform 0.3s ease-in-out; } .button span { color: #fff; font-size: 20px; margin-top: 5px; } .button.big { background-color: rgb(233, 135, 8); } .button.small { background-color: rgb(9, 162, 233); } @keyframes bounceUpDown { 0% { transform: translateY(0); } 30% { transform: translateY(-10px); } 50% { transform: translateY(0); } 70% { transform: translateY(-10px); } 100% { transform: translateY(0); } } #cn-button img { animation: bounceUpDown 1s infinite; } .button.bounce { animation: bounceUpDown 1s ease-in-out infinite; } #loading-window { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); color: #00ff00; display: none; padding: 20px; box-sizing: border-box; text-align: center; font-size: 16px; border-radius: 10px; } #loading-text { font-size: 20px; margin-top: 10px; white-space: nowrap; } #progress { font-size: 18px; margin-top: 10px; } #get-result-button { background-color: #444; color: #fff; padding: 15px 30px; border: none; border-radius: 5px; cursor: pointer; font-size: 18px; margin-top: 20px; transition: background-color 0.3s; } #get-result-button:hover { background-color: #666; } #external-link { position: absolute; bottom: 50px; color: #ffa500; font-size: 20px; text-decoration: none; } #top-image { position: absolute; top: 20px; left: 40%; transform: translateX(-50); width: 90px; height: 90px; border-radius:50%; }