:host{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:14px;color:#333;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin:8px 0}p{margin:0}.spacer{flex:1}.toolbar{font-family:Arial,Helvetica,sans-serif;position:fixed;top:0;left:0;right:0;width:100%;height:60px;display:flex;align-items:center;background-color:#23325f;color:#fff;font-weight:600;z-index:1000;padding:10px;box-shadow:0 2px 4px #0000001a}.toolbar img{margin:0 16px}.toolbar #twitter-logo{height:40px;margin:0 8px}.toolbar #youtube-logo{height:40px;margin:0 16px;color:#fff}.toolbar #twitter-logo:hover,.toolbar #youtube-logo:hover{opacity:.8}.content{display:flex;margin:82px auto 32px;padding:0 16px;max-width:960px;flex-direction:column;align-items:center}svg.material-icons{height:24px;width:auto}svg.material-icons:not(:last-child){margin-right:8px}.card svg.material-icons path{fill:#888}.card-container{display:flex;flex-wrap:wrap;justify-content:center;margin-top:16px}.card{all:unset;border-radius:4px;border:1px solid #eee;background-color:#fafafa;height:40px;width:200px;margin:0 8px 16px;padding:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;transition:all .2s ease-in-out;line-height:24px}.card-container .card:not(:last-child){margin-right:0}.card.card-small{height:16px;width:168px}.card-container .card:not(.highlight-card){cursor:pointer}.card-container .card:not(.highlight-card):hover{transform:translateY(-3px);box-shadow:0 4px 17px #00000059}.card-container .card:not(.highlight-card):hover .material-icons path{fill:#696767}.card.highlight-card{background-color:#1976d2;color:#fff;font-weight:600;border:none;width:auto;min-width:30%;position:relative}.card.card.highlight-card span{margin-left:60px}svg#rocket{width:80px;position:absolute;left:-10px;top:-24px}svg#rocket-smoke{height:calc(100vh - 95px);position:absolute;top:10px;right:180px;z-index:-10}a,a:visited,a:hover{color:#1976d2;text-decoration:none}a:hover{color:#125699}.terminal{position:relative;width:80%;max-width:600px;border-radius:6px;padding-top:45px;margin-top:8px;overflow:hidden;background-color:#0f0f10}.terminal:before{content:"\2022\2022\2022";position:absolute;top:0;left:0;height:4px;background:rgb(58,58,58);color:#c2c3c4;width:100%;font-size:2rem;line-height:0;padding:14px 0;text-indent:4px}.terminal pre{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;color:#fff;padding:0 1rem 1rem;margin:0}.circle-link{height:40px;width:40px;border-radius:40px;margin:8px;background-color:#fff;border:1px solid #eeeeee;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;transition:1s ease-out}.circle-link:hover{transform:translateY(-.25rem);box-shadow:0 3px 15px #0003}footer{margin-top:8px;display:flex;align-items:center;line-height:20px}footer a{display:flex;align-items:center}.github-star-badge{color:#24292e;display:flex;align-items:center;font-size:12px;padding:3px 10px;border:1px solid rgba(27,31,35,.2);border-radius:3px;background-image:linear-gradient(-180deg,#fafbfc,#eff3f6 90%);margin-left:4px;font-weight:600}.github-star-badge:hover{background-image:linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);border-color:#1b1f2359;background-position:-.5em}.github-star-badge .material-icons{height:16px;width:16px;margin-right:4px}svg#clouds{position:fixed;bottom:-160px;left:-230px;z-index:-10;width:1920px}@media screen and (max-width: 767px){.card-container>*:not(.circle-link),.terminal{width:100%}.card:not(.highlight-card){height:16px;margin:8px 0}.card.highlight-card span{margin-left:72px}svg#rocket-smoke{right:120px;transform:rotate(-5deg)}}@media screen and (max-width: 575px){svg#rocket-smoke{display:none;visibility:hidden}}html,body{height:100%;margin:60px 0 0;font-family:Lato,sans-serif}.spacer{flex-grow:1}::selection{background:rgba(82,179,217,.3);color:inherit}a{color:#52b3d9e6}.content{min-height:calc(100vh - 60px);display:flex;flex-direction:column}@mixin font-bold{font-family: "Source Sans Pro",sans-serif; font-weight: 600;}@mixin font{font-family: "Source Sans Pro",sans-serif; font-weight: 400;}@mixin placeholder{&::-webkit-input-placeholder {@content;} &:-moz-placeholder {@content;} &::-moz-placeholder {@content;} &:-ms-input-placeholder {@content;}}*,*:before,*:after{box-sizing:border-box}:root{--white: #fff;--black: #000;--bg: #f8f8f8;--grey: #999;--dark: #1a1a1a;--light: #e6e6e6;--wrapper: 1000px;--blue: #23325F}body{background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;@include font;background-image:url(bk_chat-photoaidcom-darken.a6e84151dc466fef.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed}.wrapper{position:relative;left:50%;width:var(--wrapper);height:calc(100vh - 60px);transform:translate(-50%)}.container{position:relative;top:40%;left:50%;width:100%;height:90%;background-color:var(--white);transform:translate(-50%,-50%);.left {float: left; width: 37.6%; height: 100%; border: 1px solid var(--light); background-color: var(--white); .top {position: relative; width: 100%; height: 96px; padding: 29px; &:after {position: absolute; bottom: 0; left: 50%; display: block; width: 80%; height: 1px; content: ""; background-color: var(--light); transform: translate(-50%,0);}} input {float: left; width: 188px; height: 42px; padding: 0 15px; border: 1px solid var(--light); background-color: #eceff1; border-radius: 21px; @include font(); &:focus {outline: none;}} a.search {display: block; float: left; width: 42px; height: 42px; margin-left: 10px; border: 1px solid var(--light); background-color: var(--blue); background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/name-type.png); background-repeat: no-repeat; background-position: top 12px left 14px; border-radius: 50%;} .people {margin-left: -1px; border-right: 1px solid var(--light); border-left: 1px solid var(--light); width: calc(100% + 2px); .person {list-style-type: none; position: relative; width: 100%; padding: 12px 10% 16px; cursor: pointer; background-color: var(--white); &:after {position: absolute; bottom: 0; left: 50%; display: block; width: 80%; height: 1px; content: ""; background-color: var(--light); transform: translate(-50%,0);} img {float: left; width: 40px; height: 40px; margin-right: 12px; border-radius: 50%; object-fit: cover;} .name {font-size: 14px; line-height: 22px; color: var(--dark); @include font-bold;} .time {font-size: 14px; position: absolute; top: 16px; right: 10%; padding: 0 0 5px 5px; color: var(--grey); background-color: var(--white);} .preview {font-size: 14px; display: inline-block; overflow: hidden !important; width: 70%; white-space: nowrap; text-overflow: ellipsis; color: var(--grey);} &.active,&:hover {margin-top: -1px; margin-left: -1px; padding-top: 13px; border: 0; background-color: var(--blue); width: calc(100% + 2px); padding-left: calc(10% + 1px); span {color: var(--white); background: transparent;} &:after {display: none;}}}}} .right {position: relative; float: left; width: 62.4%; height: 100%; .top {width: 100%; height: 47px; padding: 15px 29px; background-color: #eceff1; span {font-size: 15px; color: var(--grey); .name {color: var(--dark); @include font-bold;}}} .chat {position: relative; display: none; overflow: hidden; padding: 0 35px 92px; border-width: 1px 1px 1px 0; border-style: solid; border-color: var(--light); height: calc(100% - 48px); justify-content: flex-end; flex-direction: column; &.active-chat {display: block; display: flex; .bubble {transition-timing-function: cubic-bezier(.4,-.04,1,1); @for $i from 1 through 10 {&:nth-of-type(#{$i}) {animation-duration: .15s * $i;}}}}} .chat-content {height: calc(100% - 48px); overflow-y: auto; padding-right: 10px;} .write {position: absolute; bottom: 29px; left: 30px; height: 42px; padding-left: 8px; border: 1px solid var(--light); background-color: #eceff1; width: calc(100% - 58px); border-radius: 5px; input {font-size: 16px; float: left; width: calc(100% - 58px); height: 40px; padding: 0 10px; color: var(--dark); border: 0; outline: none; background-color: #eceff1; @include font;} .write-link {&.attach {&:before {display: inline-block; float: left; width: 20px; height: 42px; content: ""; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/attachment.png); background-repeat: no-repeat; background-position: center;}} &.smiley {&:before {display: inline-block; float: left; width: 20px; height: 42px; content: ""; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/smiley.png); background-repeat: no-repeat; background-position: center;}} &.send {&:before {display: inline-block; float: left; width: 20px; height: 42px; margin-left: 20px; content: ""; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/send.png); background-repeat: no-repeat; background-position: center;}}}} .bubble {font-size: 16px; position: relative; display: inline-block; clear: both; margin-bottom: 8px; padding: 13px 14px; vertical-align: top; border-radius: 5px; &:before {position: absolute; top: 19px; display: block; width: 8px; height: 6px; content: "\a0"; transform: rotate(29deg) skew(-35deg);} &.you {float: left; color: var(--white); background-color: var(--blue); align-self: flex-start; animation-name: slideFromLeft; &:before {left: -3px; background-color: var(--blue);}} &.me {float: right; color: var(--dark); background-color: #eceff1; align-self: flex-end; animation-name: slideFromRight; &:before {right: -3px; background-color: #eceff1;}}} .conversation-start {position: relative; width: 100%; margin-bottom: 27px; text-align: center; span {font-size: 14px; display: inline-block; color: var(--grey); &:before,&:after {position: absolute; top: 10px; display: inline-block; width: 30%; height: 1px; content: ""; background-color: var(--light);} &:before {left: 0;} &:after {right: 0;}}}}}@keyframes slideFromLeft{0%{margin-left:-200px;opacity:0}to{margin-left:0;opacity:1}}@keyframes slideFromRight{0%{margin-right:-200px;opacity:0}to{margin-right:0;opacity:1}}