.error {
  background-color: rgba(247, 248, 250, 0.99);
}

  .error > div {
    width: 600px;
    height: 320px;
  }

    .error > div > div:last-child {
      background-image: linear-gradient(to bottom left, rgba(214,214,225,0.5), rgba(227,230,237,0.5), rgba(227,230,237,0.5));
      box-shadow: 0px 10px 80px 0px rgb(30 30 30 / 40%);
      transition: transform 0.3s ease-out;
      backdrop-filter: blur(8px);
    }

    .error > div > div:last-child,
    .error > div > div > div:first-child {
      border-radius: 0.25rem;
    }

  .error .overlay {
    position: absolute;
    background: rgba(120, 144, 252, 0.2);
    width: 370px;
    height: 370px;
    border-radius: 50%;
    position: relative;
    margin: -150px -130px auto;
    box-shadow: 0 0 0 0 white, 0 0 64px 12px rgb(120 144 252 / 40%), inset 0 0 46px 1px rgb(120 144 252 / 20%);
    transition: all 0.2s linear;
    pointer-events: none;
  }

  .error .from-red,
  .error .from-blue {
    width: 9.5rem;
    height: 9.5rem;
    z-index: -1;
  }

  .error .from-red {
    background-image: linear-gradient(to bottom, #dc2626,#fdba74);
    top: 0.5rem;
    left: -4rem;
  }

  .error .from-blue {
    background-image: linear-gradient(to bottom, #1e40af,#3b82f6);
    bottom: 0.5rem;
    right: -4rem;
  }

  .error svg {
    width: 205px;
    height: 190px;
  }

    .error svg text {
      font-family: 'Russo One', sans-serif !important;
      font-size: 32rem !important;
      text-transform: uppercase;
      animation: stroke 2s infinite alternate;
      stroke-width: 2;
      stroke: #365fa0;
      opacity: 0.6;
    }

@keyframes stroke {
  0% {
    fill: rgba(72,138,20,0);
    stroke: rgba(54,95,160,1);
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    stroke-width: 3;
  }

  30% {
    fill: rgba(72,138,20,0);
    stroke: rgba(54,95,160,1);
  }

  50% {
    fill: rgba(72,138,20,0);
    stroke: rgba(54,95,160,1);
    stroke-width: 4;
  }

  100% {
    fill: rgba(72,138,204,1);
    stroke: rgba(54,95,160,0);
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
  }
}

@media screen and (max-width: 577px) {
  .error > div {
    width: 100%;
    height: 100%;
  }

  .error .overlay {
    width: 300px;
    height: 300px;
    margin: -123px -125px auto;
  }

  .error svg {
    width: 150px;
    height: 150px;
  }

    .error svg text {
      font-size: 30rem !important;
    }

  .error .from-red {
    display: none;
  }

  .error .from-blue {
    background-image: linear-gradient(to bottom, #dc2626,#fdba74);
  }
}