:root{
  --primary:#2ecc71;
  --secondary:#27ae60;
  --dark:#2c3e50;
  --light:#ecf0f1;
  --box-bg:rgba(255,255,255,0);
}

*{box-sizing:border-box}

body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  min-height:100vh;
  color:var(--dark);
  overflow:hidden;
  position:relative;
  background:url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?q=80&w=1613&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center fixed;
  background-size:cover;
}

.background-elements{position:absolute; inset:0; z-index:-1}

.wind-turbine{
  position:absolute; width:100px; height:150px; bottom:-50px; right:10%;
  animation:spin 8s linear infinite;
}
.solar-panel{
  position:absolute; width:120px; height:80px; bottom:20px; left:5%;
  opacity:.7; animation:float 6s ease-in-out infinite;
}

.leaf{
  position:absolute; width:40px; height:40px; opacity:.6;
  animation:falling 15s linear infinite;
}

@keyframes spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes falling{
  0%{transform:translate(0,-100px) rotate(0); opacity:0}
  10%{opacity:.6}
  90%{opacity:.6}
  100%{transform:translate(calc(var(--random-x)*100px), calc(100vh + 100px)) rotate(360deg); opacity:0}
}

.login-container{
  background:var(--box-bg);
  border-radius:15px;
  box-shadow:none;
  width:450px;
  padding:40px;
  position:relative;
  overflow:hidden;
  backdrop-filter:none;
  border:none;
  margin-bottom:50px;
}

h2{
  text-align:center; margin-bottom:30px; color:#fff; font-weight:600;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
}

.logo{ text-align:center; margin-bottom:20px; }
.logo img{ width:80px; height:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

.energy-icon{ text-align:center; margin-bottom:20px; animation:float 4s ease-in-out infinite; }
.energy-icon img{ width:60px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

input{
  width:100%; padding:12px 15px; margin-bottom:20px;
  border:1px solid rgba(255,255,255,.3); border-radius:5px; font-size:16px;
  transition:all .3s; background:rgba(255,255,255,.8);
}
input:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(46,204,113,.2);
  outline:none; background:rgba(255,255,255,.9);
}
input[type="submit"]{
  background:linear-gradient(to right, var(--primary), var(--secondary));
  color:#fff; border:none; cursor:pointer; font-weight:600;
  text-transform:uppercase; letter-spacing:1px; transition:all .3s;
}
input[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 5px 15px rgba(46,204,113,.4); }

.captcha-container{
  display:flex; align-items:center; margin-bottom:20px;
  background:rgba(248,249,250,.7); padding:10px; border-radius:5px;
}
.captcha-container label{ margin-right:10px; font-weight:500; color:var(--dark); }
.captcha-input{ width:60px; margin-bottom:0; }

.facts-container{ margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.3) }
.facts-container h3{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.3) }
.fact-item{ display:flex; align-items:center; margin-bottom:10px; font-size:14px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3) }
.fact-item i{ color:var(--primary); margin-right:10px; font-size:18px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)) }

.footer{ text-align:center; margin-top:20px; font-size:12px; color:rgba(255,255,255,.8) }

.register-link{ text-align:center; margin-top:15px }
.register-link a{ color:#fff; text-decoration:none; font-weight:500; transition:all .3s; text-shadow:0 1px 2px rgba(0,0,0,.3) }
.register-link a:hover{ color:var(--primary); text-decoration:underline }