:root {
  --background-gradient: linear-gradient(-0.0625turn, var(--dark-1), var(--dark-2));
  --dark-1: hsl(156, 100%, 1%);
  --dark-2: hsl(192, 100%, 3%);
  --light-color-1: #f5f0f6;
  --light-color-2: #e3e3e3;
  --light-color-3: #c8c8c8;
  --light-color-4: #a8a8a8;
  --accent-dark-color: #1f1f1f;
  --accent-light-color-1: #818181;
  --accent-light-color-2: #434343;
  --lighten-color-1: rgba(255,255,255,.03);
  --lighten-color-2: rgba(255,255,255,.05);
  --lighten-color-3: rgba(255,255,255,.1);
  --darken-color-1: rgba(0,0,0,.1);
  --darken-color-2: rgba(0,0,0,.5);
  --darken-color-3: rgba(0,0,0,.75);
  --darken-color-4: rgba(0,0,0,.9);
  --signal-color-1: #2B59C3;
  --signal-color-2: #315C2B;
  --status-done-color: #2fbf7177;
  --status-error-color: #a4060677;
}

body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  min-height: 100vh;
  font-family: sans-serif;
  color: var(--light-color-2);
  background: var(--background-gradient);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
}

swi-loader {
 top: 0;
}

swi-toast {
  bottom: 0;
  flex-direction: column;
}

swi-loader, swi-toast {
  position: fixed;
  display: flex;
  z-index: 1;
}

nav {
  padding: 20px;
}

swi-router {
  padding: 0 20px;
}

swi-router, nav, swi-loader {
  width: 100vw;
  max-width: 1200px;
  box-sizing: border-box;
}