.app{margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2em}.app h1{font-size:3.5rem;font-weight:200;letter-spacing:-2px;text-align:center;margin-top:50px;color:#16161671}.app p{color:#000}.app .students{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:4rem;margin-top:20px}.app .form{display:flex;flex-direction:column;justify-content:flex-start;margin-top:30px;width:300px;height:680px}.app .form label{color:#000}.app .form input{color:#000;margin:5px 0 12px;padding:8px;border:none;border-radius:3px;width:100%;font-size:1rem}.app .form .form-button{width:160px;font-size:1rem;color:#fff;background-color:#7a8386ce;border:none;padding:10px 20px;margin-top:30px;cursor:pointer;text-decoration:none}.app .form .form-button:hover{background-color:#697174}.app .button-group{display:flex}.app .button-group .form-button{margin:10px}.button{font-size:1rem;color:#fff;background-color:#7a8386ce;border:none;padding:10px 20px;margin:25px 0 100px;cursor:pointer;width:160px;text-decoration:none}.button:hover{background-color:#697174}.card{background-color:#fff;border-radius:5px;width:350px;height:300px;padding-left:20px;line-height:30px;box-shadow:#32325d33 0 50px 100px -20px,#0000001a 0 30px 60px -30px}.card .profile-image{position:relative;top:20px;left:230px;width:80px;height:80px;background-color:#96a6aa;margin-bottom:-22px}.card h3{color:#00000086;border-bottom:1.5px solid rgb(187,187,187);margin:0 25px 20px 0}.card button{width:145px;font-size:1rem;color:#fff;background-color:#8c9a9ece;border:none;padding:10px 12px;margin-top:30px;margin-right:20px;cursor:pointer}.card button:hover{background-color:#697174}.card .btn-delete-student:hover{background-color:#ac3101}.card:hover{box-shadow:#32325d4d 0 50px 100px -20px,#0003 0 30px 60px -30px}.student-details{width:800px;height:550px;background-color:#fff;padding-left:40px;line-height:30px;border-radius:5px;box-shadow:#32325d33 0 50px 100px -20px,#0000001a 0 30px 60px -30px}.profile-image{position:relative;top:55px;left:590px;width:120px;height:120px;background-color:#96a6aa;margin-bottom:-22px}h2{font-size:2rem;font-weight:200;letter-spacing:-2px;padding-left:10px;color:#00000086;margin:50px 40px 0 0}h4{font-size:1.3rem;color:#00000057;padding-bottom:10px}.student-infos{display:flex;flex-direction:row;width:700px;height:250px;position:relative;top:50px;left:10px;padding:30px;background-color:#d2dde046}.student-contact{position:relative;top:-30px;left:150px;padding:30px}@media (max-width: 720px){.student-details{display:flex;flex-direction:column;width:350px;height:700px}.student-details .profile-image{position:relative;left:73px;top:40px;margin-bottom:30px}.student-details h2{padding:0;text-align:center}.student-details .student-infos{flex-direction:column;position:relative;top:30px;left:-20px;width:310px;height:400px}.student-details .student-contact{position:relative;top:5px;left:-32px;width:310px}}*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;color:#fff}html,body{background-color:#d2dde0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}