/* for admin login and registration panel */
.glow-bg {
  background: linear-gradient(45deg, #6512b9, #4d5ab3, #5aabde);
  background-size: 1000%;
  z-index: -1;
  animation: glower 20s linear infinite;
}

.glass-box {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* https://codepen.io/deepak_96/pen/ExNLEpY */
.glow-box {
  background: linear-gradient(45deg, #e8f74d, #ff6600d9, #00ff66, #13ff13, #ad27ad, #bd2681, #6512b9, #ff3300de, #5aabde);
  background-size: 1000%;
  z-index: -1;
  animation: glower 20s linear infinite;
}
.us-box {
  /* background image */
  background-image: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/usa-flag-white-stars-on-blue-background-seamless-pattern-vector-illustration-mohamed-rasik.jpg");
  background-size: 400%;
  z-index: -1;
  animation: glower 30s linear infinite;
}
.custom-box {
  /* custom background image */
  background-image: var(--img);
  background-size: var(--imgsize);
  z-index: -1;
  animation: glower 30s linear infinite;
}
.glow-box-size {
  border-radius: 25px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
}

.glowbox {
  position: relative;
  height: 150px;
  width: 350px;
  padding-left: 20px;
  color: #fff;
  font: 700 2rem 'Source Sans Pro', serif;
  display: block;
  background: linear-gradient(0deg, #1e2a3f, #122139);
  border-radius: 25px;
  z-index: 1;
}

.glowing::before{
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  background: linear-gradient(45deg, #e8f74d, #ff6600d9, #00ff66, #13ff13, #ad27ad, #bd2681, #6512b9, #ff3300de, #5aabde);
  background-size: 400%;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  z-index: -1;
  animation: glower 20s linear infinite;
  border-radius: 25px;
}

@keyframes glower {
  0% {
    background-position: 0 0;
  }
  
  50% {
    background-position: 100% 0;
  }
  
  100% {
    background-position: 0 0;
  }
}

/* colors */
.red {
    background: linear-gradient(45deg, #cf4444, #9c0823);
}
.orange {
    background: linear-gradient(45deg, #d17b30, #9c5908);
}
.yellow {
    background: linear-gradient(45deg, #cfcf44, #979c08);
}
.green {
    background: linear-gradient(45deg, #44cf5d, #149c08);
}
.blue {
    background: linear-gradient(45deg, #44a5cf, #08269c);
}
.pink {
    background: linear-gradient(45deg, #e63cd7, #9c086d);
}
.purple {
    background: linear-gradient(45deg, #9a44cf, #7e089c);
}
.black {
    background: linear-gradient(45deg, #000, #444444);
}
.white {
    background: linear-gradient(45deg, #fff, #dadada);
}