.iphone{background:#f8f8f8;border:5px solid #d9dbdc;border-radius:50px;box-shadow:inset 0 0 3px #0003,0 0 0 1px #999,0 0 30px #000000b3;height:877px;margin:30px auto;padding:15px;position:relative;transform:scale(.65);width:423px}.iphone-top.speaker{background:#292728;border-radius:6px;display:block;height:6px;margin:0 auto;width:70px}.iphone-top.camera{height:10px;margin:0 auto 13px;width:10px}.iphone-top.camera,.iphone-top.sensor{background:#333;border-radius:50%;display:block}.iphone-top.sensor{float:left;height:15px;margin-top:-5px;width:15px}.iphone-top{padding:5px 110px 40px;position:relative}.bottom-bar,.top-bar{border-left:5px solid #bbb;border-right:5px solid #bbb;display:block;height:15px;left:-5px;position:absolute;width:423px}.top-bar{top:65px}.bottom-bar{bottom:65px}.iphone-screen{background:#eee;background-image:url(https://assets.codepen.io/285131/paintbg.jpg);background-repeat:no-repeat;background-size:cover;border:1px solid #fff;border:2px solid rgba(0,0,0,.9);border-radius:3px;height:677px;margin:0 auto;overflow:hidden;width:375px}.iphone-screen img{width:100%}.buttons.on-off,.down,.sleep,.up{background:#ccc;border-radius:2px 0 0 2px;display:block;position:absolute}.buttons.on-off{height:40px;left:-8px;top:100px;width:3px}.buttons.up,.down,.sleep{height:60px;left:-10px;width:5px}.buttons.up{top:170px}.buttons.down{top:250px}.buttons.sleep{border-radius:0 2px 2px 0;left:auto;right:-10px;top:170px}.iphone-bottom{padding:10px 0 0}.iphone-bottom span{background:#ccc;background:linear-gradient(135deg,#303233,#b5b7b9 50%,#f0f2f2 69%,#303233);border-radius:50%;display:block;height:68px;margin:0 auto;position:relative;width:68px}.iphone-bottom span &:after{background:#fff;border-radius:50%;content:"";display:block;height:60px;left:4px;position:absolute;top:4px;width:60px}.imessage{background-color:#fff0;display:flex;flex-direction:column;font-family:SanFrancisco;font-size:1.25rem;margin:0 auto 1rem;max-width:600px;padding:.5rem 1.5rem}p.from-me:before{border-bottom-left-radius:.8rem .7rem;border-right:1rem solid #248bf5;right:-.35rem;transform:translateY(-.1rem)}p.from-me:after{background-color:#f5d7fd;border-bottom-left-radius:.5rem;right:-40px;transform:translate(-30px,-2px);width:10px}p.from-them:before{border-bottom-right-radius:.8rem .7rem;border-left:1rem solid #e5e5ea;left:-.35rem;transform:translateY(-.1rem)}p.from-them:after{background-color:#f6e3fb;border-bottom-right-radius:.5rem;left:20px;transform:translate(-30px,-2px);width:10px}p.from-them-2:before{border-bottom-right-radius:.8rem .7rem;border-left:1rem solid #e5e5ea;left:-.35rem;transform:translateY(-.1rem)}p.from-them-2:after{background-color:#f7dcff;border-bottom-right-radius:.5rem;left:20px;transform:translate(-30px,-2px);width:10px}.imessage p{word-wrap:break-word;border-radius:1.15rem;line-height:1.25;max-width:75%;padding:.5rem .875rem;position:relative}.imessage p:after,.imessage p:before{bottom:-.1rem;content:"";height:1rem;position:absolute}p.from-them,p.from-them-2{align-items:flex-start;background-color:#e5e5ea;color:#000}p.from-me{align-self:flex-end;background-color:#248bf5;color:#fff}@font-face{font-family:SanFrancisco;src:url(https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff2) format("woff2"),url(https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff) format("woff")}