* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: #18191a; font-size: 15px; line-height: 20px; font-family: 'Rubik', Segoe UI, Helvetica, Arial, sans-serif; overflow-x: hidden; }
.chat-bubbles-wrap { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
.flex-column { width: 100%; }
.chat-bubbles { display: flex; flex-direction: column; flex-wrap: wrap; margin-top: auto; padding: 18px; }
.chat-bubble { align-self: flex-start; background-color: #f5f5fb; color: #18191a; border-radius: 18px; border-top-left-radius: 2px; padding: 0; font-size: 0; opacity: 0; margin: 0; height: 0; max-width: 320px; transition: all 150ms ease-in; }
.chat-bubble a { display: inline-block; width: 40px; height: 40px; margin-right: 9px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.chat-bubble.chat-bubble-visible { height: auto; padding: 8px 12px; margin-top: 2px; font-size: 15px; opacity: 1 }
.chat-bubble.chat-bubble-visible:first-child { margin-top: 38px !important; border-top-left-radius: 18px !important; }
.chat-bubble.chat-bubble-visible.chat-bubble-style-adjusted { border-bottom-left-radius: 2px; }
.chat-bubble.chat-bubble-visible.chat-bubble-typing { border-top-left-radius: 18px !important; margin-bottom: 18px; }
@keyframes typing-dot-animation { 0% { transform: translateY(0px); } 28% { transform: translateY(-5px); } 44% { transform: translateY(0px); } }
.typing-dots { display: flex; align-items: center; height: 20px; }
.typing-dot { display: inline-block; background-color: #18191a; width: 4px; height: 4px; border-radius: 2px; margin-right: 2px; animation: typing-dot-animation 1.5s infinite ease-in-out; }
.typing-dot:nth-child(1){ animation-delay: 200ms; }
.typing-dot:nth-child(2){ animation-delay: 300ms; }
.typing-dot:nth-child(3){ animation-delay: 400ms; }
.logo { position: absolute; top: 18px; left: 18px; }
.logo img { -webkit-filter: drop-shadow(0px 0px 5px #18191a); filter: drop-shadow(0px 0px 5px #18191a); }
.picture { padding: 18px; }
.picture img { display: block; border-radius: 18px; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 36px); }
@media (min-width: 576px) { .chat-bubbles-wrap { flex-direction: row-reverse; } .flex-column { width: 50%; } .picture img { margin-left: auto; } }
@media (orientation: landscape) { .chat-bubbles-wrap { flex-direction: row-reverse; } .flex-column { width: 50%; } .picture img { margin-left: auto; } }
@media (max-width: 575px) { .picture img { margin-top: 38px; } }
.facebook { background-image: url('./img/facebook.svg'); }
.linkedin { background-image: url('./img/linkedin.svg'); }
.behance { background-image: url('./img/behance.svg'); }
.github { background-image: url('./img/github.svg'); }
.flickr { background-image: url('./img/flickr.svg'); }
.instagram { background-image: url('./img/instagram.svg'); }