:root {
  --gradient: conic-gradient(
  	from -88.25deg at 47.65% 110.22%,
  	var(--clr-blue) 0deg,
  	var(--clr-green) 213.75deg,
  	var(--clr-blue) 360deg
  );
  --logo: url("../assets/logo-listenpass.svg");
}

@media (prefers-color-scheme: dark) {
  :root {
    --logo: url("../assets/logo-dark-listenpass.svg");
  }
}
#Home {
  height: 100%;
}

.IDCard,
.Home {
  color: var(--clr-text);
  background-color: var(--clr-bg);
  padding: 20px;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

a.btn {
  text-decoration: none;
  margin: 0.5rem 0;
  width: 100%;
}
a.btn button {
  width: 100%;
}

@media screen and (max-width: 1070px) {
  body {
    display: block;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .Preview,
.IDCard,
.Home {
    width: 100%;
  }
  .IDCard,
.Home {
    height: 100%;
  }
}
.label-error {
  color: var(--clr-red);
}
.label-error:not(.error-visible) {
  display: none;
}

#canvas {
  max-width: 90%;
  max-height: 90%;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

@-webkit-keyframes main {
  0% {
    transform: translateY(10px);
    opacity: 0%;
  }
  100% {
    transform: translateY(0px);
    opacity: 100%;
  }
}

@keyframes main {
  0% {
    transform: translateY(10px);
    opacity: 0%;
  }
  100% {
    transform: translateY(0px);
    opacity: 100%;
  }
}