body{justify-content:center;align-items:center;height:100vh;display:flex}.card{background:#67e1ff;border-radius:10px;width:190px;height:254px;font-size:30px;font-weight:900;transition:all .4s;box-shadow:0 0 10px 5px #000000b4}.card:hover{cursor:pointer;background:#6797ff;border-radius:15px;transform:scale(1.2);box-shadow:0 0 10px 5px #000000b4}.first-content{opacity:1;border-radius:15px;justify-content:center;align-items:center;width:100%;height:100%;transition:all .4s;display:flex}.card:hover .first-content{opacity:0;height:0}.second-content{opacity:0;border-radius:15px;justify-content:center;align-items:center;width:100%;height:0%;font-size:0;transition:all .4s;display:flex;transform:rotate(90deg)scale(-1)}.card:hover .second-content{opacity:1;height:100%;font-size:1.8rem;transform:rotate(0)}span{font-size:3rem}.container{gap:50px;display:flex}.macbook{perspective:500px;width:150px;height:96px;margin:-85px 0 0 -78px;position:absolute;top:50%;left:50%}.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:150px;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:150px;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{width:20px;height:24px;margin:-12px 0 0 -10px;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:150px;height:96px;position:absolute;bottom:0;left:0;transform:translateZ(2px)}.screen .face-one .camera{background:#000;border-radius:100%;width:3px;height:3px;margin-left:-1.5px;position:absolute;top:4px;left:50%}.screen .face-one .display{background-color:#000;background-size:100% 100%;border-radius:1px;width:130px;height:74px;margin:10px;position:relative;box-shadow:inset 0 0 2px #000}.screen .face-one .display .shade{background:linear-gradient(-135deg,#fff0 0%,#ffffff1a 47%,#fff0 48%) 0 0/300px 200px;width:130px;height:74px;animation:7s infinite screen-shade;position:absolute;top:0;left:0}.screen .face-one span{color:#666;font-size:6px;position:absolute;top:85px;left:57px}.macbody{width:150px;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-macbody;position:absolute;bottom:0;left:0;transform:rotateX(-90deg)}.macbody .face-one{width:150px;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;transform:translateZ(-2px)}.macbody .touchpad{background:#cdcdcd linear-gradient(30deg,#0000003d 0%,#0000 100%);border-radius:4px;width:40px;height:31px;margin:-44px 0 0 -18px;position:absolute;top:50%;left:50%;box-shadow:inset 0 0 3px #888}.macbody .keyboard{width:130px;height:45px;transform-style:preserve-3d;background:#cdcdcd linear-gradient(30deg,#0000003d 0%,#0000 100%);border-radius:4px;padding:0 0 0 2px;position:absolute;top:41px;left:7px;box-shadow:inset 0 0 3px #777}.keyboard .key{float:left;background:#444;border-radius:2px;width:6px;height:6px;margin:1px;animation:7s infinite keys;transform:translateZ(-2px);box-shadow:0 -2px #222}.key.space{width:45px}.key.f{height:3px}.macbody .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-macbody{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 keys{0%{box-shadow:0 -2px #222}5%{box-shadow:1px -1px #222}20%{box-shadow:-1px 1px #222}25%{box-shadow:-1px 1px #222}60%{box-shadow:-1px 1px #222}80%{box-shadow:0 -2px #222}85%{box-shadow:0 -2px #222}87%{box-shadow:0 -2px #222}to{box-shadow:0 -2px #222}}@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}}