:root {
        --sat: env(safe-area-inset-top);
        --sar: env(safe-area-inset-right);
        --sab: env(safe-area-inset-bottom);
        --sal: env(safe-area-inset-left);
      }

      html {
        width: 100%;
        height: 100%;
        font-size: 18px;
        scroll-behavior: smooth;
        font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
        background-color: #191919;
      }

      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        color: white;
        background: transparent;
        overflow: hidden;
      }

      #app {
        width: 100%;
        height: 100%;
        position: absolute;
      }

      #background {
        width: 100%;
        height: 100%;
        position: absolute;
        
      }

      #background-mask {
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: url(../assets/images/splashscreen.jpg);
    background-size: 100% 100%;
      }

      canvas {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        position: relative;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;

      }

      #capture {
        display: none;
      }

      #lds-dual-ring {
isplay: block;
    width: 0px;
    height: 0px;
    margin: 0px auto;
    border-radius: 0%;
    border: 0px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2slinear infinite;
    -webkit-animation: lds-dual-ring 1.2slinear infinite;
      }

      #lds-text {
text-align: center;
    -webkit-text-align: center;
    margin-top: 250px;
    font-size: 1.8rem;
    color: #38570f;
    font-weight: bold;
      }

      #lds-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
      }

      @keyframes lds-dual-ring {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      div[hidden] {
        display: none !important;
      }

      .button-fullscreen {
        width: 25px;
        height: 25px;
        position: absolute;
        bottom: calc(50px + 1%);
        right: 1%;
        background-color: white;
        padding: 5px;
        border-radius: 5px;
        opacity: 0.7;
        z-index: 99;
        cursor: pointer;
      }