/*body {height:100%;background:url(img/background.jpg) no-repeat;background-position:center;background-size:cover;}*/
/* From Uiverse.io by elijahgummer */ 
body {
  width: 100%;
  height: 100%;
  background-color: rgba(173, 216, 230,0.3);
  position: relative;
  overflow: hidden;
}

body::before {
  content: "";
  position: absolute;
  top: 0%;
  left: -50%;
  width: 200%;
  height: 200%;
  /*background: radial-gradient(circle, #3498db 10%, transparent 20%),
    radial-gradient(circle, transparent 10%, #3498db 20%);*/
  background:url(img/logoSIDMAwhite.png) repeat;
  background-size: 500px 200px; /* Adjust the size of the pattern */
  animation: moveBackground 90s linear infinite; /* Adjust the animation duration and timing function */
}

@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {transform: translate(20%, 0%);}
}

.header{height:50px;width:120%;background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(45,86,124,1) 28%, rgba(0,212,255,1) 51%);color:white;position:relative;top: -8px;left: -8px;border-bottom:solid 1px;border-bottom-color:transparent;}

.wrapper{
    height:430px;
    width:400px;
    margin:auto;
    margin-top:50px;
    text-align:center;
    border:1px solid rgb(241,241,241);
    border-radius:12px;
    padding:10px 20px;
    background:transparent;
    /*background-color:lightgrey;*/
    backdrop-filter: blur(8px);
    box-shadow:5px 10px 10px 10px rgba(0,0,0,0.5);
}

.wrapper h2{
    font-size:50px;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(45,86,124,1) 28%, rgba(0,212,255,1) 81%); /* Gradient colors */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* For webkit browsers */
    background-clip: text; /* For other browsers */
}

.input-field{
    position:relative;
}

#txtUName, #txtPass{
    border-radius:10px;
    background:transparent;
    margin:10px;
    border:2px solid rgb(0,0,0);
    width:280px;
    color:black;
    padding:20px 40px 20px 20px;
    backdrop-filter: blur(15px);
}

input::placeholder{
    color:rgb(0,0,0);
}

.input-field #txtUName:focus::placeholder, .input-field #txtPass:focus::placeholder{
    transform:translate(-100%);
    transition: transform 0.2s ease-in-out;
    font-size:14px;
}

.input-field #txtUName:not(:focus)::placeholder, .input-field #txtPass:not(:focus)::placeholder{
    transform:translate(0%);
    transition: transform 0.2s ease-in-out;
    font-size:16px;
}

.sec-err{
    margin-top:5px;
    height:30px;
    display:inline-flexbox;
    font-size:18px;
    color:red;
    font-weight: 100;
    animation: pulse 1.5s infinite; /* Animation properties */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05); /* Scale up */
        opacity: 1; /* Slightly fade out */
    }
    100% {
        transform: scale(1);
        opacity: 1; /* Scale back to original */
    }
}

#form1{
    margin-top:60px;
}

.btn-field{
    margin-top:15px;
}
/* From Uiverse.io by aasisodiya */ 
.login {
 background-color: #0a78bd;
 border: none;
 padding: 1rem;
 font-size: 1rem;
 width: 10em;
 border-radius: 1rem;
 color: white;
 box-shadow: 0 0.4rem black;
 cursor: pointer;
}

.login:active {
 color: white;
 box-shadow: 0 0.2rem #dfd9d9;
 transform: translateY(0.2rem);
}

.login:hover:not(:disabled) {
 background: rgba(45,86,124,1);
 color: white;
 text-shadow: 0 0.09rem #bcb4b4;
}

.login:disabled {
 cursor: auto;
 color: grey;
}