*,:after,:before{box-sizing:border-box}$bg_body: #212121; $bg_gradient_last_color: rgba(0,212,255,1); $bg_gradient: linear-gradient(90deg,rgba(2,0,36,1) 0%,rgba(52,9,121,1) 37%,$bg_gradient_last_color 94%);; body{background-color:$bg_body;color:#fff;font-family:monospace,serif;letter-spacing:.05em}h1{font-size:23px}.form{width:300px;padding:64px 15px 24px;margin:0 auto}.form .control{margin:0 0 24px}.form .control input{width:100%;padding:14px 16px;border:0;background:transparent;color:#fff;font-family:monospace,serif;letter-spacing:.05em;font-size:16px}.form .control input:hover,.form .control input:focus{outline:none;border:0}.form .btn{width:100%;display:block;padding:14px 16px;background:transparent;outline:none;border:0;color:#fff;letter-spacing:.1em;font-weight:700;font-family:monospace;font-size:16px}.block-cube{position:relative;// State hover,focus &.block-cube-hover:focus,&.block-cube-hover:hover{.bg{.bg-inner{top:100%}}}}.block-cube .bg-top{position:absolute;height:10px;background:#020024;background:$bg_gradient;bottom:100%;left:5px;right:-5px;transform:skew(-45deg);margin:0}.block-cube .bg-top .bg-inner{bottom:0}.block-cube .bg{position:absolute;left:0;top:0;right:0;bottom:0;background:#020024;background:$bg_gradient}.block-cube .bg-right{position:absolute;background:#020024;background:#00d4ff;top:-5px;z-index:0;bottom:5px;width:10px;left:100%;transform:skew(0,-45deg)}.block-cube .bg-right .bg-inner{left:0}.block-cube .bg .bg-inner{transition:all .2s ease-in-out}.block-cube .bg-inner{background:$bg_body;position:absolute;left:2px;top:2px;right:2px;bottom:2px}.block-cube .text,.block-cube.block-input input{position:relative;z-index:2}.block-cube.block-input input:focus~.bg-right .bg-inner,.block-cube.block-input input:focus~.bg-top .bg-inner,.block-cube.block-input input:focus~.bg-inner .bg-inner{top:100%;background:#ffffff80}.block-cube.block-input .bg-top,.block-cube.block-input .bg-right,.block-cube.block-input .bg{background:#ffffff80;transition:background .2s ease-in-out}.block-cube.block-input .bg-right .bg-inner,.block-cube.block-input .bg-top .bg-inner{transition:all .2s ease-in-out}.block-cube.block-input:focus .bg-top,.block-cube.block-input:focus .bg-right,.block-cube.block-input:focus .bg,.block-cube.block-input:hover .bg-top,.block-cube.block-input:hover .bg-right,.block-cube.block-input:hover .bg{background:#fffc}.credits{position:fixed;left:0;bottom:0;padding:15px;width:100%;z-index:111}.credits a{opacity:.6;color:#fff;font-size:11px;text-decoration:none}.credits a:hover{opacity:1}.chat-container{display:flex;flex-direction:column;height:100vh;justify-content:space-between}.message-bar{position:fixed;bottom:0;width:100%;background-color:#fff;padding:16px;box-shadow:0 -2px 4px #0000001a}.message-list-item{margin-bottom:8px}.message-paper{box-shadow:0 2px 4px #0000001a;border-radius:4px;padding:16px}.message-bar .MuiOutlinedInput-root,.message-bar .MuiButton-root{height:56px}html,body,#root{height:100%;margin:0;overflow:hidden}.message-list::-webkit-scrollbar{display:none}.message-list{-ms-overflow-style:none;scrollbar-width:none}.chat-header{padding-top:32px}