.macbook{padding:4% 6%;margin:0 auto;width:100%}.macbook .screen{background:#000;border-radius:3% 3% .5% .5%/5%;margin:0 auto;position:relative;width:80%}.macbook .screen:before{border:2px solid #6b6b70;border-radius:3% 3% .5% .5%/5%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),inset 0 0 2px 3px hsla(0,0%,100%,.08);content:"";display:block;padding-top:67%}.macbook .screen:after{content:"";border-top:2px solid hsla(0,0%,100%,.07);position:absolute;bottom:.75%;left:.5%;padding-top:1%;width:99%}.macbook .viewport{margin:4.3% 3.2%;background:#050505;overflow:hidden;cursor:pointer}.macbook .viewport,.macbook .viewport:after{position:absolute;bottom:0;left:0;right:0;top:0}.macbook .viewport:after{background:radial-gradient(circle at right bottom,transparent 75%,hsla(0,0%,100%,.02) 0,transparent);content:"";pointer-events:none}.macbook .base{position:relative;width:100%}.macbook .base:before{content:"";display:block;padding-top:3.3%;background:linear-gradient(#4a4a4f,#3c3c42 20%,#2e2e34 40%,#252528 55%,#1e1e22 56%,#19191c 61%,#141417 75%,#0e0e10 89%,rgba(0,0,0,.01) 98%);border-radius:0 0 10% 10%/0 0 50% 50%}.macbook .base:after{background:linear-gradient(90deg,rgba(0,0,0,.7),hsla(0,0%,100%,.2) .5%,rgba(0,0,0,.6) 3.3%,hsla(0,0%,100%,.03) 15%,hsla(0,0%,100%,.12) 50%,hsla(0,0%,100%,.03) 85%,rgba(0,0,0,.6) 96.7%,hsla(0,0%,100%,.2) 99.5%,rgba(0,0,0,.7));content:"";height:53%;position:absolute;top:0;width:100%}.macbook .notch{background:linear-gradient(180deg,#333338,#252528);border-radius:0 0 7% 7%/0 0 95% 95%;box-shadow:inset -5px -1px 3px rgba(0,0,0,.6),inset 5px -1px 3px rgba(0,0,0,.6),0 1px 2px hsla(0,0%,100%,.07);margin-left:auto;margin-right:auto;margin-top:-3.5%;z-index:2;position:relative;width:14%}.macbook .notch:before{content:"";display:block;padding-top:10%}@media (max-width:768px){.macbook{padding:2% 3%}.macbook .screen{width:95%}}