/*
  index.css
*/

/*
  Common site-wide styles.
  These are the same as the MUI CssBaseline ones. Just nice to have, as sometimes the theme deactivates for one tick
  after taking an action, like clicking a button.
*/

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: rgba(0,0,0,0.87);
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #eeeeee;
  /*transition: background-color 0.2s ease;*/
}

strong, b {
  font-weight: 700;
}

@media print {
  body {
    background-color: #fff;
  }
}

body::backdrop {
  background-color: #eeeeee;
}

/*
  Additional theme-specific rules. Same reason as above.
*/

h1, h2, h3 {
  font-family: "Montserrat", sans-serif;
}

/*
  Other CSS rules that are here because I can't be bothered adding them to a @global rule with MUI.
*/

#root {
  background-image: linear-gradient(-90deg, transparent 30%, rgba(0,0,0,0.02) 40%, transparent 90%);
}

@keyframes fadeInAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fadeIn {
  animation: fadeInAnimation 0.2s ease-out;
}

/*
  Pixelated images here for QR codes. MUI's style system doesn't cover all these.
*/

.renderPixelated {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

/*
  Initial loading screen.
*/

#root > .temporary-loading-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
}

#root > .temporary-loading-panel > h4 {
  margin: 0;
  letter-spacing: 1px;
}