*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif;}
body, html{height:100%;}

.login-screen{
  background: url('https://cdn.pixabay.com/photo/2017/08/10/03/58/classroom-2613748_1280.jpg') center/cover no-repeat;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.overlay{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.45);
  display:flex;
  justify-content:center;
  align-items:center;
}
.login-box{
  background: rgba(255,255,255,0.95);
  padding: 40px 50px;
  border-radius: 12px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  display:flex;
  flex-direction: column;
  gap: 12px;
  min-width: 300px;
}
.login-box h1{color:#1a73e8;margin-bottom:16px;}
.login-box input{padding:10px;border-radius:6px;border:1px solid #ccc;font-size:16px;}
.login-box button{padding:12px 28px;background:#1a73e8;color:#fff;border:none;border-radius:8px;font-weight:bold;cursor:pointer;transition: background 0.3s;}
.login-box button:hover{background:#155ab6;}
#errorMsg{color:red;font-size:14px;display:none;margin-top:6px;}

.page-container{max-width: 900px;margin: 50px auto;padding: 20px;text-align:center;}
.page-container h1{color:#1a73e8;margin-bottom:24px;}
.lesson{background: rgba(230,230,230,0.9);padding: 20px;margin-bottom:20px;border-radius:8px;}
.lesson h2{color:#155ab6;margin-bottom:8px;}
.lesson a{display:inline-block;margin-top:10px;padding:10px 20px;background:#1a73e8;color:#fff;text-decoration:none;border-radius:6px;transition: background 0.3s;}
.lesson a:hover{background:#155ab6;}
.back-btn{display:inline-block;margin-top:20px;padding:10px 20px;background:#777;color:#fff;text-decoration:none;border-radius:6px;transition: background 0.3s;}
.back-btn:hover{background:#555;}