/* -------------------------------
  Modern Browser Reset
------------------------------- */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* -------------------------------
  Fonts
------------------------------- */
/* jetbrains-mono-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}
/* jetbrains-mono-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  src: url('./assets/fonts/jetbrains-mono-v24-latin-800.woff2') format('woff2');
}

/* -------------------------------
  Variables
------------------------------- */
:root {
  /* -------------------------------
    Defaults
  ------------------------------- */
  --radius: 4px;
  --radius-inputs: 2px;
  --grid: 8px;

  /* -------------------------------
    Colors
  ------------------------------- */
  color-scheme: light dark;

  --color-bg: #004ee0;
  --color-text: light-dark(#000000, #ffffff);
  --color-labels: #ffffff;
  --color-labels-shadow: light-dark(#000000, #000000);

  --modal-bg: light-dark(#ffffff, #000000);

  --input-bg: light-dark(#ffffff, #000000);
  --input-border: light-dark(#000000, #000000);
  --input-border-accent: light-dark(#000000, #ffffff);
  --input-accent: light-dark(#ffffff, #ffffff);

  /* -------------------------------
    Gradients
  ------------------------------- */
  --gradient-0:
    25deg, color-mix(in hsl, var(--modal-bg), transparent 60%) 20%,
    color-mix(in hsl, var(--modal-bg), transparent 80%) 80%;

  --gradient-1:
    -4deg, rgb(from var(--modal-bg) r g b / 0.4) 20%, rgb(from var(--modal-bg) r g b / 0.2) 80%;

  /* -------------------------------
    Shadows
  ------------------------------- */
  --box-shadow-0:
    0 5px 8px rgba(0, 0, 0, 0.4), 0 15px 80vw rgba(255, 255, 255, 0.1),
    0 0.5px 0 rgba(255, 255, 255, 0.5), 0 -0.5px 0 rgba(255, 255, 255, 0.15);

  --box-shadow-1:
    0 5px 8px rgba(0, 0, 0, 0.3), 0 15px 80vw rgba(255, 255, 255, 0.1),
    0 0.5px 0 rgba(255, 255, 255, 0.5), 0 -0.5px 0 rgba(255, 255, 255, 0.15);
}

:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}


/* -------------------------------
  Globals / Body
------------------------------- */
html {
  position: relative;
  font-size: 62.5%;
  padding: 0;
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
  font-size: 1.4rem;
  font-family: 'JetBrains Mono', sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: normal;
  color: var(--color-text);
  background: var(--color-bg);
  width: 100%;
  min-height: 100svh;
}
body > svg.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  line-height: 0;
  user-select: none;
  pointer-events: none;
  z-index: -1;
}

body > div {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;

  & > div.logo {
    max-width: 768px;
    width: 100%;
    height: auto;

    & > svg {
      width: 100%;
      height: auto;
    }
  }

  & > div.intro {
    margin-top: 20px;
    max-width: 768px;
    width: 100%;
    font-weight: 800;
    font-size: 2rem;
    text-align: center;
    line-height: 1.6;

    @media (max-width: 415px) {
      font-size: 1.7rem;
    }
  }

  & > div.actions {
    margin-top: 20px;
    max-width: 768px;
    width: 100%;
    padding: 0 60px;
    text-align: center;

    @media (max-width: 415px) {
      margin-top: 20px;
      padding: 0;
    }

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;

      & > li {
        padding: 4px 0;
      }
    }
}

a {
  font-weight: 800;
  color: inherit;
}