App.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. :root {
  2. /* Responsive root font size: clamps between 14px and 18px based on viewport width */
  3. font-size: clamp(14px, 1vw + 12px, 18px);
  4. }
  5. :root {
  6. height: 100%;
  7. }
  8. html, body, #root {
  9. height: 100%;
  10. margin: 0;
  11. overflow: hidden; /* prevent page scrollbars */
  12. }
  13. .app {
  14. width: 100vw;
  15. height: 100vh;
  16. padding: 0; /* move padding to inner container to avoid overflow with 100vw/100vh */
  17. box-sizing: border-box;
  18. overflow: hidden;
  19. }
  20. h1 {
  21. margin-bottom: clamp(12px, 1.5vw, 20px);
  22. color: #2c3e50;
  23. font-size: clamp(1.2rem, 2vw + 0.5rem, 2rem);
  24. }
  25. .container {
  26. background: white;
  27. border-radius: 8px;
  28. padding: clamp(20px, 2vw + 10px, 32px);
  29. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  30. text-align: center;
  31. }
  32. button {
  33. margin-top: clamp(12px, 2vw, 20px);
  34. padding: clamp(8px, 1vw + 6px, 12px) clamp(14px, 2vw + 8px, 22px);
  35. font-size: clamp(0.85rem, 0.8vw + 0.6rem, 1rem);
  36. background-color: #007bff;
  37. color: white;
  38. border: none;
  39. border-radius: 6px;
  40. cursor: pointer;
  41. transition: background-color 0.3s;
  42. }
  43. button:hover {
  44. background-color: #0056b3;
  45. }
  46. button:active {
  47. transform: scale(0.98);
  48. }