{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1, h2 { text-align: center; color: #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.8rem; opacity: 0.7; margin-top: 40px; text-align: center; } @media (max-width: 600px) { .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1, h2 { text-align: center; color: #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } @media (max-width: 600px) { .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1, h2 { text-align: center; color: #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } @media (max-width: 600px) { .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1 { text-align: center; color: #ff2d55; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(255, 45, 85, 0.7), 0 0 30px rgba(255, 45, 85, 0.5); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .subtitle { text-align: center; font-size: 1.3rem; font-weight: bold; color: #ffd700; margin: 0 0 30px 0; background: rgba(255, 215, 0, 0.2); padding: 12px; border-radius: 8px; border: 2px solid #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1.1rem; } .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1 { text-align: center; color: #ff2d55; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(255, 45, 85, 0.7), 0 0 30px rgba(255, 45, 85, 0.5); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .subtitle { text-align: center; font-size: 1.3rem; font-weight: bold; color: #ffd700; margin: 0 0 30px 0; background: rgba(255, 215, 0, 0.2); padding: 12px; border-radius: 8px; border: 2px solid #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } .yearly-table .full-row { background: rgba(0, 255, 157, 0.2); font-weight: bold; color: #00ff9d; } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1.1rem; } .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1 { text-align: center; color: #ff2d55; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(255, 45, 85, 0.7), 0 0 30px rgba(255, 45, 85, 0.5); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .subtitle { text-align: center; font-size: 1.3rem; font-weight: bold; color: #ffd700; margin: 0 0 30px 0; background: rgba(255, 215, 0, 0.2); padding: 12px; border-radius: 8px; border: 2px solid #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } input:disabled { background: #444; color: #aaa; cursor: not-allowed; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } .yearly-table .full-row { background: rgba(0, 255, 157, 0.2); font-weight: bold; color: #00ff9d; } .unranked-cap { background: rgba(255, 107, 107, 0.2); font-weight: bold; color: #ff6b6b; } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1.1rem; } .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1 { text-align: center; color: #ffffff; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); animation: glow 2s infinite; } @keyframes glow { 0%, 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); } 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.7); } } .subtitle { text-align: center; font-size: 1.3rem; font-weight: bold; color: #ffd700; margin: 0 0 30px 0; background: rgba(255, 215, 0, 0.2); padding: 12px; border-radius: 8px; border: 2px solid #ffd700; } .zig-quote { text-align: center; font-style: italic; font-size: 1.4rem; color: #00ff9d; margin: 30px 0; padding: 15px; background: rgba(0, 255, 157, 0.1); border-left: 5px solid #00ff9d; border-radius: 8px; } .zig-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: bold; color: #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } input:disabled { background: #444; color: #aaa; cursor: not-allowed; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } .yearly-table .full-row { background: rgba(0, 255, 157, 0.2); font-weight: bold; color: #00ff9d; } .unranked-cap { background: rgba(255, 107, 107, 0.2); font-weight: bold; color: #ff6b6b; } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1.1rem; } .zig-quote { font-size: 1.2rem; } .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1 { text-align: center; color: #ffffff; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); animation: glow 2s infinite; } @keyframes glow { 0%, 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); } 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.7); } } .subtitle { text-align: center; font-size: 1.3rem; font-weight: bold; color: #ffd700; margin: 0 0 30px 0; background: rgba(255, 215, 0, 0.2); padding: 12px; border-radius: 8px; border: 2px solid #ffd700; } .zig-quote { text-align: center; font-style: italic; font-size: 1.4rem; color: #00ff9d; margin: 30px 0; padding: 15px; background: rgba(0, 255, 157, 0.1); border-left: 5px solid #00ff9d; border-radius: 8px; } .zig-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: bold; color: #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } input:disabled { background: #444; color: #aaa; cursor: not-allowed; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } .yearly-table .full-row { background: rgba(0, 255, 157, 0.2); font-weight: bold; color: #00ff9d; } .unranked-cap { background: rgba(255, 107, 107, 0.2); font-weight: bold; color: #ff6b6b; } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1.1rem; } .zig-quote { font-size: 1.2rem; } .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1 { text-align: center; color: #ffffff; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); animation: glow 2s infinite; } @keyframes glow { 0%, 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); } 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.7); } } .subtitle { text-align: center; font-size: 1.3rem; font-weight: bold; color: #ffd700; margin: 0 0 30px 0; background: rgba(255, 215, 0, 0.2); padding: 12px; border-radius: 8px; border: 2px solid #ffd700; } .zig-quote { text-align: center; font-style: italic; font-size: 1.4rem; color: #00ff9d; margin: 30px 0; padding: 15px; background: rgba(0, 255, 157, 0.1); border-left: 5px solid #00ff9d; border-radius: 8px; } .zig-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: bold; color: #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } input:disabled { background: #444; color: #aaa; cursor: not-allowed; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } .yearly-table .full-row { background: rgba(0, 255, 157, 0.2); font-weight: bold; color: #00ff9d; } .unranked-cap { background: rgba(255, 107, 107, 0.2); font-weight: bold; color: #ff6b6b; } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1.1rem; } .zig-quote { font-size: 1.2rem; } .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1 { text-align: center; color: #ffffff; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); animation: glow 2s infinite; } @keyframes glow { 0%, 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); } 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.7); } } .subtitle { text-align: center; font-size: 1.3rem; font-weight: bold; color: #ffd700; margin: 0 0 30px 0; background: rgba(255, 215, 0, 0.2); padding: 12px; border-radius: 8px; border: 2px solid #ffd700; } .zig-quote { text-align: center; font-style: italic; font-size: 1.4rem; color: #00ff9d; margin: 30px 0; padding: 15px; background: rgba(0, 255, 157, 0.1); border-left: 5px solid #00ff9d; border-radius: 8px; } .zig-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: bold; color: #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } input:disabled { background: #444; color: #aaa; cursor: not-allowed; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } .yearly-table .full-row { background: rgba(0, 255, 157, 0.2); font-weight: bold; color: #00ff9d; } .unranked-cap { background: rgba(255, 107, 107, 0.2); font-weight: bold; color: #ff6b6b; } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1.1rem; } .zig-quote { font-size: 1.2rem; } .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1 { text-align: center; color: #ffffff; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); animation: glow 2s infinite; } @keyframes glow { 0%, 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); } 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.7); } } .subtitle { text-align: center; font-size: 1.3rem; font-weight: bold; color: #ffd700; margin: 0 0 30px 0; background: rgba(255, 215, 0, 0.2); padding: 12px; border-radius: 8px; border: 2px solid #ffd700; } .zig-quote { text-align: center; font-style: italic; font-size: 1.4rem; color: #00ff9d; margin: 30px 0; padding: 15px; background: rgba(0, 255, 157, 0.1); border-left: 5px solid #00ff9d; border-radius: 8px; } .zig-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: bold; color: #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; align-items: flex-start; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } input:disabled { background: #444; color: #aaa; cursor: not-allowed; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .path-disclaimer { font-size: 0.8rem; color: #ffcc00; font-style: italic; text-align: center; margin: 10px 0 20px; padding: 8px; background: rgba(255, 204, 0, 0.1); border-radius: 6px; max-width: 800px; margin-left: auto; margin-right: auto; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } .yearly-table .full-row { background: rgba(0, 255, 157, 0.2); font-weight: bold; color: #00ff9d; } .unranked-cap { background: rgba(255, 107, 107, 0.2); font-weight: bold; color: #ff6b6b; } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1.1rem; } .zig-quote { font-size: 1.2rem; } .stats-bar { flex-direction: column; align-items: center; } .stat { margin: 10px 0; } .path-disclaimer { font-size: 0.7rem; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #f0f4f8; margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: auto; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } h1 { text-align: center; color: #ffffff; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 10px 0; text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); animation: glow 2s infinite; } @keyframes glow { 0%, 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5); } 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.7); } } .subtitle { text-align: center; font-size: 1.3rem; font-weight: bold; color: #ffd700; margin: 0 0 30px 0; background: rgba(255, 215, 0, 0.2); padding: 12px; border-radius: 8px; border: 2px solid #ffd700; } .zig-quote { text-align: center; font-style: italic; font-size: 1.4rem; color: #00ff9d; margin: 30px 0; padding: 15px; background: rgba(0, 255, 157, 0.1); border-left: 5px solid #00ff9d; border-radius: 8px; } .zig-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: bold; color: #ffd700; } .question { font-size: 1.8rem; font-weight: bold; text-align: center; margin: 30px 0; color: #ffcc00; } /* STICKY INCOME BAR */ .stats-bar { display: flex; justify-content: space-around; background: rgba(0,0,0,0.5); padding: 15px; border-radius: 10px; margin-bottom: 30px; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.1); } .stats-bar.scrolled { border-radius: 0 0 10px 10px; margin-top: -10px; padding-top: 10px; } .stat { text-align: center; min-width: 180px; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #00ff9d; } .input-group { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; align-items: flex-start; } label { display: flex; flex-direction: column; font-weight: 600; } input, select { padding: 10px; border: none; border-radius: 6px; margin-top: 5px; font-size: 1rem; } input:disabled { background: #444; color: #aaa; cursor: not-allowed; } button { background: #ff6b6b; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; transition: 0.3s; margin: 20px auto; display: block; } button:hover { background: #ff4757; transform: scale(1.05); } .result { margin-top: 30px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 10px; font-size: 1.2rem; text-align: center; min-height: 60px; } .path-disclaimer { font-size: 0.8rem; color: #ffcc00; font-style: italic; text-align: center; margin: 10px 0 20px; padding: 8px; background: rgba(255, 204, 0, 0.1); border-radius: 6px; max-width: 800px; margin-left: auto; margin-right: auto; } .disclaimer { font-size: 0.9rem; opacity: 0.9; margin-top: 40px; text-align: center; background: rgba(255, 215, 0, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid #ffd700; } .disclaimer strong { color: #ffd700; } .yearly-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; } .yearly-table th, .yearly-table td { padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1); } .yearly-table th { background: rgba(255,215,0,0.2); color: #ffd700; text-align: center; } .yearly-table tr:hover { background: rgba(255,215,0,0.1); } .yearly-table .full-row { background: rgba(0, 255, 157, 0.2); font-weight: bold; color: #00ff9d; } .unranked-cap { background: rgba(255, 107, 107, 0.2); font-weight: bold; color: #ff6b6b; } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1.1rem; } .zig-quote { font-size: 1.2rem; } .stats-bar { flex-direction: column; align-items: center; padding: 12px; } .stat { margin: 8px 0; min-width: auto; } .stat-value { font-size: 1.5rem; } .path-disclaimer { font-size: 0.7rem; } .yearly-table { font-size: 0.9rem; } .yearly-table th, .yearly-table td { padding: 8px; } } :root { --lg-green: #1fb46b; --lg-dark: #18a058; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; --gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #f0f9f5, #ffffff); color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } /* HEADER */ header { text-align: center; padding: 2.5rem 1rem; background: white; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); margin-bottom: 0.5rem; } .subtitle { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto 1rem; } /* CALC CARD */ .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } /* INPUT */ .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark); } input[type="number"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto; transition: border 0.3s; } input[type="number"]:focus { border-color: var(--lg-green); outline: none; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } /* RADIO */ .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option { text-align: center; } .radio-option input { display: none; } .radio-option label { display: block; padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } /* RESULTS */ .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } /* BUTTON */ .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); transition: all 0.3s; } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } /* FOOTER */ footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .title { font-size: 2.2rem; } input[type="number"] { font-size: 1.1rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } } :root { --lg-green: #1fb46b; --lg-dark: #18a058; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; --gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #f0f9f5, #ffffff); color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } /* HEADER */ header { text-align: center; padding: 2.5rem 1rem; background: white; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); margin-bottom: 0.5rem; } .subtitle { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto 1rem; } /* CALC CARD */ .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } /* INPUT */ .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark); } input[type="number"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto; transition: border 0.3s; } input[type="number"]:focus { border-color: var(--lg-green); outline: none; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } /* RADIO */ .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option { text-align: center; } .radio-option input { display: none; } .radio-option label { display: block; padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } /* RESULTS */ .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } /* BUTTON */ .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); transition: all 0.3s; } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } /* FOOTER */ footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .title { font-size: 2.2rem; } input[type="number"] { font-size: 1.1rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } } :root { --lg-green: #1fb46b; --lg-dark: #18a058; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; --gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #f0f9f5, #ffffff); color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } /* HEADER */ header { text-align: center; padding: 2.5rem 1rem; background: white; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); margin-bottom: 0.5rem; } .subtitle { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto 1rem; } /* CALC CARD */ .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } /* INPUT */ .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark); } input[type="number"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto; transition: border 0.3s; } input[type="number"]:focus { border-color: var(--lg-green); outline: none; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } /* RADIO */ .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option { text-align: center; } .radio-option input { display: none; } .radio-option label { display: block; padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } /* CHECKBOX */ .checkbox-group { text-align: center; margin: 1.5rem 0; } .checkbox-option { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--dark); } .checkbox-option input { cursor: pointer; } /* RESULTS */ .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } /* TABLE */ .growth-table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .growth-table th, .growth-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #eee; } .growth-table th { background: var(--lg-green); color: white; font-weight: 700; } .growth-table tr:hover { background: #f8f9fa; } /* BUTTON */ .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); transition: all 0.3s; } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } /* DISCLAIMER */ .disclaimer { background: #fff8e1; padding: 2rem; border-radius: 16px; margin: 2rem 0; font-size: 0.9rem; line-height: 1.6; color: #555; border-left: 6px solid var(--gold); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } /* FOOTER */ footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .title { font-size: 2.2rem; } input[type="number"] { font-size: 1.1rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } } :root { --lg-green: #1fb46b; --lg-dark: #18a058; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; --gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #f0f9f5, #ffffff); color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } /* HEADER */ header { text-align: center; padding: 2.5rem 1rem; background: white; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); margin-bottom: 0.5rem; } .subtitle { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto 1rem; } /* CALC CARD */ .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } /* INPUT */ .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark); } input[type="number"], input[type="range"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto 0.5rem; transition: border 0.3s; } input[type="number"]:focus, input[type="range"]:focus { border-color: var(--lg-green); outline: none; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } .slider-label { font-size: 1rem; color: #555; } /* RADIO */ .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option { text-align: center; } .radio-option input { display: none; } .radio-option label { display: block; padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } /* RESULTS */ .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } /* TABLE */ .growth-table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .growth-table th, .growth-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #eee; } .growth-table th { background: var(--lg-green); color: white; font-weight: 700; } .growth-table tr:hover { background: #f8f9fa; } /* BUTTON */ .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); transition: all 0.3s; } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } /* DISCLAIMER */ .disclaimer { background: #fff8e1; padding: 2rem; border-radius: 16px; margin: 2rem 0; font-size: 0.9rem; line-height: 1.6; color: #555; border-left: 6px solid var(--gold); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } /* FOOTER */ footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .title { font-size: 2.2rem; } input[type="number"] { font-size: 1.1rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } } :root { --lg-green: #1fb46b; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: #f5f7fa; color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } header { text-align: center; padding: 2rem; background: white; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); margin-bottom: 1.5rem; } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); } .subtitle { font-size: 1.1rem; color: #555; } .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; } input[type="number"], input[type="range"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto 0.5rem; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option input { display: none; } .radio-option label { padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } .slider-label { font-size: 1rem; color: #555; } .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } .growth-table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .growth-table th, .growth-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #eee; } .growth-table th { background: var(--lg-green); color: white; font-weight: 700; } .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } .disclaimer { background: #fff8e1; padding: 2rem; border-radius: 16px; margin: 2rem 0; font-size: 0.9rem; line-height: 1.6; color: #555; border-left: 6px solid var(--gold); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .title { font-size: 2.2rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } } :root { --lg-green: #1fb46b; --lg-dark: #18a058; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; --gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #f0f9f5, #ffffff); color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } /* HEADER */ header { text-align: center; padding: 2.5rem 1rem; background: white; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); margin-bottom: 0.5rem; } .subtitle { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto 1rem; } /* CALC CARD */ .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } /* INPUT */ .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark); } input[type="number"], input[type="range"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto 0.5rem; transition: border 0.3s; } input[type="number"]:focus, input[type="range"]:focus { border-color: var(--lg-green); outline: none; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } .slider-label { font-size: 1rem; color: #555; } /* RADIO */ .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option { text-align: center; } .radio-option input { display: none; } .radio-option label { display: block; padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } /* RESULTS */ .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } /* TABLE */ .growth-table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .growth-table th, .growth-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #eee; } .growth-table th { background: var(--lg-green); color: white; font-weight: 700; } .growth-table tr:hover { background: #f8f9fa; } /* BUTTON */ .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); transition: all 0.3s; } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } /* DISCLAIMER */ .disclaimer { background: #fff8e1; padding: 2rem; border-radius: 16px; margin: 2rem 0; font-size: 0.9rem; line-height: 1.6; color: #555; border-left: 6px solid var(--gold); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } /* FOOTER */ footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .title { font-size: 2.2rem; } input[type="number"] { font-size: 1.1rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } } :root { --lg-green: #1fb46b; --lg-dark: #18a058; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; --gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #f0f9f5, #ffffff); color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } /* HEADER */ header { text-align: center; padding: 2.5rem 1rem; background: white; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); margin-bottom: 0.5rem; } .subtitle { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto 1rem; } /* CALC CARD */ .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } /* INPUT */ .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark); } input[type="number"], input[type="range"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto 0.5rem; transition: border 0.3s; } input[type="number"]:focus, input[type="range"]:focus { border-color: var(--lg-green); outline: none; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } .slider-label { font-size: 1rem; color: #555; } /* RADIO */ .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option { text-align: center; } .radio-option input { display: none; } .radio-option label { display: block; padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } /* RESULTS */ .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } /* TABLE */ .growth-table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .growth-table th, .growth-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #eee; } .growth-table th { background: var(--lg-green); color: white; font-weight: 700; } .growth-table tr:hover { background: #f8f9fa; } /* BUTTON */ .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); transition: all 0.3s; } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } /* DISCLAIMER */ .disclaimer { background: #fff8e1; padding: 2rem; border-radius: 16px; margin: 2rem 0; font-size: 0.9rem; line-height: 1.6; color: #555; border-left: 6px solid var(--gold); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } /* FOOTER */ footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .title { font-size: 2.2rem; } input[type="number"] { font-size: 1.1rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } } :root { --lg-green: #1fb46b; --lg-dark: #18a058; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; --gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: #f5f7fa; color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } header { text-align: center; padding: 2rem; background: white; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); margin-bottom: 1.5rem; } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); } .subtitle { font-size: 1.1rem; color: #555; } .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; } input[type="number"], input[type="range"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto 0.5rem; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } .slider-label { font-size: 1rem; color: #555; } /* SLIDERS IN COLUMNS */ .sliders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; } .slider-card { background: var(--light); padding: 1.5rem; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .slider-card p { font-size: 0.95rem; color: #555; margin-top: 0.5rem; line-height: 1.5; } .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option input { display: none; } .radio-option label { padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } .growth-table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .growth-table th, .growth-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #eee; } .growth-table th { background: var(--lg-green); color: white; font-weight: 700; } .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } .disclaimer { background: #fff8e1; padding: 2rem; border-radius: 16px; margin: 2rem 0; font-size: 0.9rem; line-height: 1.6; color: #555; border-left: 6px solid var(--gold); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .sliders-grid { grid-template-columns: 1fr; } .title { font-size: 2.2rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } } :root { --lg-green: #1fb46b; --lg-dark: #18a058; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; --gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #f0f9f5, #ffffff); color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } /* HEADER */ header { text-align: center; padding: 2.5rem 1rem; background: white; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); margin-bottom: 0.5rem; } .subtitle { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto 1rem; } /* CALC CARD */ .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } /* INPUT */ .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark); } input[type="number"], input[type="range"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto 0.5rem; transition: border 0.3s; } input[type="number"]:focus, input[type="range"]:focus { border-color: var(--lg-green); outline: none; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } .slider-label { font-size: 1rem; color: #555; } /* SLIDERS IN COLUMNS */ .sliders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; } .slider-card { background: var(--light); padding: 1.5rem; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .slider-card p { font-size: 0.95rem; color: #555; margin-top: 0.5rem; line-height: 1.5; } /* RADIO */ .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option { text-align: center; } .radio-option input { display: none; } .radio-option label { display: block; padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } /* RESULTS */ .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } /* TABLE */ .growth-table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .growth-table th, .growth-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #eee; } .growth-table th { background: var(--lg-green); color: white; font-weight: 700; } .growth-table tr:hover { background: #f8f9fa; } /* BUTTON */ .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); transition: all 0.3s; } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } /* DISCLAIMER */ .disclaimer { background: #fff8e1; padding: 2rem; border-radius: 16px; margin: 2rem 0; font-size: 0.9rem; line-height: 1.6; color: #555; border-left: 6px solid var(--gold); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } /* FOOTER */ footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .sliders-grid { grid-template-columns: 1fr; } .title { font-size: 2.2rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } } :root { --lg-green: #1fb46b; --lg-dark: #18a058; --gold: #d4af37; --dark: #1a1a1a; --light: #f8f9fa; --gray: #e9ecef; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #f0f9f5, #ffffff); color: var(--dark); padding: 1rem; } .container { max-width: 900px; margin: auto; } header { text-align: center; padding: 2.5rem 1rem; background: white; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; color: var(--lg-green); margin-bottom: 0.5rem; } .subtitle { font-size: 1.1rem; color: #555; } .calc-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 2rem; } .quote { font-style: italic; color: #777; text-align: center; margin: 1.5rem 0; font-size: 1.1rem; } .input-group { margin: 1.5rem 0; text-align: center; } label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark); } input[type="number"], input[type="range"] { width: 100%; max-width: 300px; padding: 1rem; font-size: 1.3rem; text-align: center; border: 2px solid #ddd; border-radius: 12px; margin: 0 auto 0.5rem; } input:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; } .slider-label { font-size: 1rem; color: #555; } .radio-group { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; } .radio-option input { display: none; } .radio-option label { padding: 1rem 1.5rem; background: #f0f0f0; border-radius: 12px; cursor: pointer; font-weight: 600; } .radio-option input:checked + label { background: var(--lg-green); color: white; } .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; } .result-card { background: var(--light); padding: 1.5rem; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .result-card h3 { font-size: 0.9rem; color: #777; margin-bottom: 0.5rem; } .result-card .value { font-size: 2rem; font-weight: 700; color: var(--lg-green); } .growth-table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .growth-table th, .growth-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #eee; } .growth-table th { background: var(--lg-green); color: white; font-weight: 700; } .calc-btn { display: block; margin: 2rem auto; background: var(--gold); color: var(--dark); padding: 1rem 3rem; font-size: 1.3rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); } .calc-btn:hover { background: #e6c44a; transform: translateY(-3px); } .disclaimer { background: #fff8e1; padding: 2rem; border-radius: 16px; margin: 2rem 0; font-size: 0.9rem; line-height: 1.6; color: #555; border-left: 6px solid var(--gold); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } footer { text-align: center; margin-top: 3rem; color: #666; font-size: 0.9rem; } footer a { color: var(--lg-green); font-weight: 600; } @media (max-width: 768px) { .title { font-size: 2.2rem; } .calc-btn { font-size: 1.1rem; padding: 0.9rem 2rem; } }