@import url("common/styles/index.css");

:root {
  --theme-color-border: rgba(86, 86, 86, 1);
  --theme-color-border-active: rgba(160, 157, 156, 1);
  --theme-color-background: rgba(0, 0, 0, 1);
  --theme-color-background-fade: rgba(0, 0, 0, 0.5);
  --theme-color-text: rgba(160, 157, 156, 1);
  --theme-color-text-highlight: rgba(246, 203, 67, 1);
  --theme-color-text-highlight-background: rgba(250, 176, 60, 1);

  --theme-color-text-secondary: rgba(123, 186, 242, 1);
  --theme-color-text-secondary-background: rgba(77, 143, 215, 1);

  --theme-color-border-disabled: rgba(100, 100, 100, 0.6);
  --theme-color-background-disabled: rgba(100, 100, 100, 0.2);
  --theme-color-text-disabled: rgba(100, 100, 100, 0.9);
  --theme-font-text: 'Ubuntu', sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--theme-font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--theme-color-background);
  color: var(--theme-color-text, white);
  width: 100%;
  height: 100vh;
}

canvas {
  outline: none;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

#title {
  font-size: 64px;
  font-style: italic;
  font-weight: bold;
  font-variant: small-caps;
  color: var(--theme-color-text, white);
}

#loading {
  width: 192px;
  height: 192px;
  margin: auto;
  background-image: url("logo192.png");
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
}