:root {
  font-size: 16px;
  /* Keep space reserved for the scrollbar so the layout doesn't shift
     between short and long pages */
  scrollbar-gutter: stable;
  --small-font-size: 1rem;
  --medium-font-size: 1.5rem;
  --big-font-size: 2rem;
  --huge-font-size: 2.5rem;

  --thin-font-weight: 100;
  --light-font-weight: 300;
  --regular-font-weight: 400;
  --medium-font-weight: 500;
  --bold-font-weight: 700;
  --black-font-weight: 900;
}

/* Dark Theme */
[data-theme='dark'] {
  --background-color: #212121;
  --text-color: #dadada;
  --link-color: #42a5f5;
  --link-second-color: #3685c5;
  --button-hover-background-color: #4e4e4e;
  --button-background-color: #424242;
  --burger-menu-border-color: #5d5d5d;
  --theme-icon-color: #bcbcbc;
  --theme-icon-flip-degrees: 180deg;
}

/* Light Theme */
[data-theme='light'] {
  --background-color: #fafafa;
  --text-color: #000000;
  --link-color: #1565c0;
  --link-second-color: #115199;
  --button-hover-background-color: #e0e0e0;
  --button-background-color: #dadada;
  --burger-menu-border-color: #5d5d5d;
  --theme-icon-color: #5d5d5d;
  --theme-icon-flip-degrees: 0deg;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: color 0.25s ease-in, background-color 0.25s ease-in;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}