| /* Shared styles */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .clock-container { | |
| max-width: 600px; | |
| width: 100%; | |
| border: 1px solid rgba(109, 40, 217, 0.3); | |
| } | |
| .clock-face { | |
| max-width: 500px; | |
| } | |
| @media (max-width: 640px) { | |
| .clock-face { | |
| grid-template-columns: 1fr; | |
| gap: 1rem; | |
| } | |
| .clock-container { | |
| padding: 2rem; | |
| } | |
| } | |
| /* Animation for equations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(5px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .equation { | |
| min-height: 40px; | |
| animation: fadeIn 0.5s ease-out; | |
| } |