.blissbook-container{width:100%;min-height:280px;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;justify-content:center;align-items:center;padding:40px 0 60px;display:flex;position:relative}.blissbook{perspective:500px;width:165px;height:96px;position:relative}.shadow{width:60px;height:0;animation:7s infinite shadow;position:absolute;top:160px;left:40px;transform:rotateX(80deg)rotateY(0)rotate(0);box-shadow:0 0 60px 40px #0000004d}.inner{z-index:20;width:165px;height:96px;transform-style:preserve-3d;animation:7s infinite rotate;position:absolute;top:0;left:0;transform:rotateX(-20deg)rotateY(0)rotate(0)}.screen{width:165px;height:96px;transform-style:preserve-3d;transform-origin:50% 93px;background:#ddd linear-gradient(45deg,#00000057 0%,#0000 100%) 0 100%/300px 300px;border-radius:7px;animation:7s infinite lid-screen;position:absolute;bottom:0;left:0;transform:rotateX(0)rotateY(0)rotate(0);box-shadow:inset 0 3px 7px #ffffff80}.screen .logo{image-rendering:auto;width:34px;image-rendering:high-quality;margin:-17px 0 0 -17px;position:absolute;top:50%;left:50%;transform:rotateY(180deg)translateZ(.1px)}.screen .face-one{background:#d3d3d3 linear-gradient(45deg,#0000003d 0%,#0000 100%);border-radius:7px;width:165px;height:96px;position:absolute;bottom:0;left:0;transform:translateZ(2px)}.screen .face-one .camera{background:#000;border-radius:100%;width:2px;height:2px;margin-left:-1px;position:absolute;top:2px;left:50%}.screen .face-one .display{image-rendering:auto;width:155px;height:87px;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast;backface-visibility:hidden;background:#000 50%/100% 100% no-repeat;border-radius:1px;margin:4px 5px;position:relative;box-shadow:inset 0 0 2px #000}.screen .face-one .display .shade{backface-visibility:hidden;background:linear-gradient(-135deg,#fff0 0%,#ffffff1a 47%,#fff0 48%) 0 0/300px 200px;width:155px;height:87px;animation:7s infinite screen-shade;position:absolute;top:0;left:0}.screen .face-one span{color:#666;white-space:nowrap;letter-spacing:.05px;text-rendering:geometricprecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:2px;font-weight:600;position:absolute;top:86px;left:50%;transform:translate(-50%)}.body{width:165px;height:96px;transform-style:preserve-3d;transform-origin:bottom;background:#cbcbcb linear-gradient(45deg,#0000003d 0%,#0000 100%);border-radius:7px;animation:7s infinite lid-body;position:absolute;bottom:0;left:0;transform:rotateX(-90deg)}.body .face-one{width:165px;height:96px;transform-style:preserve-3d;background:#dfdfdf linear-gradient(30deg,#0000003d 0%,#0000 100%);border-radius:7px;animation:7s infinite lid-keyboard-area;position:absolute;bottom:0;left:0;overflow:hidden;transform:translateZ(-2px)}.body .touchpad{background:#cdcdcd linear-gradient(30deg,#0000003d 0%,#0000 100%);border-radius:4px;width:42px;height:36px;margin:-46px 0 0 -21px;position:absolute;top:50%;left:50%;box-shadow:inset 0 0 3px #888}.body .keyboard-image{width:155px;height:45px;transform-style:preserve-3d;backface-visibility:hidden;z-index:1;border-radius:4px;position:absolute;top:41px;left:5px;overflow:visible}.keyboard-graphic{object-fit:fill;backface-visibility:hidden;opacity:1;image-rendering:auto;width:100%;height:100%;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast;border-radius:4px;animation:7s infinite keyboard-glow;display:block;transform:translateZ(-1px)rotate(180deg)scaleX(-1)}.body .pad{background:#333;border-radius:100%;width:5px;height:5px;position:absolute}.pad.one{top:20px;left:20px}.pad.two{top:20px;right:20px}.pad.three{bottom:20px;right:20px}.pad.four{bottom:20px;left:20px}@keyframes rotate{0%{transform:rotateX(-20deg)rotateY(0)rotate(0)}5%{transform:rotateX(-20deg)rotateY(-20deg)rotate(0)}20%{transform:rotateX(30deg)rotateY(200deg)rotate(0)}25%{transform:rotateX(-60deg)rotateY(150deg)rotate(0)}60%{transform:rotateX(-20deg)rotateY(130deg)rotate(0)}65%{transform:rotateX(-20deg)rotateY(120deg)rotate(0)}80%{transform:rotateX(-20deg)rotateY(375deg)rotate(0)}85%{transform:rotateX(-20deg)rotateY(357deg)rotate(0)}87%{transform:rotateX(-20deg)rotateY(360deg)rotate(0)}to{transform:rotateX(-20deg)rotateY(360deg)rotate(0)}}@keyframes lid-screen{0%{background-position:0 100%;transform:rotateX(0)}5%{background-position:0 100%;transform:rotateX(50deg)}20%{background-position:-150px 0;transform:rotateX(-90deg)}25%{background-position:0 100%;transform:rotateX(15deg)}30%{background-position:100% 0;transform:rotateX(-5deg)}38%{background-position:100% 0;transform:rotateX(5deg)}48%{background-position:100% 0;transform:rotateX(0)}90%{background-position:100% 0;transform:rotateX(0)}to{background-position:100%;transform:rotateX(0)}}@keyframes lid-body{0%{transform:rotateX(-90deg)}50%{transform:rotateX(-90deg)}to{transform:rotateX(-90deg)}}@keyframes lid-keyboard-area{0%{background-color:#dfdfdf}50%{background-color:#bbb}to{background-color:#dfdfdf}}@keyframes screen-shade{0%{background-position:-20px 0}5%{background-position:-40px 0}20%{background-position:200px 0}50%{background-position:-200px 0}80%{background-position:0 0}85%{background-position:-30px 0}90%{background-position:-20px 0}to{background-position:-20px 0}}@keyframes keyboard-glow{0%,to{filter:brightness()}50%{filter:brightness(.9)}}@keyframes shadow{0%{transform:rotateX(80deg)rotateY(0)rotate(0);box-shadow:0 0 60px 40px #0000004d}5%{transform:rotateX(80deg)rotateY(10deg)rotate(0);box-shadow:0 0 60px 40px #0000004d}20%{transform:rotateX(30deg)rotateY(-20deg)rotate(-20deg);box-shadow:0 0 50px 30px #0000004d}25%{transform:rotateX(80deg)rotateY(-20deg)rotate(50deg);box-shadow:0 0 35px 15px #0000001a}60%{transform:rotateX(80deg)rotateY(0)rotate(-50deg)translate(30px);box-shadow:0 0 60px 40px #0000004d}to{box-shadow:0 0 60px 40px #0000004d}}.blissbook{transform-origin:50%;transform:scale(1.8)}@media (min-width:640px){.blissbook{transform:scale(1.4)}}@media (min-width:1024px){.blissbook{transform:scale(1.75)}}@media (min-width:1280px){.blissbook{transform:scale(2.1)}}
