@keyframes beat {
    0% {
      transform: scale(1);
    }
    7.5% {
      transform: scale(0.9) rotate(-7.5deg);
    }
    15% {
      transform: scale(1.15) rotate(5deg);
    }
    50% {
      transform: scale(1) rotate(0deg);
    }
    100% {
      transform: scale(1) rotate(0deg);
    }
  }
  
  @keyframes flash {
    0% {
      filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
    }
    7.5% {
      filter: drop-shadow(0 0 3px rgba(255, 69, 0, 0.5));
    }
    12% {
      filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    }
    40% {
      filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
    }
    100% {
      filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
    }
  }
  
  @keyframes  loader-page {
    from {opacity: 0.1;}
    to {opacity: 1;}
  }

  body {
    margin: 0;
  }
  
  div#loader {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #1f2a46;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 300ms;
    overflow: hidden;
  }

  div#loader.disappear {
    opacity: 0;
  }
  
  div#loader-actionaly {
    background-image: url("../loader/Logo_mark.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 256px;
    height: 256px;
    flex-grow: 1;
    animation: beat 3s infinite, flash 3s infinite; 
  }
  