body {
  background: #2C2F33;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  font-size: 12px;
}

.message {
  margin: 2em;
  padding: 15px;
}
.message__text {
  font-style: italic;
  font-size: 1.5em;
}
.message__author {
  opacity: 0.5;
  margin-top: 0.5em;
}

.status {
  opacity: 0.5;
}

.loader {
  background: #2C2F33;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@keyframes loadspinner {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(1080deg);
  }
  100% {
    transform: rotate(1080deg);
  }
}
@keyframes loadscaler {
  0% {
    transform: scale(1);
  }
  15% {
    filter: blur(0);
    transform: scale(var(--anim-scale));
  }
  25% {
    filter: blur(1px);
  }
  35% {
    filter: blur(0px);
  }
  50% {
    transform: scale(var(--anim-scale));
  }
  55% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.logo {
  color: #2C2F33;
  width: 100px;
  height: 100px;
  position: relative;
}
.logo__layer {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  animation: loadscaler infinite;
  animation-duration: 5s;
}
.logo__layer:nth-child(1) {
  --anim-scale: 1.35;
  animation-delay: 0.2s;
}
.logo__layer:nth-child(1)::after {
  width: 95%;
  height: 95%;
}
.logo__layer:nth-child(2) {
  --anim-scale: 1.2;
  animation-delay: 0.1s;
  clip-path: circle(49% at 50% 50%);
}
.logo__layer:nth-child(2)::after {
  width: 66%;
  height: 66%;
}
.logo__layer:nth-child(3) {
  clip-path: circle(34% at 50% 50%);
}
.logo__layer::after {
  border-radius: 100%;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
}
.logo__layer::before {
  clip-path: inherit;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  animation: loadspinner infinite;
  animation-duration: inherit;
  animation-delay: inherit;
  animation-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20id%3D%22Layer_1%22%20viewBox%3D%220%200%20116.80078%2084.000832%22%20width%3D%22116.801%22%20height%3D%2284.001%22%3E%3Cstyle%20id%3D%22style3%22%3E.st0%7Bfill%3A%23FFFFFF%3B%7D%3C/style%3E%3Cpath%20style%3D%22isolation%3Aauto%3Bmix-blend-mode%3Anormal%22%20d%3D%22M42.5%200S28.8-.3%2014.4%2010.5c0%200-14.4%2026.102-14.4%2058.302%200%200%208.4%2014.5%2030.5%2015.2%200%200%203.7-4.5%206.7-8.3-12.7-3.8-17.5-11.8-17.5-11.8s1%20.698%202.8%201.698c.1.1.2.2.4.3.3.2.6.3.9.5%202.5%201.4%205.002%202.502%207.302%203.402%204.1%201.6%209%203.198%2014.7%204.298%207.5%201.4%2016.3%201.902%2025.9.102%204.7-.8%209.5-2.2%2014.5-4.3%203.5-1.3%207.4-3.2%2011.5-5.9%200%200-5%208.2-18.1%2011.9%203%203.8%206.6%208.1%206.6%208.1%2022.1-.7%2030.6-15.2%2030.6-15.2%200-32.2-14.402-58.3-14.402-58.3C88-.3%2074.3%200%2074.3%200L72.9%201.6c17%205.2%2024.9%2012.702%2024.9%2012.702-10.4-5.7-20.6-8.5-30.1-9.6-7.2-.8-14.1-.6-20.2.2-.6%200-1.1.098-1.7.198-3.5.3-11.998%201.6-22.698%206.3-3.7%201.7-5.9%202.902-5.9%202.902s8.298-7.9%2026.298-13.1l-1-1.2zm-2.8%2037.302c5.7%200%2010.3%205%2010.2%2011.1%200%206.1-4.5%2011.1-10.2%2011.1-5.6%200-10.2-5-10.2-11.1S34%2037.3%2039.7%2037.3zm36.5%200c5.7%200%2010.2%205%2010.2%2011.1s-4.5%2011.1-10.2%2011.1c-5.6%200-10.2-5-10.2-11.1s4.5-11.1%2010.2-11.1z%22%20id%3D%22rect4141%22%20color%3D%22%23000%22%20overflow%3D%22visible%22%20solid-color%3D%22%23000000%22%20fill%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22square%22/%3E%3C/svg%3E);
}