.card{background:#fff;border:2px solid #e4e6eb;border-radius:32px;width:100%;max-width:280px;height:280px;margin:0 auto;padding:3px;transition:all .5s ease-in-out;position:relative;box-shadow:0 10px 30px -10px rgba(30,41,59,.1)}.card .mail{background:0 0;border:none;position:absolute;top:1.4rem;right:2rem}.card .mail svg{stroke:#1e293b;stroke-width:3px}.card .mail svg:hover{stroke:#64748b}.card .profile-pic{z-index:1;border:0 solid #1e293b;border-radius:29px;width:calc(100% - 6px);height:calc(100% - 6px);transition:all .5s ease-in-out .2s,z-index .5s ease-in-out .2s;position:absolute;top:3px;left:3px;overflow:hidden}.card .profile-pic img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%;height:100%;transition:all .5s ease-in-out}.card .profile-pic svg{-o-object-fit:cover;object-fit:cover;-o-object-position:0px 0px;object-position:0px 0px;transform-origin:45% 20%;width:100%;height:100%;transition:all .5s ease-in-out}.card .bottom{z-index:2;background:#eef2ff;border-radius:29px;transition:all .5s cubic-bezier(.645,.045,.355,1);position:absolute;top:80%;bottom:3px;left:3px;right:3px;overflow:hidden;box-shadow:inset 0 2px 5px rgba(30,41,59,.05)}.card .bottom .content{height:160px;position:absolute;bottom:0;left:1.5rem;right:1.5rem}.card .bottom .content .name{color:#1e293b;font-size:1.2rem;font-weight:700;display:block}.card .bottom .content .about-me{color:#64748b;margin-top:1rem;font-size:.9rem;display:block}.card .bottom .bottom-bottom{justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:1rem;left:1.5rem;right:1.5rem}.card .bottom .bottom-bottom .social-links-container{gap:1rem;display:flex}.card .bottom .bottom-bottom .social-links-container svg{fill:#1e293b;filter:drop-shadow(0 2px 3px rgba(30,41,59,.1));height:20px}.card .bottom .bottom-bottom .social-links-container svg:hover{fill:#64748b;transform:scale(1.2)}.card .bottom .bottom-bottom .social-links-container a{transition:all .3s;display:inline-block}.card .bottom .bottom-bottom .button{color:#1e293b;cursor:pointer;background:#fff;border:1px solid #e4e6eb;border-radius:20px;padding:.4rem .6rem;font-size:.6rem;font-weight:600;box-shadow:0 2px 5px rgba(30,41,59,.05)}.card .bottom .bottom-bottom .button:hover{color:#1e293b;background:#eef2ff;border-color:#94a3b8}.card:hover{border-color:#94a3b8;border-top-left-radius:55px;box-shadow:0 15px 40px -15px rgba(30,41,59,.15)}.card:hover .bottom{border-radius:80px 29px 29px;transition:all .5s cubic-bezier(.645,.045,.355,1) .2s;top:20%}.card:hover .profile-pic{aspect-ratio:1;z-index:3;border:4px solid #e4e6eb;border-radius:50%;width:100px;height:100px;transition:all .5s ease-in-out,z-index .5s ease-in-out .1s;top:10px;left:10px;box-shadow:0 5px 10px rgba(30,41,59,.1)}.card:hover .profile-pic:hover{border-radius:0;transform:scale(1.3)}.card:hover .profile-pic img{-o-object-position:center;object-position:center;transition:all .5s ease-in-out .5s;transform:scale(1)}.card:hover .profile-pic svg{transition:all .5s ease-in-out .5s;transform:scale(1)}
.pencil{width:10em;height:10em;display:block}.pencil__body1,.pencil__body2,.pencil__body3,.pencil__eraser,.pencil__eraser-skew,.pencil__point,.pencil__rotate,.pencil__stroke{animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite}.pencil__body1,.pencil__body2,.pencil__body3{transform:rotate(-90deg)}.pencil__body1{animation-name:pencilBody1}.pencil__body2{animation-name:pencilBody2}.pencil__body3{animation-name:pencilBody3}.pencil__eraser{animation-name:pencilEraser;transform:rotate(-90deg)translate(49px)}.pencil__eraser-skew{animation-name:pencilEraserSkew;animation-timing-function:ease-in-out}.pencil__point{animation-name:pencilPoint;transform:rotate(-90deg)translate(49px,-30px)}.pencil__rotate{animation-name:pencilRotate}.pencil__stroke{animation-name:pencilStroke;transform:translate(100px,100px)rotate(-113deg)}@keyframes pencilBody1{0%,to{stroke-dashoffset:351.86px;transform:rotate(-90deg)}50%{stroke-dashoffset:150.8px;transform:rotate(-225deg)}}@keyframes pencilBody2{0%,to{stroke-dashoffset:406.84px;transform:rotate(-90deg)}50%{stroke-dashoffset:174.36px;transform:rotate(-225deg)}}@keyframes pencilBody3{0%,to{stroke-dashoffset:296.88px;transform:rotate(-90deg)}50%{stroke-dashoffset:127.23px;transform:rotate(-225deg)}}@keyframes pencilEraser{0%,to{transform:rotate(-45deg)translate(49px)}50%{transform:rotate(0)translate(49px)}}@keyframes pencilEraserSkew{0%,32.5%,67.5%,to{transform:skew(0)}35%,65%{transform:skew(-4deg)}37.5%,62.5%{transform:skew(8deg)}40%,45%,50%,55%,60%{transform:skew(-15deg)}42.5%,47.5%,52.5%,57.5%{transform:skew(15deg)}}@keyframes pencilPoint{0%,to{transform:rotate(-90deg)translate(49px,-30px)}50%{transform:rotate(-225deg)translate(49px,-30px)}}@keyframes pencilRotate{0%{transform:translate(100px,100px)rotate(0)}to{transform:translate(100px,100px)rotate(720deg)}}@keyframes pencilStroke{0%{stroke-dashoffset:439.82px;transform:translate(100px,100px)rotate(-113deg)}50%{stroke-dashoffset:164.93px;transform:translate(100px,100px)rotate(-113deg)}75%,to{stroke-dashoffset:439.82px;transform:translate(100px,100px)rotate(112deg)}}
.btn-class-name{--primary:255,90,120;--secondary:150,50,60;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;outline:none;outline:10px solid rgb(var(--primary),.5);border:none;border-radius:100%;width:60px;height:50px;transition:all .3s;position:relative}.btn-class-name .back{background:rgb(var(--secondary));border-radius:100%;width:100%;height:100%;position:absolute;top:0;left:0}.btn-class-name .front{background:linear-gradient(0deg,rgba(var(--primary),.6)20%,rgba(var(--primary))50%);box-shadow:0 .5em 1em -.2em rgba(var(--secondary),.5);border:1px solid rgb(var(--secondary));width:100%;height:100%;color:rgb(var(--secondary));border-radius:100%;justify-content:center;align-items:center;font-family:inherit;font-size:1.2rem;font-weight:600;transition:all .15s;display:flex;position:absolute;top:0;left:0;transform:translateY(-15%)}.btn-class-name:active .front{transform:translateY(0%);box-shadow:0 0}