body{background:#000}body:after{position:absolute;top:0;right:0;padding:10px;color:#fff;opacity:.6}.iphone-x{position:relative;margin:20px auto;width:300px;height:650px;background-color:#1d1d1f;background-image:linear-gradient(135deg,#1d1d1f,#2d2d30);border-radius:40px;box-shadow:0 0 0 4px #000,0 0 0 8px #1a1a1a,0 0 30px rgba(255,255,255,.4),0 0 60px rgba(255,255,255,.3);transition:all .3s ease}:root:not(.dark) .iphone-x{background-color:#000;background-image:linear-gradient(135deg,#f5f5f7,#e5e5e7);box-shadow:0 0 0 4px #1a1a1a,0 0 0 8px #333333,0 0 40px rgba(0,0,0,.4),0 0 80px rgba(0,0,0,.3)}.iphone-x:after,.iphone-x:before{content:"";position:absolute;left:50%;transform:translateX(-50%)}.iphone-x:before{top:10px;width:100px;height:30px;background-color:#000;border-radius:15px;z-index:1000}.iphone-x b,.iphone-x i,.iphone-x s,.iphone-x span{position:absolute;display:block;color:transparent}.iphone-x i{top:10px;left:50%;transform:translate(-50%,10px);height:5px;width:48px;border-radius:3px;z-index:1001}.iphone-x b,.iphone-x i,:root:not(.dark) .iphone-x i{background-color:#000}.iphone-x b{left:50%;top:10px;transform:translate(-16px,6px);width:11px;height:11px;border-radius:11px;z-index:1001}.iphone-x b:after,:root:not(.dark) .iphone-x b{background-color:#000}.iphone-x b:after{content:"";position:absolute;width:6px;height:6px;top:2.5px;left:2.5px;display:block;border-radius:5px;box-shadow:inset 0 -1px 1px rgba(0,0,0,.3)}