.macbook{padding:4% 6%;margin:0 auto;max-width:570px;margin-bottom:-80px;padding-top:6px}.screen{background:#000;border-radius:3% 3% .5% .5% / 5%;margin:0 auto;position:relative;width:80%}.screen:before{border:2px solid #cacacc;border-radius:3% 3% .5% .5% / 5%;box-shadow:0 0 0 1px rgb(0 0 0 / .8) inset,0 0 1px 2px rgb(255 255 255 / .3) inset;content:"";display:block;padding-top:67%}.screen:after{content:"";border-top:2px solid rgb(255 255 255 / .15);position:absolute;bottom:.75%;left:.5%;padding-top:1%;width:99%}.viewport{position:absolute;bottom:0;left:0;right:0;top:0;margin:2.3% 2.2%;background:#333;border-radius:8px;transition:background-position 3s ease;background-position:0 0;background-size:100% auto;overflow:hidden;cursor:pointer}.macbook:hover .viewport{background-position:0 100%}.viewport:after{background:radial-gradient(circle at right bottom,transparent 75%,rgb(255 255 255 / .05) 75%,transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.base{position:relative;width:100%}.base:before{content:"";display:block;padding-top:3.3%;background:linear-gradient(#eaeced,#edeef0 55%,#fff 55%,#8a8b8f 56%,#999ba0 61%,#4B4B4F 84%,#262627 89%,rgb(0 0 0 / .01) 98%);border-radius:0 0 10% 10%/ 0 0 50% 50%}.base::after{background:linear-gradient(90deg,rgb(0 0 0 / .5),rgb(255 255 255 / .8) .5%,rgb(0 0 0 / .4) 3.3%,transparent 15%,rgb(255 255 255 / .8) 50%,transparent 85%,rgb(0 0 0 / .4) 96.7%,rgb(255 255 255 / .8) 99.5%,rgb(0 0 0 / .5) 100%);content:"";height:53%;position:absolute;top:0;width:50%}.notch{background:#ddd;border-radius:0 0 7% 7% / 0 0 95% 95%;box-shadow:-5px -1px 3px rgb(0 0 0 / .2) inset,5px -1px 3px rgb(0 0 0 / .2) inset;margin-left:auto;margin-right:auto;margin-top:-3.5%;z-index:2;position:relative;width:14%}.notch:before{content:"";display:block;padding-top:10%}