* { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; } .container { max-width: 100%; margin: 0; padding: 1rem; border: 3px solid black; } @media (min-width: 600px) { .container { max-width: 600px; margin: 2rem auto; padding: 2rem; } } .input-group { margin-bottom: 2rem; border: 2px solid black; padding: 1rem; } .input-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.05em; } .input-group input { width: 100%; padding: 0.75rem; font-size: 16px; border: 2px solid black; background: white; -webkit-appearance: none; -moz-appearance: textfield; } .input-group input:focus { outline: none; border-width: 3px; } .results { margin-top: 2rem; padding: 1.5rem; border: 2px solid black; background-color: white; } .errors { margin: 1rem 0; padding: 1rem; border: 2px solid black; background-color: white; } .errors p { color: black; font-size: 0.9rem; margin: 0.5rem 0; font-weight: normal; } h1 { color: black; margin-bottom: 2rem; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 3px solid black; padding-bottom: 0.5rem; } h2 { color: black; font-size: 1.2rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid black; padding-bottom: 0.5rem; } p { margin: 1rem 0; font-size: 1.1rem; font-weight: 500; display: flex; justify-content: space-between; align-items: baseline; } p span { font-weight: normal; } p strong { min-width: 120px; text-align: right; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }