diff --git a/dependencies/style.css b/dependencies/style.css index 9771e65..023d94c 100644 --- a/dependencies/style.css +++ b/dependencies/style.css @@ -1,144 +1,259 @@ +/* + * Base Styling and Typography + * Using REM for better accessibility and scalability. + */ html { - font-family: Tahoma, Geneva, sans-serif; + /* Standard modern sans-serif stack */ + font-family: Tahoma, Geneva, sans-serif; + /* Define base size for REM units */ + font-size: 16px; } +/* Headings: Central alignment and spacing */ h1, h2 { - display: block; - text-align: center; - margin: auto; + /* Block-level centering by setting display and margin: auto */ + display: block; + text-align: center; + margin-inline: auto; /* Use logical properties for cleaner code */ } h2 { - margin: 40px auto 20px auto; + /* Scaled margins using REM (approx 40px, 20px) */ + margin: 2.5rem auto 1.25rem auto; } h4 { - font-size: 24px; - margin: 0px; - word-break: break-all; + /* Use REM for font size, ensure proper hierarchy (this is a stylistic choice) */ + font-size: 1.5rem; /* 24px */ + margin: 0; + /* Ensure long text doesn't overflow its container */ + word-break: break-all; } +/* Form Elements: Inputs, Buttons, and Selects */ select, button { - font-size: 24px; - margin: auto; - display: block; + /* Scaled font size */ + font-size: 1.5rem; /* 24px */ + margin: 0.5rem auto; /* Added margin for consistency */ + display: block; } p { - margin: 14px 0px; + /* Scaled margin (approx 14px) */ + margin: 0.875rem 0; } label { - font-weight: bold; + font-weight: bold; } +/* Label and Span: Inline-block for dimension control */ label, span { - display: inline-block; - margin: 6px 0px; - word-break: break-all; + display: inline-block; + /* Scaled margin (approx 6px) */ + margin: 0.375rem 0; + word-break: break-all; } input[type="text"] { - min-width: 100%; - font-size: 18px; + /* Set width to 100% for full container occupancy */ + width: 100%; + /* Scaled font size */ + font-size: 1.125rem; /* 18px */ + /* Add padding/box-sizing if necessary, but omitted here to respect original intent */ } input[type="submit"] { - display: block; - margin: 20px auto 0px auto; - font-size: 18px; + display: block; + /* Scaled margin (approx 20px) */ + margin: 1.25rem auto 0 auto; + font-size: 1.125rem; /* 18px */ } +/* Card Component: Container for form/info */ .card { - max-width: 425px; - font-size: 18px; - border: 1px solid #CCCCCC; - border-radius: 8px; - padding: 30px; - margin: 10px auto; - box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); + max-width: 425px; + font-size: 1.125rem; /* 18px */ + border: 1px solid #CCCCCC; + border-radius: 0.5rem; /* 8px */ + padding: 1.875rem; /* 30px */ + /* Scaled margin (approx 10px) */ + margin: 0.625rem auto; + /* Use CSS variables for color opacity if possible (optional refinement) */ + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } +/* Utility Classes */ .hidden { - display: none; + display: none; } .warning { - font-size: 50px; - margin: 10px 0px; - text-align: center; + /* Very large font size for attention */ + font-size: 3.125rem; /* 50px */ + margin: 0.625rem 0; + text-align: center; } +/* Loader Container and Animation */ .loader-container { - width: 100%; - height: 80px; + width: 100%; + height: 5rem; /* 80px, using REM for consistency */ } .loader { - margin: 50px auto; - font-size: 15px; - width: 1em; - height: 1em; - border-radius: 50%; - position: relative; - text-indent: -9999em; - -webkit-animation: load5 1.1s infinite ease; - animation: load5 1.1s infinite ease; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); -} -@-webkit-keyframes load5 { - 0%, - 100% { - box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7); - } - 12.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5); - } - 25% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 37.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 50% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 62.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 75% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 87.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000; - } + /* Adjusted margin to be more sensible relative to container height */ + margin: 1rem auto; + font-size: 0.9375rem; /* 15px base size */ + width: 1em; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + + /* Use standard keyframes for modern browser compatibility */ + animation: load5 1.1s infinite ease; + + /* Keep transforms for optimization, using standard properties */ + transform: translateZ(0); + + /* Vendor prefixes should be handled by a build tool (e.g., PostCSS), + but we keep the '-webkit-' prefix here for older Safari/Chrome support + to respect the original intent. */ + -webkit-animation: load5 1.1s infinite ease; + -webkit-transform: translateZ(0); } + +/* Keyframes definition */ @keyframes load5 { - 0%, - 100% { - box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7); - } - 12.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5); - } - 25% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 37.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 50% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 62.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 75% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); - } - 87.5% { - box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000; - } + /* Use a simple color variable if available, otherwise pure black/opacity is okay */ + /* Using 1.75em for consistency instead of original 1.75em for 37.5/62.5% step */ + $shadows: ( + -2.6em 0em 0em 0em, + 1.8em -1.8em 0 0em, + 2.5em 0em 0 0em, + 1.75em 1.75em 0 0em, + 0em 2.5em 0 0em, + -1.8em 1.8em 0 0em, + -2.6em 0em 0 0em, + -1.8em -1.8em 0 0em + ); + + /* A simplified way to represent the complex box-shadow rotation: */ + 0%, 100% { + box-shadow: + 0em -2.6em 0em 0em #000000, + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.5), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.7); + } + 12.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.7), + 1.8em -1.8em 0 0em #000000, + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.5); + } + 25% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.5), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), + 2.5em 0em 0 0em #000000, + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 37.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), + 2.5em 0em 0 0em rgba(0,0,0, 0.7), + 1.75em 1.75em 0 0em #000000, + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 50% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.5), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), + 0em 2.5em 0 0em #000000, + -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 62.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), + 0em 2.5em 0 0em rgba(0,0,0, 0.7), + -1.8em 1.8em 0 0em #000000, + -2.6em 0em 0 0em rgba(0,0,0, 0.2), + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 75% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.5), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), + -2.6em 0em 0 0em #000000, + -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 87.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(0,0,0, 0.2), + 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), + 2.5em 0em 0 0em rgba(0,0,0, 0.2), + 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), + 0em 2.5em 0 0em rgba(0,0,0, 0.2), + -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), + -2.6em 0em 0 0em rgba(0,0,0, 0.7), + -1.8em -1.8em 0 0em #000000; + } +} +/* Retain -webkit- prefix keyframes for maximum legacy browser support */ +@-webkit-keyframes load5 { + /* Copy the keyframes logic from the standard @keyframes load5 above */ + 0%, 100% { + box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7); + } + 12.5% { + box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5); + } + 25% { + box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 37.5% { + box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 50% { + box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 62.5% { + box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 75% { + box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2); + } + 87.5% { + box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000; + } }