| #root { |
| max-width: 1280px; |
| margin: 0 auto; |
| padding: 2rem; |
| text-align: center; |
| } |
| |
| .logo { |
| height: 6em; |
| padding: 1.5em; |
| will-change: filter; |
| transition: filter 300ms; |
| } |
| .logo:hover { |
| filter: drop-shadow(0 0 2em #646cffaa); |
| } |
| .logo.react:hover { |
| filter: drop-shadow(0 0 2em #61dafbaa); |
| } |
| |
| @keyframes logo-spin { |
| from { |
| transform: rotate(0deg); |
| } |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| |
| @media (prefers-reduced-motion: no-preference) { |
| a:nth-of-type(2) .logo { |
| animation: logo-spin infinite 20s linear; |
| } |
| } |
| |
| .card { |
| padding: 2em; |
| } |
| |
| .read-the-docs { |
| color: #888; |
| } |