:root {
  --accent-color: #9785e6;
  --link-color: rgb(66, 170, 255);
  --color-dark: #101010;
  --color-light: #ececec;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-light);
  /* background-color: #343135; */
  background: linear-gradient(
      to right,
      hsla(20, 30%, 10%, 0.95),
      hsla(20, 80%, 2%, 0.95)
    ),
    url("library-1834222_1920.jpg");
  background-size: cover;
  background-position: center;
  font-family: "Bricolage Grotesque";
  font-weight: 200;
  overflow-x: hidden;
  min-height: 100svh;
}

a {
  color: var(--link-color);
}

h2 {
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

main {
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  gap: 2rem;
}

.references ul {
  display: flex;
  flex-direction: column;
}

.references a {
  text-decoration: none;
  width: fit-content;
}

.references a:hover {
  text-decoration: underline;
}

.references li {
  list-style-type: "~ ";
  list-style-position: inside;
  margin-bottom: 0.4rem;
}

table {
  border: var(--color-dark) solid 1px;
}

table td {
  padding: 0.25rem;
  border: var(--color-dark) solid 1px;
}

table thead {
  font-weight: 600;
  background-color: hsl(0 0 0 / 0.3);
}

table tbody {
  background-color: hsl(0 0 0 / 0.1);
}