body, html {
    height: 100%;
}

mat-menu {
  max-width: none;
}
  

  
  .bg-image {
    #particles canvas{
      position: absolute;
      width: 100%;
      height:100%;
      z-index: -1;
    }
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* The image used */
    // background-image: url("./../../assets/images/login-drone1.jpg");
    background: linear-gradient(to right, rgb(238, 172, 128), rgb(68,166,187));

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .signup-card {
        // height: 40vh;
        // width: 30vh;
        background: rgba(0, 0, 0, 0.2);
        color: white;
        width: 50vh;
        // opacity: 0.5;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        .login-full-width {
            width: 100%;

            justify-content: center;
        }
        mat-card {
          mat-card-header {
            justify-content: center;
          }
        }
    }
  }
  
  /* Position text in the middle of the page/image */
  .bg-text {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
  }


canvas {
  display: block;
  // vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  // background-color: #19b1b6;
  background: linear-gradient(to right, rgb(238, 172, 128), rgb(68,166,187));
  // background-image: url("./../../assets/images/login-drone1.jpg");
  // background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

mat-card-actions {
  display: flex;
  justify-content: center;
}