| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- :root {
- /* Responsive root font size: clamps between 14px and 18px based on viewport width */
- font-size: clamp(14px, 1vw + 12px, 18px);
- }
- :root {
- height: 100%;
- }
- html, body, #root {
- height: 100%;
- margin: 0;
- overflow: hidden; /* prevent page scrollbars */
- }
- .app {
- width: 100vw;
- height: 100vh;
- padding: 0; /* move padding to inner container to avoid overflow with 100vw/100vh */
- box-sizing: border-box;
- overflow: hidden;
- }
- h1 {
- margin-bottom: clamp(12px, 1.5vw, 20px);
- color: #2c3e50;
- font-size: clamp(1.2rem, 2vw + 0.5rem, 2rem);
- }
- .container {
- background: white;
- border-radius: 8px;
- padding: clamp(20px, 2vw + 10px, 32px);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- text-align: center;
- }
- button {
- margin-top: clamp(12px, 2vw, 20px);
- padding: clamp(8px, 1vw + 6px, 12px) clamp(14px, 2vw + 8px, 22px);
- font-size: clamp(0.85rem, 0.8vw + 0.6rem, 1rem);
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 6px;
- cursor: pointer;
- transition: background-color 0.3s;
- }
- button:hover {
- background-color: #0056b3;
- }
- button:active {
- transform: scale(0.98);
- }
|