body {
  background: linear-gradient(to top, #8C8CFF, #ffffff) no-repeat;
  background-attachment: fixed;
}
  .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
  width: min(88%, 800px); /* adjust container width */
  margin: 0 auto; /* center container */
  padding: 5px;
   /* optional */
}
.login-container{
  padding-left:20px;
  padding-right:20px;
  padding-bottom:20px;
  color:#000;
  font-family: calibri,roboto,comic-sans;
}
.grid-item {
  background:#fff;
  padding:8px;
  width:80%;
  height:80px;
  display: inline-grid;
  
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 10px;
  font-family: calibri,roboto,comic-sans;
  font-size:16px;
  text-align: center;
  cursor: pointer;
}
.grid-item img{
  width:55% ;
  margin:2px auto;
}
.bg-img{
  align-items: center;
  width: 90%;
}
.heading{
  padding:8px;
}
.input{
  width: 90%;
  padding:10px;
  border:none;
  outline:none;
  border-radius:30px;
  margin-top: 15px;
}

.input-select{
  width: 95%;
  padding:10px;
  border:none;
  outline:none;
  border-radius:30px;
  margin-top: 15px;
}

.submit-btn{
  background: #0033CC;
  color:#fff;
  padding:10px;
  border-radius: 30px;
  width:90% ;
  margin-top: 15px;
  border:none;
  font-size: 20px;
  
}
.footer{
  color:#fff;
  bottom:0px;
  text-align: center;
  font-family: calibri,roboto,sans-serif;
}
.teacher{
  background:#00CC33;
  color:#fff;
  padding:10px;
  border-radius:30px;
  width:80%;
  margin-bottom:10px;
  font-size: 18px;
  font-family: calibri,roboto,sans-serif;
}
.admin{
  background: #0066FF;
  color:#fff;
  padding:10px;
  border-radius:30px;
  width:80%;
  margin-bottom:15px;
  font-size: 18px;
  font-family: calibri,roboto,sans-serif;
}