html,body{margin:0;padding:0;width:100%;height:100%;font-family:Helvetica,sans-serif}*,*:before,*:after{box-sizing:border-box}#bg{width:100%;height:100%;z-index:-1;position:absolute;left:0;top:0;pointer-events:none;background:linear-gradient(to top, #f781fb, #9bdaf6)}#bg canvas{width:100%;height:100%}#main{padding:50px;perspective:50vw}#main nav{width:100%;min-height:100px;margin:0 auto;transform:rotateZ(-1deg) rotateX(-2deg) scale(0.99);transform-origin:33% center;transition:transform 120ms ease-in-out,box-shadow 100ms ease-in-out}#main nav:hover{transform:rotate(0deg) rotateX(-2deg) scale(1.02);box-shadow:0 8px 40px rgba(0,0,0,.1)}.glass{border-radius:25px;background-color:rgba(255,255,255,.1);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);box-shadow:0 4px 30px rgba(0,0,0,.1);border:1px solid rgba(255,255,255,.3)}.photo{width:auto;max-width:250px;position:relative;height:auto;padding:0;padding-top:20px;aspect-ratio:1/1;box-sizing:border-box;background-size:90% auto;background-position:bottom center;background-repeat:no-repeat;border-radius:50%;margin-top:80px;margin-left:10vw;image-rendering:pixelated;transform:rotateZ(5deg) rotateY(4deg);transition:transform 220ms ease-in-out,box-shadow 100ms ease-in-out}.photo:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background-image:linear-gradient(to right, #f781fb, #2486fe);mix-blend-mode:hard-light;opacity:.2}.photo:hover{transform:rotateZ(2deg) rotateY(2deg) scale(1.05);box-shadow:0 8px 40px rgba(0,0,0,.1)}.name{position:absolute;right:33%;top:300px;transform:translateX(50%) rotateY(-10deg) rotateZ(2deg);transition:transform 120ms ease-in-out;padding:0 50px}.name.shine:after{animation-duration:8s;animation-delay:4s}.name:hover{transform:translateX(50%) rotateY(-5deg) rotateZ(1deg)}h1{font-size:42px;background-color:rgba(255,255,255,.75);color:rgba(0,0,0,0);text-shadow:1px 1px 0 rgba(252,105,252,.4),-1px -1px 0 rgba(105,147,252,.4);-webkit-background-clip:text;-moz-background-clip:text;background-clip:text}.shine{overflow:hidden}.shine:after{content:"";top:0;transform:translateX(100%);width:100%;height:100%;position:absolute;z-index:1;animation:slide 6s infinite;opacity:.25;background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff", endColorstr="#007db9e8",GradientType=1 )}@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}