body {  -webkit-user-select: none; 
      -moz-user-select: none;    
      -ms-user-select: none;    
      user-select: none;       
font-family: Arial, sans-serif; margin: 0; overflow: hidden; background-color: black; display: flex; justify-content: center; align-items: center; height: 100vh; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .container { color: white; background-color: rgba(0, 0, 0, 0.0); backdrop-filter: blur(10px); padding: 20px; border-radius: 10px; text-align: center; width: 70%; max-width: 350px; box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.1); border: 2px solid lime; animation: glowing 1.5s infinite alternate; display: flex; flex-direction: column; align-items: center; z-index: 1; height: 380px; } @keyframes glowing { 0% { box-shadow: 0 0 5px lime; } 100% { box-shadow: 0 0 15px lime; } } input { width: 80%; padding: 12px; border: none; border-radius: 5px; font-size: 16px; text-align: center; background-color: #333; color: white; outline: none; margin-top: 10px; font-weight: bold; text-shadow: 0 0 8px white; } button { background-color: #3498db; color: white; border: none; padding: 12px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; margin-top: 15px; transition: 0.3s ease; animation: button-glow 1.5s infinite alternate; font-weight: bold; text-shadow: 0 0 8px white; } @keyframes button-glow { 0% { box-shadow: 0 0 5px #00ffcc; } 100% { box-shadow: 0 0 15px #00ffcc; } } button:hover { background-color: #2980b9; } .result h4, .result span { font-size: 18px; font-weight: bold; text-shadow: 0 0 8px white; } .big { font-weight: bold; } .light-red { color: #ff6666; font-weight: bold; text-shadow: 0 0 8px #ff6666; } .light-green { color: #66ff66; font-weight: bold; text-shadow: 0 0 8px #66ff66; } .red-violet { background: linear-gradient(to right, red 50%, violet 50%); -webkit-background-clip: text; color: transparent; font-weight: bold; text-shadow: 0 0 8px violet; } .green-violet { background: linear-gradient(to right, green 50%, violet 50%); -webkit-background-clip: text; color: transparent; font-weight: bold; text-shadow: 0 0 8px green; } .icon { font-size: 20px; color: lime; animation: bounce 1.2s infinite ease-in-out; padding: 8px; font-weight: bold; text-shadow: 0 0 8px lime; } @keyframes bounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } } h3 { color: red; font-weight: bold; text-shadow: 0 0 8px red; } .result { margin-top: 20px; font-size: 18px; display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .result h4 { margin: 30px 0; text-align: left; color: red; font-size: 18px; font-weight: bold; text-shadow: 0 0 8px red; } .ruslt-container { display: flex; align-items: center; gap: 10px; justify-content: flex-start; } #numberValue { font-weight: bold; font-size: 28px; text-shadow: 0 0 0px red; } #periodValue { font-weight: bold; font-size: 20px; text-shadow: 0 0 0px green; } #rusltValue { font-weight: bold; font-size: 20px; text-shadow: 0 0 0px red; }