* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; background-color: #121212; /* Dark background */ color: #c9c2c0; /* Light text color */ line-height: 1.6; padding: 20px; } @media (max-width: 600px) { body { padding: 10px; } } h1 { font-size: 125%; } h2 { font-size: 110%; } h3 { font-size: 105%; } .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: bold; } a { color: #ff7000; text-decoration: none; transition: color 0.3s; } a:hover { color: #efa76f; } dl { margin-left: 0.4em; } dt { font-weight: bold; color: #8f6254; margin-top: 0.625em; text-transform: uppercase; font-size: 75%; } dd { margin-left: 0.4em; } @media (min-width: 590px) { .stats { display: flex; } .stats > * { flex-grow: 1; } } header, footer { text-align: center; margin: 1em 0; } /* Card Style */ .channel { background-color: #1E1E1E; /* Card background */ border-radius: 1em; padding: 0.7em 1em 1em; margin: 1em auto; max-width: 75em; box-shadow: 0 0.3em 0.5em rgba(0, 0, 0, 1); } @media (min-width: 1000px) { header, footer { margin: 3em 0; font-size: 125%; } .channel { margin-bottom: 2em; } } img.emoji { max-width: 1em; max-height: 1em; vertical-align: text-bottom; } img.go_to_channel { margin-left: 0.3em; width: 0.8em; height: 0.8em; vertical-align: baseline; }