/* plus-jakarta-sans-regular - latin */
@font-face {
   font-display: swap;
   font-family: "Plus Jakarta Sans";
   font-style: normal;
   font-weight: 400;
   src: url("/res/fonts/plus-jakarta-sans-v11-latin-regular.woff2")
      format("woff2");
}
/* plus-jakarta-sans-800 - latin */
@font-face {
   font-display: swap;
   font-family: "Plus Jakarta Sans";
   font-style: normal;
   font-weight: 800;
   src: url("/res/fonts/plus-jakarta-sans-v11-latin-800.woff2") format("woff2");
}

:root {
   color-scheme: light dark;
   --primary-color: #1565c0;
   --primary-color-light: #f0f8ff;
   --primary-text-color: #212121;
   --secondary-text-color: #616161;
   --background-color: #fafafa;
   --background-color-light-80: rgba(var(--background-color-light-values), 0.8);
   --background-color-light: rgb(var(--background-color-light-values));
   --secondary-background-color: #efefef;
   --overlay-background: #808080a4;
   --snackbar-background: #212121;
   --accent-color: #1565c0;
   --background-color-light-values: 255, 255, 255;
   --theme-font: "Plus Jakarta Sans", "Open Sans", "Roboto", sans-serif;
   --unit-0:  0;
   --unit-1:  0.25rem;  /* 4px */
   --unit-2:  0.50rem;  /* 8px */
   --unit-3:  0.75rem;  /* 12px */
   --unit-4:  1.00rem;  /* 16px */
   --unit-5:  1.25rem;  /* 20px */
   --unit-6:  1.50rem;  /* 24px */
   --unit-7:  1.75rem;  /* 28px */
   --unit-8:  2.00rem;  /* 32px */
   --unit-9:  2.25rem;  /* 36px */
   --unit-10: 2.5rem;   /* 40px */
   --unit-11: 2.75rem;  /* 44px */
   --unit-12: 3.00rem;  /* 48px */
   --unit-16: 4.00rem;  /* 64px */
   --unit-20: 5.00rem;  /* 80px */
   --unit-24: 6.00rem;  /* 96px */
   --unit-30: 7.50rem;  /* 120px */
   --unit-xsmall: var(--unit-1);
   --unit-small: var(--unit-3);
   --unit-regular: var(--unit-4);
   --unit-medium: var(--unit-5);
   --unit-large: var(--unit-10);
   --unit-xlarge: var(--unit-16);
   --unit-xxxlarge: var(--unit-30);
}

@media screen and (prefers-color-scheme: dark) {
   :root {
      color-scheme: dark light;
      --primary-text-color: #bfbfbf;
      --primary-color-light: #ecf8ff;
      --accent-color: #0a305c;
      --secondary-text-color: #b0bec5;
      --secondary-background-color: #292929;
      --background-color: #1f1f23;
      --overlay-background: #363636a4;
      --snackbar-background: #494949;
      --primary-color: #a8caf0;
      --background-color-light-values: 37, 37, 41;
   }
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--unit-xlarge);
    margin: 0 0 var(--unit-small) 0;
    position: relative;
    z-index: 99;
}

header .logo {
   color: var(--primary-color);
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: var(--unit-regular);
}

header img {
   height: var(--unit-large);
   display: inline-block;
   border-radius: 50%;
}

header .logo span {
   font-size: 1.75em;
   font-weight: bold;
}

header a {
    color: var(--primary-text-color);
    text-decoration: none;
}

header .container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--unit-medium);
}