// Animation tools @import 'animate'; @import 'utilities/animationduration'; @import 'utilities/animationfillmode'; @import 'utilities/animationname'; // Auxiliary tools @import 'utilities/boxsizing'; @import 'utilities/textsizeadjust'; *, *::after, *::before { @include box-sizing(border-box); @include text-size-adjust(100%); } body { background-color: transparent; font-family: 'Roboto', sans-serif; font-size: 16px; } .container { bottom: 0; position: absolute; width: 100%; } .message-item { background-color: rgba(21, 27, 38, .8); letter-spacing: .05em; margin: 1em; padding: 1em; @include animation-duration(1s); @include animation-fill-mode(both); @include animation-name(fadeIn); } .message-text { color: #fff; }