:root {
  --spinner-dimension-normal:       104px;
  --spinner-dimension-small:        72px;
  --spinner-loading-text-normal:    1.5em;
  --spinner-loading-text-small:     1.0em;
  --spinner-element-size:           var(--spinner-dimension-normal);
  --spinner-text-size:              var(--spinner-loading-text-normal);
}

@font-face {
  font-family:                      'Porsche Next';
  src:                              url('./fonts/PorscheNextV3-Regular.otf') format("opentype");
}

body {
  margin:                           0;
  background-color:                 black;
}

@keyframes circle-animation {
  0% {
    stroke-dashoffset:              57px;
    transform:                      rotateZ(0deg);
  }
  50%, 75% {
    stroke-dashoffset:              20px;
    transform:                      rotateZ(80deg);
  }
  100% {
    stroke-dashoffset:              57px;
    transform:                      rotateZ(360deg);
  }
}

@keyframes svg-animation {
  0% {
    transform:                      rotateZ(0deg);
  }
  100% {
    transform:                      rotateZ(360deg);
  }
}


@media screen and (max-width: 520px) {
  :root {
    --spinner-element-size:         var(--spinner-dimension-small);
    --spinner-text-size:            var(--spinner-loading-text-small);
  }
}

#loading-background {
  position:                         fixed;
  display:                          flex;
  flex-direction:                   row;
  justify-content:                  center;
  align-items:                      center;
  width:                            100%;
  height:                           100%;
  z-index:                          1000001;
  background-color:                 rgba(0,0,0,0.8);

  .loading-spinner {
    height:                         var(--spinner-element-size);
    width:                          var(--spinner-element-size);

    .svg-spinner {
      animation-duration:           1.2s;
      animation-timing-function:    steps(50);
      animation-iteration-count:    infinite;
      animation-fill-mode:          none;
      animation-name:               svg-animation;

      circle:first-child {
        stroke:                     rgb(136, 137, 140);
        fill:                       none;
        stroke-width:               1.5px;
      }

      circle:last-child {
        fill:                       none;
        stroke:                     rgb(251, 252, 255);
        transform-origin:           0 0;
        stroke-width:               1.5px;
        stroke-dasharray:           57px;
        stroke-linecap:             round;
        animation-duration:         1.2s;
        animation-timing-function:  steps(50);
        animation-iteration-count:  infinite;
        animation-fill-mode:        none;
        animation-name:             circle-animation;
      }
    }
  }

  #loading-text {
    position:                       fixed;
    top:                            calc(50% + var(--spinner-element-size) / 2);
    left:                           50%;
    margin-top:                     10px;
    transform:                      translate(-50%, -50%);
    text-align:                     center;
    font-family:                    'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;
    font-size:                      var(--spinner-text-size);
    color:                          white;
  }
}