1  #root {
 2    max-width: 1280px;
 3    margin: 0 auto;
 4    padding: 2rem;
 5    text-align: center;
 6  }
 7  
 8  .page-transition-enter {
 9    opacity: 0;
10  }
11  
12  .page-transition-enter-active {
13    opacity: 1;
14    transition: opacity 300ms;
15  }
16  
17  .page-transition-exit {
18    opacity: 1;
19  }
20  
21  .page-transition-exit-active {
22    opacity: 0;
23    transition: opacity 300ms;
24  }
25  
26  .logo {
27    height: 6em;
28    padding: 1.5em;
29    will-change: filter;
30    transition: filter 300ms;
31  }
32  .logo:hover {
33    filter: drop-shadow(0 0 2em #646cffaa);
34  }
35  .logo.react:hover {
36    filter: drop-shadow(0 0 2em #61dafbaa);
37  }
38  
39  @keyframes logo-spin {
40    from {
41      transform: rotate(0deg);
42    }
43    to {
44      transform: rotate(360deg);
45    }
46  }
47  
48  @media (prefers-reduced-motion: no-preference) {
49    a:nth-of-type(2) .logo {
50      animation: logo-spin infinite 20s linear;
51    }
52  }
53  
54  .card {
55    padding: 2em;
56  }
57  
58  .read-the-docs {
59    color: #888;
60  }