:root {
  --header-height: 50px;
  --homepage-articles-gap: 24px;
  --border-color-main: rgba(17, 42, 80, 0.137);

  --bg-body: var(--color-gray-50);
  --bg-header: var(--color-white);
  --bg-card-main: var(--color-white);
  --bg-card-hover: var(--color-gray-200);

  --text-header: var(--color-gray-900);
  --text-main: var(--color-gray-900);
  --text-secondary: var(--color-gray-500);

  --link-color: var(--color-blue-600);
  --link-hover: var(--color-blue-700);
  --link-visited: var(--color-violet-600);
  --link-active: var(--color-blue-800);

  --logo-main-color: var(--color-white);
  --logo-main-bg: var(--color-slate-400);
}
[data-theme="dark"] {
  --border-color-main: #ffffff3d;
  --bg-body: var(--color-gray-900);
  --bg-header: var(--color-slate-800);
  --bg-card-main: var(--color-gray-800);
  --bg-card-hover: var(--color-gray-700);

  --text-header: #e6e6e6;
  --text-main: #e6e6e6;
  --text-secondary: var(--color-gray-400);

  --link-color: var(--color-blue-400);
  --link-hover: var(--color-sky-400);
  --link-visited: var(--color-purple-400);
  --link-active: var(--color-sky-500);

  /* --logo-main-color: var(--color-white); */
  /* --logo-main-bg: var(--color-slate-500); */
}

a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 500;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:active {
  color: var(--link-active);
}
a:visited {
  color: var(--link-visited);
}
a:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 3px;
  border-radius: 4px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-color-main);
}

small {
  color: var(--text-secondary);
}

body {
  font-family: sans-serif;
  margin: 0px;
  padding: 0px;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-body);
  color: var(--text-main);
}

main, header, footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

main {
  /* margin-top: var(--header-height); */
  margin-top: calc(var(--header-height) + var(--homepage-articles-gap));
  margin-bottom: calc(var(--homepage-articles-gap)*2);
}

.wrapper {
  margin: 0 auto;
  height: 100%;
  max-width: 1200px;
  padding: 0 var(--homepage-articles-gap);
  display: flex;
  flex-direction: column;
}

.main-content {
}

.card {
  background-color: var(--bg-card-main);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* .icon {
  color: var(--logo-main-color);
}
.icon .bg {
  fill: var(--logo-main-bg);
} */

.link-cta {
  font-weight: 600;
}