/* --------- */
/* VARIABLES */
/* --------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors */
  --background-color: #4e69bc;
  --content-background-color: #0f0e09;
  --content-background-image: url(img/tiles/eyes.jpg);

  /* Text Colors */
  --text-color: #091131;
  --link-color: #988df3;
  --link-color-hover: #9e48ec;

  /* Borders and Outlines */
  --default-outline: 8px double #2833b6;
  --default-border: 3px solid #4e69bc;

  /* Text: */
  --font: system-ui, sans-serif;
  --heading-font: var(--font);
  --font-size: 20px;
}

/* ------------------ */
/* UNIVERSAL SELECTOR */
/* ------------------ */

/* NEVER FUCKING REMOVE THIS - KMS */
*,
::before,
::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
img {
  box-sizing: content-box;
}
html {
  box-sizing: border-box;
}

/* ---- */
/* BODY */
/* ---- */

body {
  /* Exterior box */
  display: flex;
  justify-content: center;

  /* Change background image */
  background-image: url(img/blacksometin.jpg);
  /* To avoid the background image from repeating itself */
  background-repeat: no-repeat;
  /* To make the background image to cover the entire element */
  background-size: cover;
  /* To make sure the entire element is always covered */
  background-attachment: fixed;

  /* Gap from top of page */
  margin-top: 200px;
  margin-bottom: 55dvh;

  font-family: var(--font);
  color: var(--text-color);
}

/* --------- */
/* HIGHLIGHT */
/* --------- */

::selection {
  /* (Text highlighted by the user) */
  background: rgba(77, 74, 81, 0.9);
}