@font-face {
    font-family: FlashBack-Demo;
    src: url('../fonts/Flash_Back.ttf');
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#landingPage {
    height: 100%;
}

.vidBackground {
    position: absolute;
    top: 0;
    left: 0;
    /* min-width: 100%;
    min-height: 100%; */
    width: 100%;
    height: 100%;
    z-index: -100;
    filter: blur(2px);
    object-fit: cover;
}

.bgBlacked {
    background-color: #212529;
}

#landingPage {
    color: white;
}

.overlay {
    z-index: -50;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    background-color: black;
    opacity: .3;
}

.gradient-background {
    background: linear-gradient(135deg, #2B0115, #6521B7, #FF046D, #251D8A, #5FD0D4);
    background-size: 180% 180%;
    animation: gradient-animation 5s ease infinite;
    height: 75%;
  }

  canvas {
    width: 100%;
    height: 100%;
  }
  
  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }