body{ 
     font-family:monospace;
     background-color:#FFFDE7;
 }
 section{
     padding-top:30px;
     padding-bottom:60px;
 }
 .logo{
     font-size:2.3rem;
     font-weight:700;
     color:#1f2029;
 }
 .logo span{
     font-size:4.6rem;
     font-weight:900;
     color: red;
 }  
 .menu a{
     text-decoration:none;  
     margin-left:10px;
 }
 .menu-lock{
     position:relative;
     max-width: 280px;
     margin: 10px auto;
     z-index: 10;
 }
 .menu a:hover{
     color: #607d8b;
 }
 .header-menu{ 
    position:absolute; 
    top: 60px; 
    left:50%;
    transform:translateX(-50%);
    padding: 10px 13px;
    width: 180px; 
    border-radius: 10px; 
    transition: all 1s;
 }
 .menu-button{
     background: #fff;   
     margin: 0 auto;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 20px;
    box-shadow: 1px 2.3px 1px #eef;
 }
 .header-menu a{
     display:block;  
     width:100%;
     padding: 10px 10px 5px 10px;
     margin-bottom: 7px;
 }
 .action-button{
     border-radius: 25px; 
     font-size:1.3rem;
     line-height: 1;
     padding:10px 23px;
 }
 .card{ 
     padding:30px;
     background: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 20px;
    box-shadow: 1px 2.3px 1px #eef;
 }
 .container-light{
     max-width: 580px;   
     margin: 10px auto;
 }
 .student-card,.card-login{
     max-width:420px;
     margin: 10px auto;
 }
 .student-card:hover{
     background: #eee; 
    box-shadow: 2px 2.3px 1px #eef;
 }
 .student-card .image-box{
     height: 100px;
     width:100px;
     border-radius: 50%;
     padding: 4px;
    box-shadow:1px 2px 1px #ee3;
     overflow:hidden;
 }
 .student-card .image-box img{ 
     height: 90px;
     width:90px;
     border-radius: 50%;
     background-position: center;
 } 
 .profile-card .image-box img{
    width:100px;
    height:100px;
    border-radius: 50%;
 }
 .form-group{
     margin-bottom: 20px;
 } 
 .profile-card.lister a{
     display:block;
     text-decoration:none; 
     border-top: 1px solid #eee;
     padding: 10px 0;
 }
 .footer .menu a{
     display:inline-block; 
 }
 .prev_copy {
    user-select: none;
} 
dialog{ 
    max-width:450px;
    border-radius: 10px;
    border: 0;
    background-color: #fff; 
    animation: rubberBand 1s;
} 
dialog::backdrop{
    background: rgba(0, 0, 0, 0.75);
}
.close_dialog{
    position: absolute;
    border-radius: 50%;
    font-weight:900;
    font-size:1.2rem;
    color: red;
    top: 0;
    right: 0;
} 
.dialog-user-image{
    width:100px;
}
textarea{
    resize:none;
}
.btn{
    margin-bottom:10px;
}

.rubberBand{
  animation: rubberBand 0.75s;
} 
@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}