1  body {
  2      font-family: sans-serif;
  3  	line-height: 1.6;
  4      background-color: #111;
  5      color: #fff;
  6  	max-width: 80%;
  7  	margin: auto;
  8  }
  9  
 10  h1 {
 11  	text-align: center;
 12  }
 13  
 14  h1,h2,h3,h4 {
 15  	font-family: Courier New, Courier, Consolas, monospace;
 16  }
 17  
 18  a {
 19      color: #f3c;
 20      text-decoration: none;
 21      background-color: transparent;
 22  }
 23  
 24  a:hover, a:focus {
 25      text-decoration: none; 
 26      background-color: #f3c;
 27      color: #fff; 
 28  }
 29  
 30  table {	
 31      width: 90%;
 32      border-collapse: collapse;
 33      margin: 12px auto;
 34  	font-size: 1em;
 35  }
 36  
 37  tr { 
 38      margin-bottom: 10px; 
 39  }
 40  
 41  tr:nth-child(odd) {
 42          background-color: #222; /* Light gray for odd rows */
 43  }
 44  
 45  tr:hover {
 46      background-color: #444; /*  hover effect for table rows */
 47  }
 48  
 49  th, td {
 50      padding: 10px;
 51      border: 2px solid #666;
 52  	text-align: left; 
 53  	white-space: nowrap;
 54  	overflow: hidden;
 55  	text-overflow: ellipsis;
 56  }
 57  
 58  th {
 59      background-color: #444;
 60      text-align: center;
 61  	font-size: 1.1em;
 62  	font-family: Courier New, Courier, Consolas, monospace;
 63  }
 64  
 65  .container {
 66      max-width: 800px; 
 67      margin: auto;
 68      padding: 12px;
 69  }
 70  
 71  @media screen and (max-width: 600px) {
 72      body {
 73          font-size: 90%; 
 74      }
 75  
 76      table { 
 77  		width: 100%;
 78          display: block;
 79          overflow-x: auto;
 80          white-space: nowrap;
 81      }
 82  
 83      th, td {
 84          display: block;
 85          text-align: left;
 86  		white-space: normal;
 87      }
 88  	
 89      tr {
 90          display: flex; 
 91          flex-direction: column; 
 92      }
 93  
 94  }
 95  :root {
 96    --card-border: #446868;
 97    --card-link-color: #88bebe;
 98  }
 99  .cards-container {
100  		width: 90%;
101  		margin-left: auto;
102  		margin-right: auto;
103  }
104  .cards-container a {
105  		color: var(--card-link-color);
106  }
107  .cards {
108  		display: grid;
109  		grid-gap: 0.5rem;
110  		grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
111  }
112  .card {
113  		border: 2px solid var(--card-border);
114  		border-radius: 0.5rem;
115  }
116  .card-name {
117  		background-color: var(--card-border);
118  		font-size: 1.25rem;
119  		padding: 0.25rem; 
120  		border-radius: 0.25rem 0.25rem 0 0;
121  		text-transform: lowercase;
122  }
123  .card-content {
124  		padding: 0.5rem;
125  }
126  .card-link {
127  		font-size: .95rem;
128  		text-transform: lowercase;
129  }
130  .card-text {
131  		font-size: 0.75rem;
132  }
133  .card-slug {
134  		font-size: 0.75rem;
135  }
136