body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(to bottom right, #f0f0f0, #dedede);
    color: #000;
}
.picture-frame { width: 130px; height: 130px; border: 3px solid #663399; border-radius: 10px; display: flex; align-items: center; justify-content: center;  margin: 10px auto 10px; padding: 15px 15px 15px 15px; }
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 120px;
  }
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.student-signin-btn {
    background-color: #2c004b;
    color: #fff;
}
.student-signin-btn:hover {
    background-color: #250042;
    color: #fff;
}
.student-create-btn {
    background-color: #4a0180;
    color: #fff;
}
.student-create-btn:hover {
    background-color: #36015e;   
}
.staff-signin-btn {
    background-color: #1a47c2;
    color: #fff;
}
.staff-signin-btn:hover {
    background-color: #1741b7;
    color: #fff;
}
.staff-create-btn {
    background-color: #2768f3;
    color: #fff;
}
.staff-create-btn:hover {
    background-color: #225bd8;
}