:root {
  --bg-0: #FFFFCC;
  --fg-0: #412D0A;
  --fg-0-translucid: rgba(65, 45, 10, 0.35);
  --fg-1: #957948;
  --fg-2: #CCC08F;
  --fg-3: #DDDDAA;
  --fefan-1: #1B519E;
  --fefan-2: #295DAB;
  --fefan-3: #32A1DA;
  --fefan-4: #B8529F;
  --transition-time: 0.2s;
  --font-body: 'Krub', sans-serif;
  --font-details: 'Shadows Into Light', sans-serif;
  --border-width: 1px;
}

html, body {
  background: var(--bg-0);
  color: var(--fg-0);
  height: 100vh;
  margin: 0;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
}

a:not(.not-a-link) {
  text-decoration-color: transparent;
  color: transparent;
  background: linear-gradient(175deg, var(--fefan-1) 0%, var(--fefan-1) 45%, var(--fefan-2) 55%, var(--fefan-3) 70%, var(--fefan-4) 85%);
  background-clip: text;
  background-size: 250% 100%;
  transition: all ease var(--transition-time);

  &:hover {
    text-decoration-color: var(--fefan-1);
    background-position-x: 100%;
  }

  &:visited {
    color: unset;
  }
}