:root { --primary: #fff; --accent: #fff; --bg-color: #0b132b; } body { color: white; text-align: center; font-family: 'Russo One', sans-serif; margin: 0; padding: 0; min-height: 100vh; background: linear-gradient(180deg, #d77a1d 0%, #0b132b 80%); background-attachment: fixed; } .header { padding: 25px 10px; } .logo { max-width: 130px; filter: drop-shadow(0 0 8px var(--primary)); } .card-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 15px; max-width: 450px; margin: auto; } .card, .selected-img-wrapper { border-radius: 10px; cursor: pointer; line-height: 0; padding: 4px; display: inline-block; } .card img, .selected-img-wrapper img { width: 100%; border-radius: 7px; display: block; } .page3 { display: none; padding: 15px; } .gen-bar { width: 100%; max-width: 420px; margin: auto; padding: 25px 15px; box-sizing: border-box; } .instruction-text { text-align: center; margin-bottom: 25px; } .instruction-text b { color: #fff; font-size: 22px; display: block; margin-bottom: 10px; } .instruction-text p { color: #fff; font-size: 16px; font-weight: bold; font-family: 'Fredoka', sans-serif; text-align: left; line-height:1.9; } .Pro-bg { width: 100%; height: 10px; background: rgba(0,0,0,0.3); border-radius: 10px; margin: 15px 0; overflow: hidden; } .pro-bar { height: 100%; background: linear-gradient(90deg, var(--accent), #ff9800); width: 0%; } #offerContainer { width: 100%; margin: 15px 0; } .offer-link { display: flex; align-items: center; gap: 15px; padding: 18px; border-radius: 12px; text-decoration: none; width: 100%; box-sizing: border-box; box-shadow: 0 8px 20px rgba(0,0,0,0.3); background: linear-gradient(0deg,#0066cc,#0066cc 45%,#0066cc 75%,#0066cc 100%); display:flex; padding: 10px 18px; border-radius: 10px; position: relative; box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.4), 0 0 7px rgba(255, 255, 255, 0.4); animation: glow-rotate 3s linear infinite; cursor: pointer; transition: transform 0.2s; } .offer-title { color: #fff; font-size: 16px; font-weight: bold; font-family: 'Fredoka', sans-serif; text-align: left; } .code-display { background: rgba(0,0,0,0.4); padding: 12px 5px; font-size: 18px; color: var(--primary); border: 1px dashed var(--primary); border-radius: 8px; letter-spacing: 3px; margin-top: 10px; white-space: nowrap; overflow: hidden; display: block; } .copy-btn { background: linear-gradient(#38dafe); color: #000; border: none; padding: 16px; border-radius: 10px; margin-top: 20px; cursor: pointer; font-weight: bold; font-family: 'Russo One'; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; } #error-msg { color: #fff; font-size: 13px; margin-top: 15px; font-family: 'Fredoka'; display: none; background: rgba(255, 77, 77, 0.8); padding: 10px; border-radius: 8px; } #verify-bg { display: none; } .victor { color: #fff; font-size: 17px; display: block; margin-bottom: 10px; text-shadow: 0px 2px 4px rgba(0,0,0,0.2); }