:root {
  color-scheme: only dark;

  --background-color: hsl(0 0 10%);
  --surface-color: color-mix(in hsl, var(--background-color), white 2%);
  --primary-color: pink;
  --page-gap: 40px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: ui-monospace, monospace;
  background-color: var(--background-color);
  margin: 0;
}

main {
  margin: auto var(--page-gap);
}

footer {
  position: absolute;
  bottom: 0;
  padding: var(--page-gap);
  background-color: var(--surface-color);
  width: 100%;
}

h1 {
  color: var(--primary-color);
}

.card h3 {
  color: var(--primary-color);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  display: block;
  text-align: left;
  text-decoration: none;
  color: currentColor;
  background-color: var(--surface-color);
  border: .5px solid transparent;
  padding: 25px;
  transition: transform .175s ease, box-shadow .3s ease;

  --grid-size: 20px;
  --line-color: color-mix(in srgb, currentColor 5%, transparent);

  background-image:
    linear-gradient(to right, var(--line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-color) 1px, transparent 1px);

  background-size: var(--grid-size) var(--grid-size);
}

.card:hover {
  transform: scale(102%);
  box-shadow: 0 0 5px 3px var(--primary-color);
}

.codeblock {
  height: 100%;
  background-color: var(--surface-color);
}

.hashtags {
  display: flex;
  gap: 8px;
}

.hashtag {
  color: var(--primary-color);
  text-decoration: underline;
  font-size: 0.8em;
}