body, html {
    height: 100%
  }
  
  .bgimg {
    /* Background color */
    background-color:  rgb(0, 0, 0);
    /* Full-screen */
    height: 100%;
    /* Add a white text color to all elements inside the .bgimg container */
    color: green;
    /* Add a font */
    font-family: Courier, monospace;
    /* Set the font-size to 25 pixels */
    font-size: 25px;
  }

  #canvasMatrix{
    width: 100%;
  }
  /* Position text in the top-left corner */
  .topleft .img {
    position: absolute;
    top: 0;
    left: 16px;
   background-color: black;
    font-family: Courier, monospace;
  }
  
  
  /* Position text in the middle */
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  

  hr {
    margin: auto;
    width: 40%;
  }

  button{
    color: #111111;
    background: #111111;
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
    color: #FFFFFF;
    background: #111111;
    width:900px; 
    height: 55px;
    border: 3px solid green;

    font-family: 'Consolas';
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    line-height: 50px;
    align-items: center;
    text-align: center;
  }

#imgcontainer{
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;;
}

.loguin {
      /* Background color */
      background-color:  rgb(0, 0, 0);
      /* Full-screen */
      height: 100%;
      /* Add a white text color to all elements inside the .bgimg container */
      color: green;
      /* Add a font */
      font-family: Courier, monospace;
      /* Set the font-size to 25 pixels */
      font-size: 25px;

}

.container{
text-align: center;
}