@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Fonts */
  --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
  --font-family-base: 'Rubik', var(--font-fallback);
  --font-color: var(--color-black);
  --font-color-gray: var(--color-gray-500);
  --font-color-grayer: var(--color-gray-700);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;
  --font-size-9xl: 8rem;

  /* Colors */
  --color-white: #ffffff;
  --color-black: #010409;

  --color-blue-50: #cae8ff;
  --color-blue-100: #a5d6ff;
  --color-blue-200: #79c0ff;
  --color-blue-300: #58a6ff;
  --color-blue-400: #388bfd;
  --color-blue-500: #1f6feb;
  --color-blue-600: #1158c7;
  --color-blue-700: #0d419d;
  --color-blue-800: #0c2d6b;
  --color-blue-900: #051d4d;

  --color-gray-50: #f0f6fc;
  --color-gray-100: #c9d1d9;
  --color-gray-200: #b1bac4;
  --color-gray-300: #8b949e;
  --color-gray-400: #6e7681;
  --color-gray-500: #484f58;
  --color-gray-600: #30363d;
  --color-gray-700: #21262d;
  --color-gray-800: #161b22;
  --color-gray-900: #0d1117;

  --color-orange-50: #ffdfb6;
  --color-orange-100: #ffc680;
  --color-orange-200: #ffa657;
  --color-orange-300: #f0883e;
  --color-orange-400: #db6d28;
  --color-orange-500: #bd561d;
  --color-orange-600: #9b4215;
  --color-orange-700: #762d0a;
  --color-orange-800: #5a1e02;
  --color-orange-900: #3d1300;

  --color-yellow-50: #f8e3a1;
  --color-yellow-100: #f2cc60;
  --color-yellow-200: #e3b341;
  --color-yellow-300: #d29922;
  --color-yellow-400: #bb8009;
  --color-yellow-500: #9e6a03;
  --color-yellow-600: #845306;
  --color-yellow-700: #693e00;
  --color-yellow-800: #4b2900;
  --color-yellow-900: #341a00;

  --background-color-hover: var(--color-gray-50);

  /* Border */
  --border-color: var(--color-gray-100);
  --border-color-hover: var(--color-gray-400);
  --border-radius-md: 3px;

  /* Sizes */
  --content-width: 760px;
  --content-padding: 15px;

  /* Elements */
  --background-body-color: var(--color-white);
  --background-header-color: var(--color-white);
}

::selection {
  background: var(--color-yellow-100);
  color: var(--color-black);
}

html,
body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

html {
  font-size: 16px;
  font-weight: normal;
  font-kerning: normal;
  font-family: var(--font-family-base);
}

body {
  margin: 0;
  padding: 0;
  color: var(--font-color);
  background-color: var(--background-body-color);
}

.site-content {
  flex: 1 0 auto;
  width: 100%;
  margin-top: 5rem;
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.page-heading {
  font-size: var(--font-size-4xl);
  text-align: center;
  margin-bottom: 15px;
}

.page-description {
  font-size: var(--font-size-lg);
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
  margin-bottom: 2.5rem;
}

.article-item {
  border-radius: var(--border-radius-md);
  text-decoration: none;
  & a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 10px;
    color: var(--font-color);
    padding: 8px 15px;
    & h3 {
      font-size: var(--font-size-md);
      font-weight: normal;
      margin: 0;
    }
    & p {
      font-size: var(--font-size-xs);
      font-family: monospace;
      color: var(--font-color-gray);
      text-transform: uppercase;
      margin: 0;
      text-align: right;
    }
    &:hover {
      text-decoration: none;
    }
  }
  &:hover {
    background-color: var(--background-color-hover);
  }
}

a {
  color: var(--color-blue-500);
  font-weight: 500;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
    color: var(--color-blue-500);
  }
}

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

input {
  padding: 8px 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  width: 100%;
  outline-color: var(--color-blue-500);
}

svg {
  fill: var(--color-black);
}

@media screen and (max-width: 700px) {
  .site-content {
    margin-top: 1.5rem;
  }
}