/* This CSS contains the whole design language */
/* Font */
:root {
  --font-family: 'SphereFont', system-ui;
}

@font-face {
  font-family: 'SphereFont';
  src: url("https://www.sp-here.com/resources/fonts/SphereFont.woff2") format("woff2"),
       url("https://www.sp-here.com/resources/fonts/SphereFont.woff") format("woff");
}

/* Color */
:root {
  --color-main: #0362FA;
  --color-bg: #F8F9FB;
  --color-text: #000000;
  --color-text-inverted: #FFFFFF;
  --color-error: #E74C3C;
  --color-warning: #F39C12;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-main: #FFFFFF;
    --color-bg: #0C0C0E;
    --color-text: #FFFFFF;
    --color-text-inverted: #000000;
  }
  .logo {
    content: url("https://www.sp-here.com/resources/logos/sphere_dark.png");
  }
}

/* Universal reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body */
html, body {
  height: 100%;
  width: 100%;
  font-family: var(--font-family);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  user-select: none;
  background-color: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  min-height: 100vh;
  overflow-x: hidden;
}
/* Sve za Požegu! */