.card{width:350px;height:420px;background:black;border-radius:32px;padding:3px;position:relative;box-shadow:0 70px 30px -50px #00000030;transition:all .3s ease-in-out;cursor:pointer}.card .mail{position:absolute;right:2rem;top:1.4rem;background:transparent;border:none;z-index:4;cursor:pointer}.card .mail svg{stroke:green;stroke-width:3px;filter:blur(1px)}.card .mail svg:hover{stroke:darkgreen;filter:blur(0)}.card .profile-pic{position:absolute;width:calc(100% - 6px);height:calc(100% - 6px);top:3px;left:3px;border-radius:29px;z-index:1;border:3px solid #daa520;overflow:hidden;transition:all .3s ease-in-out,z-index .3s ease-in-out}.card .profile-pic img,.card .profile-pic svg{object-fit:cover;width:100%;height:100%;object-position:center;transition:all .3s ease-in-out}.card .profile-pic svg{transform-origin:45% 20%}.card .bottom{position:absolute;bottom:3px;left:3px;right:3px;background:#2d2d2d;top:80%;border-radius:29px;z-index:2;box-shadow:inset 0 5px 5px 0 rgba(0,0,0,.188);overflow:hidden;transition:all .3s cubic-bezier(.645,.045,.355,1)}.card .bottom .content{position:absolute;bottom:0;left:1.5rem;right:1.5rem;height:280px}.card .bottom .content .name{display:block;font-size:1.2rem;color:white;font-weight:700}.card .bottom .content .about-me{display:block;font-size:.9rem;color:white;margin-top:1rem}.card .bottom .content .details{margin-top:1rem;font-size:.9rem;color:white;display:flex;flex-direction:column;gap:.5rem;border-top:1px solid rgba(255,255,255,.2);padding-top:1rem}.card .bottom .content .details p{margin:0;line-height:1.4;word-wrap:break-word}.card .bottom .content .details strong{font-weight:600;color:#DAA520}.card .bottom .bottom-bottom{position:absolute;bottom:1rem;left:1.5rem;right:1.5rem;display:flex;align-items:center;justify-content:space-between}.card .bottom .bottom-bottom .social-links-container{display:flex;gap:1rem}.card .bottom .bottom-bottom .social-links-container svg{height:20px;fill:white;filter:drop-shadow(0 5px 5px rgba(0,0,0,.133))}.card .bottom .bottom-bottom .social-links-container svg:hover{fill:#DAA520;transform:scale(1.2)}.card .bottom .bottom-bottom .button{background:white;color:#2d2d2d;border:none;border-radius:20px;font-size:.6rem;padding:.4rem .6rem;box-shadow:0 5px 5px 0 rgba(0,0,0,.133);cursor:pointer}.card .bottom .bottom-bottom .button:hover{background:#DAA520;color:white}.card.active,.card:hover{border-top-left-radius:55px}.card.active .bottom,.card:hover .bottom{top:20%;border-radius:80px 29px 29px 29px}.card.active .profile-pic,.card:hover .profile-pic{width:100px;height:100px;aspect-ratio:1;top:10px;left:10px;border-radius:50%;z-index:3;border:7px solid #daa520;box-shadow:0 5px 5px 0 rgba(0,0,0,.188)}.card.active .profile-pic:hover,.card:hover .profile-pic:hover{transform:scale(1.3);border-radius:0}.card.active .profile-pic img,.card.active .profile-pic svg,.card:hover .profile-pic img,.card:hover .profile-pic svg{object-position:center;transition:all .3s ease-in-out}@media (min-width:768px){.card{width:400px;height:480px}}