1:root {
  2    --color-primary: #4f46e5;
  3    --color-bg: #f1f5f9;
  4    --text-secondary: #374151;
  5  }
  6  
  7  body {
  8    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
  9      Bitstream Vera Sans Mono, Courier New, monospace, serif;
 10    background-color: var(--color-bg);
 11  }
 12  
 13  main {
 14    max-width: 40rem;
 15    margin: 0 auto;
 16    padding: 2rem 0;
 17  }
 18  
 19  blockquote {
 20    margin: 0;
 21    color: var(--text-secondary);
 22  }
 23  
 24  a {
 25    color: var(--color-primary);
 26    text-decoration: none;
 27  }
 28  
 29  a:hover {
 30    color: #818cf8;
 31    text-decoration: underline;
 32  }
 33  
 34  h1 {
 35    font-size: 1.5rem;
 36    line-height: 2rem;
 37  }
 38  
 39  h2 {
 40    font-size: 1.25rem;
 41    line-height: 1.75rem;
 42    margin-bottom: 1rem;
 43  }
 44  
 45  p {
 46    margin: 1.5rem 0;
 47    line-height: 1.5;
 48  }
 49  
 50  ul {
 51    line-height: 1.3;
 52  }
 53
 54  .links-list {
 55    display: grid;
 56    grid-template-columns: 1fr 1fr 1fr;
 57  }
 58
 59  .links-list > a {
 60    display: block;
 61    padding-top: 0.5rem;
 62    padding-bottom: 0.5rem;
 63  }
 64
 65  .activity-grid {
 66    display: grid;
 67    grid-template-columns: 1fr 4fr;
 68    column-gap: 1rem;
 69    row-gap: 1rem;
 70
 71    > h4 {
 72      margin: 0;
 73    }
 74  }
 75  
 76  @media only screen and (max-width: 600px) {
 77    main {
 78      padding: 0 0.5rem;
 79    }
 80
 81    .links-list {
 82      display: grid;
 83      grid-template-columns: 1fr 1fr;
 84    }
 85
 86    .activity-grid {
 87      grid-template-columns: 1fr;
 88    }
 89  }
 90  
 91  @media (prefers-color-scheme: dark) {
 92    :root {
 93      --color-primary: #818cf8;
 94      --color-bg: #18181b;
 95      --text-secondary: #9ca3af;
 96    }
 97  
 98    body {
 99      color: white;
100    }
101  }
102