html *{
  transition: all .2s ease-in-out;
}  
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000F1E;
  background: linear-gradient(75deg, rgba(0, 95, 183, 0.20) 26.81%, rgba(0, 37, 71, 0.20) 65.62%), linear-gradient(100deg, rgba(0, 0, 0, 0.00) 1.88%, rgba(0, 0, 0, 0.20) 99.07%), #000F1E;
    margin: 0;
    
  }



  .shape,.container {
    animation: animateInOut 8s ease-in infinite;
/*     width: 600px; */
  }

  #circle {
    animation-name: animateCircle;
  }

  #square {
    animation-name: animateSquare;
  }

  @keyframes animateInOut {
    0%, 100% {
      opacity: 0;
    }
    10%, 90% {
      opacity: 1;
    }
  }

  @keyframes animateCircle {
    0%, 10% {
      transform: scale(1);
    }
    20%, 80% {
      transform: scale(0.8);
    }
    90%, 100% {
      transform: scale(1);
    }
  }

  @keyframes animateSquare {
    0%, 10% {
      transform: scale(0.8);
    }
    20%, 80% {
      transform: scale(1);
    }
    90%, 100% {
      transform: scale(0.8);
    }
  }