:root {
   --body: 241, 242, 246;
   --card: 255, 255, 255;
   --card-hover: 242, 220, 222;
   --font: 50, 50, 50;
   --accent: 245, 5, 20;
}

@media (prefers-color-scheme: dark) {
   :root {
      --body: 35, 35, 35;
      --card: 50, 50, 50;
      --card-hover: 60, 60, 60;
      --font: 241, 242, 246;
      --accent: 244, 112, 121;
   }
}


body {
   font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,ubuntu,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji!important;
   background: rgba(var(--body), 1);
   color: rgba(var(--font), 1);
   margin: 0; padding: 0;
   font-size: 16px;
}

* {
   box-sizing: border-box;
}

h1, h2 {
   margin: 0;
}

a {
   color: rgba(var(--accent), 1);
}

a:hover {
   cursor: pointer;
}

svg {
   width: 40px; height: 40px;
}

header {
   background: rgba(var(--card), 1);
   padding: 80px 0 40px;
}

header h1 {
   font-size: 30px;
   margin-bottom: 14px;
   font-weight: 700;
}

header p {
   font-size: 16px;
   margin: 0;
}

main {
   padding: 30px 0;
}

main.card {
   background: rgba(var(--card), 1);
}

main h2 {
   font-size: 22px;
   margin-bottom: 30px;
}

section {
   width: 90%; max-width: 900px;
   margin: 0px auto;
}

.divider {
   display: block; height: 40px;
}

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

.categories .category {
   display: block; background: rgba(var(--card), 1);
   transition: all .12s ease 0s; padding: 20px;
   text-decoration: none;
}

.categories .category:hover {
   background: rgba(var(--card-hover), 1);
   text-decoration: none;
}

.categories .category svg {
   color: rgba(var(--accent), 1);
   display: block; margin-bottom: 10px;
}

.categories .category span {
   color: rgba(var(--font), 1);
   font-size: 18px; font-weight: 600;
   margin-bottom: 6px; display: block;
}

.categories .category p {
   color: rgba(var(--font), 0.65);
   font-weight: 400; font-size: 14px;
   display: block; margin: 0;
}

blockquote {
   padding: 10px 20px; margin: 20px 0 0;
   border-left: 2px solid rgba(var(--accent), 1);
   background: rgba(var(--accent), .1);
   padding: 14px 22px;
}

footer {
   padding: 20px 0 50px;
}

hr {
   display: block; height: 2px;
   background: rgba(var(--font), 0.2);
   border: none; margin: 15px 0;
}