:root {
  --background-color-primary: #121212;
  --background-color-secondary: #212121;
  --background-color-tertiary: #3F3F3F;

  --border-color: #27272b;

  --primary-color: #339989;
  --secondary-color: #7de2d1;
  --accent-color: #d7aa5b;

  --text-color-primary: #cccccc;
  --text-color-secondary: #aaaaaa;
  --text-color-full-white: #ffffff; /* for contrast purposes only */

  --success-color: #5e4ae3;
  --warning-color: #ffc247;
  --danger-color: #d94f30;

  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

* {
  box-sizing: border-box;
  font-family: "Roboto";
}

body {
  line-height: 1.6;
  color: var(--text-color-primary);
  background: var(--background-color-primary);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
  flex-direction: column;
}