nav{background-color:var(--color-bg-secondary);box-shadow:var(--container-shadow-heavy);width:100%;position:fixed;top:0}nav .nav-container{max-width:1000px;margin:0 auto;padding:10px}nav p{font-weight:600;font-size:1.1rem}.App{height:100%}main{padding:100px 15px 15px;display:flex;flex-direction:column;max-width:1000px;margin:0 auto;height:100%}.tip-calculator .form-group .counter button{background-color:var(--color-button-background);color:var(--color-text-primary);font-size:1.3rem;min-width:30px;width:30px;border-radius:3px;border:0;transition:opacity .1s ease;cursor:pointer}.tip-calculator .form-group .counter button:hover:not(:disabled){background-color:var(--color-button-background-hover)}footer{padding:10px 30px 30px}footer .container{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}footer .container p{margin:0;font-size:.9rem;color:var(--color-text-primary)}.footer .created-by{font-weight:600;margin-bottom:10px}footer .container .github a{color:var(--color-link);font-weight:500}.tip-calculator{background-color:var(--color-bg-secondary);box-shadow:var(--container-shadow);width:100%;display:flex;border-radius:5px}.tip-calculator .section{height:100%;display:flex;flex-direction:column;justify-content:space-evenly;gap:20px;padding:25px 15px;width:100%}.tip-calculator .section:not(:first-child){border-left:1px solid var(--color-border);overflow-x:scroll}.tip-calculator .form-group{display:flex;flex-direction:column;gap:3px}.tip-calculator .form-group label{font-weight:600;color:var(--color-text-secondary)}.tip-calculator .form-group input{border:1px solid var(--color-border);color:var(--color-text-primary);font-size:1rem;padding:3px;border-radius:3px;background-color:transparent;width:100%}.tip-calculator .form-group input::placeholder{color:var(--color-text-secondary)}.tip-calculator .form-group input.error,.tip-calculator .form-group input.error:focus-visible{border-color:var(--color-error);outline-color:var(--color-error);outline-style:solid}.tip-calculator .form-group .counter{display:flex;gap:3px;width:100%}.tip-calculator .form-group .counter button{background-color:var(--color-button-background);color:var(--color-text-primary);font-size:1.3rem;min-width:30px;width:30px;border-radius:3px;border:0;transition:opacity .1s ease}.tip-calculator .form-group .counter button:disabled{cursor:not-allowed;opacity:.25}.tip-calculator .result-container{display:flex;flex-direction:column;position:relative}.tip-calculator .result-container .header-and-result{display:flex;justify-content:space-between;gap:30px}.tip-calculator .result-container .header-and-result p{font-weight:600;font-size:1.75rem}.tip-calculator .result-container p.per-person{color:var(--color-text-secondary);position:absolute;bottom:-1.1rem}@media screen and (max-width: 500px){.tip-calculator{flex-direction:column}.tip-calculator .section:not(:first-child){border-top:1px solid var(--color-border);border-left:0}.tip-calculator label{font-size:.875rem}.tip-calculator .result-container .header-and-result p{font-weight:600;font-size:1.15rem}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--container-shadow: 0 1px 2px #00000033;--container-shadow-heavy: 2px 2px 5px #0000003e;--color-bg-primary: #f0f2f6;--color-bg-secondary: #fff;--color-border: #050c1349;--color-text-primary: #1a202c;--color-text-secondary: #718096;--color-button-background: #ddd;--color-button-background-hover: #ccc;--color-button-background-disabled: #a1a1a1;--color-error: red;--color-link: #0079d3;background-color:var(--color-bg-primary);color:var(--color-text-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}html,body,#root{height:100%}*{box-sizing:border-box;margin:0;padding:0}