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

:root {
  --purple-100: hsl(257, 33%, 8%);
  --purple-200: hsl(257, 35%, 13%);
  --purple-300: hsl(257, 44%, 18%);
  --purple-400: hsl(262, 58%, 22%);
  --purple-500: hsl(262, 73%, 29%);
  --purple-600: hsl(262, 79%, 42%);

  --pink-100: hsl(290, 13%, 20%);
  --pink-200: hsl(290, 19%, 25%);
  --pink-300: hsl(290, 32%, 35%);
  --pink-400: hsl(290, 43%, 49%);
  --pink-500: hsl(290, 63%, 63%);
  --pink-600: hsl(290, 100%, 70%);
  --pink-700: hsl(290, 100%, 60%);

  --gray-100: hsl(249, 17%, 12%);
  --gray-200: hsl(249, 29%, 16%);
  --gray-300: hsl(249, 33%, 39%);
  --gray-400: hsl(249, 46%, 49%);
  --gray-500: hsl(249, 48%, 64%);
  --gray-600: hsl(249, 81%, 85%);

  --color-text: hsl(0, 0%, 93%); /* actually #eeeeee in disguise */
  --color-code-bg: hsl(260, 32%, 18%);
  --color-bg: var(--gray-100);
  --color-border: var(--purple-300);
}

html {
  min-width: 100%;
  min-height: 100%;
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', sans-serif;
}

a {
  text-decoration: underline;
  color: var(--gray-500);
  /* border-bottom: 2px solid var(--gray-300); */
  transition: /* border-bottom ease-in-out 200ms, */ color ease-in-out 200ms;
}

a:hover {
  color: var(--gray-400);
  /* border-bottom: 2px solid var(--purple-400); */
}

button:not([disabled]) {
  cursor: pointer;
}