body {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  background: #f8f1f1;
}
#ale {
  position: fixed;
  display: none;
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.341);
}
#aletext {
  box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.514),
    0 6px 20px 0 rgba(0, 0, 0, 0.19), inset gray 0px 10px 60px 12px;
  border: solid 1px;
  border-color: #493d3d6c;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  border-width: 50%;
  padding: 30px;
}
.info {
  text-align: center;
  font-size: large;
  display: inline-block;
  vertical-align: middle;
}

.conqr {
  align-items: center;
  justify-items: center;
  display: grid;
}

h1 {
  align-self: center;
  justify-self: center;
}
br {
  display: none;
}
.sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
input[type="color"] {
  margin: 10px;
}
button {
  padding: 10px 20px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  transition: ease-in-out 0.3s;
}
#generate-btn {
  width: 50%;
  align-items: center;
  justify-self: center;
}
button:hover {
  background-color: #0057b3f1;
  scale: 1.05;
}
.help {
  bottom: 0;
  left: 0;
}

#download-link {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #218838;
  transition: ease-in-out 0.3s all;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
  opacity: 0;
}

#download-link:hover {
  background-color: #28a745;
}
#text-input {
  width: 90%;
  padding: 10px 20px;
  border-radius: 5px;
  padding-left: 20px;
  outline: none;
  font-size: 14px;
  font-weight: normal;
  border: 0.5px solid rgb(137, 151, 155);
  transition: border-color 150ms ease-in-out 0s;
  outline: none;
  color: rgb(33, 49, 60);

  background-color: rgb(255, 255, 255);
}
#text-input:hover {
  box-shadow: rgb(231 238 236) 0px 0px 0px 2px;
  border-radius: 7px;
}
#qr-code {
  margin-top: 10px;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
#download-link.show {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}
#qr-code.show {
  opacity: 1;
}
#UPIcss {
  padding-left: 26px;
}
.hep {
  position: relative;
  font-size: 18px;
  justify-self: end;
  padding: 0px 6px;
  text-align: center;
  border-radius: 10px;
  color: rgb(255, 0, 0);
  background-color: #e2d9d9;
  cursor: pointer;
}
:root {
  --hue: 223;
  --bg: hsl(var(--hue), 90%, 90%);
  --fg: hsl(var(--hue), 90%, 10%);
  --primary: hsl(var(--hue), 90%, 50%);
  --trans-dur: 0.3s;
  font-size: 16px; 
}
#loader {
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 1200;
  width: fit-content;
  height: fit-content;
  position: fixed;
  justify-content: center;
  align-items: center;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}
.circle {
  align-items: center;
  justify-content: center;
  position: relative;
  display: inline-block;
  width: fit-content;
  height: 100px;

  padding-left: 80px;
  padding-right: 10px;
}
.loadcenter {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.circle__spokes,
.circle__spokes-spin,
.circle__tire {
  animation: circleBody 3s ease-in-out infinite;
  stroke: var(--primary);
  transition: stroke var(--trans-dur);
}

.circle__spokes,
.circle__tire {
  stroke: currentColor;
}
.circle__spokes {
  animation-name: circleSpokes;
}
.circle__spokes-spin {
  animation-name: circleSpokesSpin;
}
.circle__tire {
  animation-name: circleTire;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 90%, 10%);
    --fg: hsl(var(--hue), 90%, 90%);
  }
}
@keyframes circleSpokes {
  from {
    animation-timing-function: ease-in;
    stroke-dashoffset: -31.416;
  }
  33%,
  67% {
    animation-timing-function: ease-out;
    stroke-dashoffset: -23.562;
  }
  to {
    stroke-dashoffset: -31.416;
  }
}
@keyframes circleSpokesSpin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3turn);
  }
}
@keyframes circleTire {
  from {
    animation-timing-function: ease-in;
    stroke-dashoffset: 56.549;
    transform: rotate(0);
  }
  33% {
    stroke-dashoffset: 0;
    transform: rotate(0.33turn);
  }
  67% {
    animation-timing-function: ease-out;
    stroke-dashoffset: 0;
    transform: rotate(0.67turn);
  }
  to {
    stroke-dashoffset: -56.549;
    transform: rotate(1turn);
  }
}