body, html {
      height: 100%;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
    }
    * {
      box-sizing: border-box;
    }
    .bg-image {
      background-image: url("https://roject-d06b8.web.app/image.jpeg");
      filter: blur(2px);
      -webkit-filter: blur(5px);
      height: 100%; 
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    /* Position text in the middle of the page/image */
    .bg-text {
        padding: 20px;
        margin: auto;
        background-color: white;
      border: 3px solid #f1f1f1;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 30%;
      height: fit-content;
      padding: 20px;
    }
    .box2 {
        padding: 10px;
        margin: auto;
        width: auto;
        height: auto;
        background-color: white;
        border-color: black;
    }
    input[type=password] {
      min-width: 100%;
      padding: 12px 2px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      box-sizing: border-box;
      font-size: small;
    }
    .button {
        float: right;
        color: white;
        cursor: pointer;
        padding: 5px 12px;
        background: #357EC7;
        font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
        position: relative;
        transition: padding-right .3s ease-out;
    }
    .button.loading {
        background-color:#2f87c1;
        padding-right: 40px;
    }
    .button.loading:after {
        content: "";
        position: absolute;
        border-radius: 100%;
        right: 6px;
        top: 50%;
        width: 0px;
        height: 0px;
        margin-top: -2px;
        border: 2px solid rgba(255,255,255,0.5);
        border-left-color: #FFF;
        border-top-color: #FFF;
        animation: spin .6s infinite linear, grow .3s forwards ease-out;
    }
    @keyframes spin { 
        to {
            transform: rotate(359deg);
        }
    }
    @keyframes grow { 
        to {
            width: 14px;
            height: 14px;
            margin-top: -8px;
            right: 13px;
        }
    }
    #userAsCat {
        display:none;
    }