app-root {
  background: #1D272D;
}

.preload-logo {
  -webkit-app-region: drag;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  animation: 0.5s ease-out fadeIn;
  background-image: radial-gradient(#3a66820a 0%,  #000e17 30%, black 100%);
  background-color: black;

  &>div {
    width: 200px;
    height: 200px;
    margin: auto;
    flex: none;

    .progress {
      background: rgba(0,0,0,.25);
      height: 3px;
      margin: 10px 50px;

      .bar {
        transition: 1s ease-out width;
        background: #a1c5e4;
        height: 3px;
        box-shadow: 0 0 2px #ffffff1f;
      }
    }
  }
}


@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



.tabby-logo {
  width: 120px;
  height: 120px;
  background: url('../assets/logo.svg');
  background-repeat: none;
  background-size: contain;
  margin: auto;
}


.tabby-title {
  color: #a1c5e4;
  font-family: 'Source Sans Pro';
  text-align: center;
  font-weight: normal;
  font-size: 32px;
  margin: 0;

  sup {
      color: #842fe0;
  }
}