@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url(banner.jpg) no-repeat center center; 
  background-size: cover;
  overflow: hidden;
}


.container{
  width: 420px;
  position: relative;
  padding: 3px; 
  border-radius: 18px; 
  overflow: hidden; 
}


.container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    45deg,
    #ff595e,
    #ffca3a,
    #8ac926,
    #1982c4,
    #6a4c93,
    #ff6700
  );
  background-size: 400%;
  z-index: -2;
  animation: glow 20s linear infinite;
}


.container::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: inherit;
  z-index: -1;
  filter: blur(25px);
  transform: scale(1.1); 
}

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


.container form {
  background: rgba(25, 20, 35, 0.75); 
  backdrop-filter: blur(10px);
  color: #FFF;
  padding: 30px 40px;
  border-radius: 16px; 
  width: 100%;
  height: 100%;
}

.container h1 {
  font-size: 36px;
  text-align: center;
  font-weight: 700;
}

.input-box{
  position: relative;
  width: 100%;
  height: 50px;
  margin: 30px 0;
}

.input-box input{
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  color: #FFF;
  padding: 0 45px 0 20px;
  outline: none;
}

.input-box input::placeholder{
  color: #DDD;
}

.input-box i{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}

.remember-forgot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14.5px;
  margin: -15px 0 15px;
}

.remember-forgot label {
    display: flex;
    align-items: center;
}

.remember-forgot label input{
  accent-color: #FFF;
  margin-right: 5px;
}

.remember-forgot a {
  color: #FFF;
  text-decoration: none;
}

.remember-forgot a:hover{
  text-decoration: underline;
}

.login:hover{
  background-color: transparent;
  border: 2px solid white;
  color: white;
  transition:  0.5s;
}

button{
  width: 100%;
  height: 45px;
  background-color: #FFF;
  border: none;
  outline: none;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
  cursor: pointer;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.register-link{
  font-size: 14.5px;
  text-align: center;
  margin-top: 20px;
}

.register-link p a{
  color: #FFF;
  text-decoration: none;
  font-weight: 600;
}

.register-link p a:hover{
  text-decoration: underline;
}

:root {
  --shadows-small: 792px 1431px #FFF, 195px 632px #FFF, 1553px 1358px #FFF, 1565px 1078px #FFF, 1782px 1011px #FFF, 1930px 1563px #FFF, 1332px 1269px #FFF, 384px 119px #FFF, 1162px 1481px #FFF, 247px 1836px #FFF, 1423px 25px #FFF, 1373px 1544px #FFF, 1139px 1238px #FFF, 1121px 1138px #FFF, 1305px 1980px #FFF, 1284px 1113px #FFF, 1038px 104px #FFF, 1018px 1243px #FFF, 1184px 170px #FFF, 239px 932px #FFF, 1323px 1503px #FFF, 1033px 1399px #FFF, 343px 1845px #FFF, 38px 1092px #FFF, 1928px 1153px #FFF, 1113px 1869px #FFF, 1794px 1840px #FFF, 1055px 189px #FFF, 1695px 1374px #FFF, 362px 1803px #FFF, 1538px 393px #FFF, 100px 1853px #FFF, 123px 83px #FFF, 1488px 1531px #FFF, 582px 114px #FFF, 1952px 1317px #FFF, 1126px 1526px #FFF, 1211px 446px #FFF, 1205px 121px #FFF, 622px 1512px #FFF, 47px 1502px #FFF, 130px 1063px #FFF, 1136px 741px #FFF, 1216px 129px #FFF, 281px 1332px #FFF, 1673px 1709px #FFF, 885px 112px #FFF, 1913px 763px #FFF, 1488px 145px #FFF, 489px 138px #FFF;
  --shadows-medium: 1390px 1746px #FFF, 142px 1532px #FFF, 1572px 1203px #FFF, 1169px 1583px #FFF, 606px 1386px #FFF, 1551px 745px #FFF, 597px 1135px #FFF, 110px 1228px #FFF, 1788px 1330px #FFF, 1022px 1391px #FFF, 1109px 1516px #FFF, 1214px 1279px #FFF, 1151px 1916px #FFF, 65px 1897px #FFF, 638px 1706px #FFF, 143px 512px #FFF, 694px 697px #FFF, 1901px 1699px #FFF, 1525px 957px #FFF, 1032px 1307px #FFF;
  --shadows-big: 1113px 1158px #FFF, 1515px 1196px #FFF, 1813px 1888px #FFF, 95px 1018px #FFF, 1195px 140px #FFF, 90px 1083px #FFF, 1856px 1452px #FFF, 599px 116px #FFF, 1675px 1146px #FFF, 1269px 233px #FFF;
}

#stars, #stars2, #stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  animation: animStar linear infinite;
  z-index: -5;
}

#stars { width: 1px; height: 1px; box-shadow: var(--shadows-small); animation-duration: 50s; }
#stars2 { width: 2px; height: 2px; box-shadow: var(--shadows-medium); animation-duration: 100s; }
#stars3 { width: 3px; height: 3px; box-shadow: var(--shadows-big); animation-duration: 150s; }
#stars:after, #stars2:after, #stars3:after { content: " "; position: absolute; top: 2000px; background: transparent; width: inherit; height: inherit; box-shadow: inherit; }

@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}