@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

.bg {
    font-family: 'Quicksand', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    z-index: -30;
    background: linear-gradient(#b5f5c1, #363636);
    background-repeat: no-repeat;
    background-size: cover;
    animation: animatedBackground 1000s linear infinite;
  }
  .bg:after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -20;
    opacity: .25;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    width: 700%;
    background-image: url('background.svg');
    background-position: center bottom;
    animation: animatedBk 1500s  linear infinite;
    z-index: -10;
  }
  .bg:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    width: 700%;
    opacity: .4;
    background-image: url('background2.svg');
    background-position: center bottom;
    animation: animatedBackground 1200s  linear infinite;
    z-index: -10;
  }
  
  @keyframes animatedBackground {
    0% {
      background-position: 0 100%;
    }
    50% {
      background-position: 100% 100%;
    }
    100% {
      background-position: 0% 100%;
    }
  }
  @keyframes animatedBk {
    0% {
      background-position: 100% 100%;
    }
    50% {
      background-position: 0% 100%;
    }
    100% {
      background-position: 100% 100%;
    }
  }

  .logo{
    margin-right: 1rem;
}

p{
    font-size: 0.8rem;
    border-left: 1px solid #0000004f;
    padding: 4px;
    margin-left: 10px;
}