@keyframes bg-shift
{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 256px;
  }
}

:root
{
  --color-0: #000000;
  --color-1: #770067;
  --color-2: #ff0000;
  --color-3: #ffffca;

  --bg-color-0: #111111;
  --bg-color-1: #141414;
}

html,
body
{
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--bg-color-0);
  background-image: linear-gradient(
      45deg,
      transparent,
      transparent 25%,
      var(--bg-color-1) 25%,
      var(--bg-color-1) 50%,
      transparent 50%,
      transparent 75%,
      var(--bg-color-1) 75%
  );
  background-size: 256px 256px;
  animation: bg-shift 5s linear infinite;
}

.logo-container
{
  height: 100%;
  display: flex;
}

.logo-container svg
{
  margin: auto;
}


/* Logo SVG styles */

.logo {
  transform-origin: 50% 50%;
  transform: rotate3d(1, 1, 0, 90deg);
  animation: flip-in 500ms ease-out 250ms forwards;
}

.z1-line {
  stroke: var(--color-1);
  stroke-dasharray: 242, 244;
  stroke-dashoffset: 243;
  animation: line-draw 750ms ease 250ms forwards;
}

.z1-circle {
  stroke: var(--color-1);
  stroke-dasharray: 176, 178;
  stroke-dashoffset: 177;
  animation: line-draw 500ms ease 1000ms forwards;
}

.x-line1 {
  stroke: var(--color-2);
  stroke-dasharray: 112, 114;
  stroke-dashoffset: 113;
  animation: line-draw 300ms ease 1500ms forwards;
}

.x-line2 {
  stroke: var(--color-2);
  stroke-dasharray: 77, 79;
  stroke-dashoffset: 78;
  animation: line-draw 200ms ease 1800ms forwards;
}

.z2-line {
  stroke: var(--color-2);
  stroke-dasharray: 144, 146;
  stroke-dashoffset: 145;
  animation: line-draw 375ms ease 2000ms forwards;
}

.z2-circle {
  stroke: var(--color-2);
  stroke-dasharray: 176, 178;
  stroke-dashoffset: 177;
  animation: line-draw 500ms ease 2375ms forwards;
}

.f-line {
  stroke: var(--color-3);
  stroke-dasharray: 250, 252;
  stroke-dashoffset: 251;
  animation: line-draw 700ms ease 2875ms forwards;
}

@keyframes line-draw {
  0% {
    stroke-opacity: 0;
  }
  100% {
    stroke-opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes flip-in {
  100% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
}