.loader-wrapper {
  position: relative;
  width: 177px;
  height: 102px;
}

.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 177px;
  height: 102px;
  overflow: hidden;
  mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc3IiBoZWlnaHQ9IjEwMiIgdmlld0JveD0iMCAwIDE3NyAxMDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yLjUgNTMuNUMyLjUgNDEuMzY4NCA2LjYyOTU5IDI4Ljc5NSAxOS4xNDg4IDE5LjE2OTRDMzEuNzc5NSA5LjQ1ODA2IDUzLjI2NTYgMi41IDg4LjUgMi41QzEyMy43MzQgMi41IDE0NS4yMiA5LjQ1ODA2IDE1Ny44NTEgMTkuMTY5NEMxNzAuMzcgMjguNzk1IDE3NC41IDQxLjM2ODQgMTc0LjUgNTMuNUMxNzQuNSA3MC4zODI4IDE2OC43MzUgODEuNjk3NiAxNjEuMTY0IDg4LjgwMkMxNTMuNTM3IDk1Ljk2MDEgMTQzLjkxMyA5OSAxMzYgOTlDMTIxLjg4NCA5OSAxMTIuMzM1IDkxLjkyMTMgMTA0LjIyIDg1Ljg1MzRMMTA0LjEzNiA4NS43OTA0QzEwMS41MTYgODMuODMwOCA5OC45NTQxIDgxLjkxNTMgOTYuNDg0NSA4MC41MDJDOTMuOTg0OCA3OS4wNzE2IDkxLjMyMzEgNzggODguNSA3OEM4NS42NzY5IDc4IDgzLjAxNTIgNzkuMDcxNiA4MC41MTU1IDgwLjUwMkM3OC4wNDU5IDgxLjkxNTMgNzUuNDg0NCA4My44MzA4IDcyLjg2MzggODUuNzkwNEw3Mi43Nzk2IDg1Ljg1MzRDNjQuNjY1MSA5MS45MjEzIDU1LjExNjMgOTkgNDEgOTlDMzMuMDg3MiA5OSAyMy40NjMyIDk1Ljk2MDEgMTUuODM1OCA4OC44MDJDOC4yNjU0NyA4MS42OTc2IDIuNSA3MC4zODI4IDIuNSA1My41WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjEiIHN0cm9rZS13aWR0aD0iNSIvPgo8L3N2Zz4K);

  &:nth-of-type(2) {
    mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc3IiBoZWlnaHQ9IjEwMiIgdmlld0JveD0iMCAwIDE3NyAxMDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNyA1My43NjM1QzcgNDIuNjkwNyAxMC42ODc5IDI3LjUwNTYgMjEuODkxNyAxOC44NDg4QzMzLjQwNzcgOS45NTA5NCA1My43NDM2IDMuMDM0NDggODguNSAzLjAzNDQ4QzEyMy4yNTYgMy4wMzQ0OCAxNDMuNTkyIDkuOTUwOTQgMTU1LjEwOCAxOC44NDg4QzE2Ni4zMTIgMjcuNTA1NiAxNzAgNDIuNjkwNyAxNzAgNTMuNzYzNUMxNzAgNjkuNjEzMSAxNjQuNjU3IDgxLjc0NDEgMTU4LjA4NSA4Ny45NDJDMTUxLjM1MyA5NC4yOTA2IDE0Mi44NTYgOTYuOTY1NSAxMzYgOTYuOTY1NUMxMjUuMjUzIDk2Ljk2NTUgMTE3LjQ4MSA5MC44ODUzIDExMC4zMjMgODUuMjg2QzEwOS4xNzUgODQuMzg3NSAxMDguMDQyIDgzLjUwMTQgMTA2LjkxNSA4Mi42NTQ4TDEwNi43MTUgODIuNTA0NUMxMDQuMTgzIDgwLjYwMTYgMTAxLjQzMiA3OC41MzM0IDk4LjcxOTYgNzYuOTczN0M5NS45MjU2IDc1LjM2NjkgOTIuNDU2NSA3My44NjIxIDg4LjUgNzMuODYyMUM4NC41NDM1IDczLjg2MjEgODEuMDc0NCA3NS4zNjY5IDc4LjI4MDQgNzYuOTczN0M3NS41NjgxIDc4LjUzMzQgNzIuODE2NSA4MC42MDE2IDcwLjI4NDcgODIuNTA0NUw3MC4wODQ3IDgyLjY1NDhDNjguOTU4MSA4My41MDE0IDY3LjgyNTQgODQuMzg3NSA2Ni42NzY5IDg1LjI4NkM1OS41MTkzIDkwLjg4NTMgNTEuNzQ3IDk2Ljk2NTUgNDEgOTYuOTY1NUMzNC4xNDQyIDk2Ljk2NTUgMjUuNjQ3IDk0LjI5MDYgMTguOTE1MiA4Ny45NDJDMTIuMzQzMyA4MS43NDQxIDcgNjkuNjEzMSA3IDUzLjc2MzVaTTg4LjUgMEMxNy41IDAgMCAyOC4xMzc5IDAgNTMuNzYzNUMwIDg4LjkzNiAyNCAxMDIgNDEgMTAyQzU2LjAzMDEgMTAyIDY2LjE4MDcgOTQuMzcyMiA3NC4yNzY3IDg4LjI4ODRDNzkuNjQ3IDg0LjI1MjggODQuMTEzMyA4MC44OTY2IDg4LjUgODAuODk2NkM5Mi44ODY3IDgwLjg5NjYgOTcuMzUzIDg0LjI1MjggMTAyLjcyMyA4OC4yODg0QzExMC44MTkgOTQuMzcyMiAxMjAuOTcgMTAyIDEzNiAxMDJDMTUzIDEwMiAxNzcgODguOTM2IDE3NyA1My43NjM1QzE3NyAyOC4xMzc5IDE1OS41IDAgODguNSAwWk0xMjAuNjg4IDE2LjQ0MzVDMTMyLjcxOSAxNy4yOTk1IDE0MSAxNy44ODg3IDE0MSAxNkMxNDEgMTIuNjg2MyAxMTUuNTEgNiA4OSA2QzYyLjQ5MDMgNiAzNyAxMi42ODYzIDM3IDE2QzM3IDE3Ljg4ODcgNDUuMjgxMSAxNy4yOTk1IDU3LjMxMjEgMTYuNDQzNUM2Ni4zODkgMTUuNzk3NyA3Ny42MDAyIDE1IDg5IDE1QzEwMC40IDE1IDExMS42MTEgMTUuNzk3NyAxMjAuNjg4IDE2LjQ0MzVaIiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWxfNl8xMCkiLz4KPHBhdGggZD0iTTE1MC4yNDUgMjMuMzc5OEMxNTkuNDU4IDMxLjE1MzUgMTY0LjU1IDQyLjA1MjYgMTY0LjU1IDUxLjUxQzE2NC41NSA3OC43NTg3IDE0Ni44NjUgODkuODc5NyAxMzMuNjMgODkuODc5N0MxMjUuMTUgODkuODc5NyAxMTUuNjY1IDg0Ljc3NiAxMTAuMzM4IDgxLjI3MzJDMTE2LjYxNCA4NS45NjU1IDEyNC40ODEgOTEuNzcyNCAxMzYuMDggOTEuNzcyNEMxNDkuMzE1IDkxLjc3MjQgMTY4IDgxLjY1MTQgMTY4IDU0LjQwMjdDMTY4IDQzLjI4MDkgMTYzLjcyNCAzMS41NDgzIDE1MC4yNDUgMjMuMzc5OFoiIGZpbGw9InVybCgjcGFpbnQxX3JhZGlhbF82XzEwKSIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPHBhdGggZD0iTTI3LjA5MzYgMjMuMzc5OEMxNy44Nzk4IDMxLjE1MzUgMTIuNzg3OSA0Mi4wNTI2IDEyLjc4NzkgNTEuNTFDMTIuNzg3OSA3OC43NTg3IDMwLjQ3MjcgOTAuODc5NyA0My43MDc4IDkwLjg3OTdDNTIuMTg4MSA5MC44Nzk3IDYxLjY3MzEgODQuNzc2IDY3IDgxLjI3MzJDNjAuNzI0MSA4NS45NjU1IDUyLjg1NzYgOTEuNzcyNCA0MS4yNTgxIDkxLjc3MjRDMjguMDIzIDkxLjc3MjQgOS4zMzgxNyA4MS42NTE0IDkuMzM4MTcgNTQuNDAyN0M5LjMzODE3IDQzLjI4MDkgMTMuNjE0MSAzMS41NDgzIDI3LjA5MzYgMjMuMzc5OFoiIGZpbGw9InVybCgjcGFpbnQyX3JhZGlhbF82XzEwKSIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPGRlZnM+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQwX3JhZGlhbF82XzEwIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDg5IC02OSkgcm90YXRlKDkwKSBzY2FsZSgxNjAgMjc3LjY0NykiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRkVGRUZFIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50MV9yYWRpYWxfNl8xMCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgxNjIuNSA5OCkgcm90YXRlKC0xMjQuNTkyKSBzY2FsZSgzNS4yMjc4IDY2Ljg3ODgpIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOTk5OTk5IiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDJfcmFkaWFsXzZfMTAiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQuODM4MiA5OCkgcm90YXRlKC01NS40MDc3KSBzY2FsZSgzNS4yMjc4IDY2Ljg3ODgpIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOTk5OTk5IiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K);
  }
}

.blur {
  filter: blur(3px);
  mix-blend-mode: hue-rotate(45deg);
  transform: scale(1.04, 1);
  transform-origin: center;

  .background {
    animation: 1.5s linear 0.1s infinite spin;
  }
}
.background {
  position: absolute;
  height: 200%;
  width: 200%;
  top: -50%;
  left: -50%;
  animation: 1.5s linear 0s infinite spin;
  transform-origin: center;
  background: conic-gradient(
    from 0deg at center center,
    #000 0%,
    rgba(0, 255, 234, 1) 30%,
    rgba(234, 0, 255, 1) 50%,
    rgba(255, 234, 0, 1) 100%
  );
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.2;
  }
}

#devby {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
}