body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
  }
  
  #loading {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, hsl(159, 95%, 7%), #01422c);
    box-shadow: inset 0px 0px 90px rgba(0, 0, 0, 0.5);
    margin: 0px;
    padding: 0px;
  }

  .loadingLogo {
    width: 100%;
    max-width: 350px;
    margin-top: -350px;
    animation: 1s ease-in-out 0s infinite alternate breathe;
  }
  
  .loading {
    width: 100px;
    height: 102px;
    border-radius: 100%;
    position: absolute;
    top: 45%;
    left: calc(50% - 50px);
  }
  
  .circle {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .circle .inner {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 5px solid rgba(0, 255, 170, 0.7);
    border-right: none;
    border-top: none;
    background-clip: padding;
    box-shadow: inset 0px 0px 10px rgba(0, 255, 170, 0.15);
  }
  
  @-webkit-keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .circle:nth-of-type(0) {
    transform: rotate(0deg);
  }
  .circle:nth-of-type(0) .inner {
    -webkit-animation: spin 2s infinite linear;
            animation: spin 2s infinite linear;
  }
  
  .circle:nth-of-type(1) {
    transform: rotate(70deg);
  }
  .circle:nth-of-type(1) .inner {
    -webkit-animation: spin 2s infinite linear;
            animation: spin 2s infinite linear;
  }
  
  .circle:nth-of-type(2) {
    transform: rotate(140deg);
  }
  .circle:nth-of-type(2) .inner {
    -webkit-animation: spin 2s infinite linear;
            animation: spin 2s infinite linear;
  }
  
  .loading {
    -webkit-animation: spin 5s infinite linear;
            animation: spin 5s infinite linear;
  }

  .initDone > .loadingLogo  {
    animation: .3s ease-in-out 0s 1 forwards zooooom;
    opacity: 0.5;
  }

  .initDone {
    opacity: 0;
    transition: opacity .3s;
  }

  .initDone > .loading  {
    opacity: 0;
    transition: opacity .2s;
  }

  @keyframes breathe {
    from {
      transform: scale(1)
    }

    to {
      transform: scale(0.97)
    }
  }

  @keyframes zooooom {
    from {
      transform: scale(1)
    }

    to {
      transform: scale(30)
    }
  }