/* Custom CSS */

#design-system {
    background-color: var(--base-50);
    color: var(--base-950);
  }

  body.grid-background {
    background: linear-gradient(to bottom, var(--base-200) 1px, transparent 1px);
    background-size: 8px 8px;
  }  

input, textarea {
    background-color: transparent;
}

.logo-grid img {
    place-self: center;
    max-height: 25%;
    max-width: 50%;
}

hr {
    margin-top:1px;
    margin-bottom:3px;
}

#qrcode {
    transition: opacity 0.25s ease-in-out;  /* set the transition on opacity */
    /* opacity: 0;  QR Code is initially invisible */
  }

#qrcode img {
    max-width: 100%;
    margin-bottom:8px;
    box-shadow:
    0 0 0 2px rgb(255, 255, 255),
    0 0 0 4px rgb(0, 0, 0)
}

.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
  }
  
  @keyframes skeleton-loading {
    0% {
      background-color: var(--base-300);
    }
    100% {
      background-color: var(--base-200);
    }
  }