.displayContainer{width:100%;display:flex;justify-content:center}.displayCard{width:100%;max-width:720px;background:#0f172a;border-radius:16px;padding:0;box-shadow:0 20px 40px #00000040;overflow:hidden}.displayCard.empty{padding:40px;text-align:center;color:#cbd5e1}.displayHeader{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem;color:#94a3b8}.messages{padding:20px;height:40vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.message{max-width:70%;padding:10px 14px;border-radius:12px;font-size:.95rem;line-height:1.4}.message.sent{align-self:flex-end;background:#26c3a5;color:#062e28}.message.received{align-self:flex-start;background:#1e293b;color:#e2e8f0}.buttonContainer{width:100%;max-width:720px;margin:16px auto 0;display:flex;gap:10px}.input{flex:1;padding:12px 14px;border-radius:10px;background:#f8fafc;color:#0f172a;font-size:.95rem;border:none}.input::placeholder{color:#94a3b8}.roomInput{max-width:140px}.sendButton{padding:0 20px;border-radius:10px;background:#0f172a;color:#fff;font-weight:500;cursor:pointer;transition:transform .15s ease,background .15s ease}.sendButton:hover{background:#020617}.sendButton:active{transform:scale(.96)}.linkContainer{display:flex;justify-content:center;width:100%;height:100px}ul{list-style:none}.example-2{display:flex;justify-content:center;align-items:center}.example-2 .icon-content{margin:0 10px;position:relative}.example-2 .icon-content .tooltip{position:absolute;top:-30px;left:50%;transform:translate(-50%);color:#000;padding:6px 10px;border-radius:5px;opacity:0;visibility:hidden;font-size:14px;transition:all .3s ease}.example-2 .icon-content:hover .tooltip{opacity:1;visibility:visible;top:-50px}.example-2 .icon-content a{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;color:#4d4d4d;background-color:#fff;border:2px solid rgb(0,0,0);transition:all .3s ease-in-out}.example-2 .icon-content a:hover{box-shadow:3px 2px 45px #0000001f;border:2px solid rgb(255,255,255)}.example-2 .icon-content a svg{position:relative;z-index:1;width:30px;height:30px}.example-2 .icon-content a:hover{color:#fff}.example-2 .icon-content a .filled{position:absolute;top:auto;bottom:0;left:0;width:100%;height:0;background-color:#000;transition:all .3s ease-in-out}.example-2 .icon-content a:hover .filled{height:100%}.example-2 .icon-content a[data-social=github] .filled{background-color:#24262a}.example-2 .icon-content a[data-social=github]~.tooltip{background-color:#c6c6c6}.logo-Container{display:flex;justify-content:center;width:100%;height:100px}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo.socket:hover{filter:drop-shadow(0 0 1em #151515)}.logo.express:hover{filter:drop-shadow(0 0 1em #5c5c5caa)}.logo.react:hover{filter:drop-shadow(0 0 1em #61dafbaa)}.logo.node:hover{filter:drop-shadow(0 0 1em #6ebc4d)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.App{display:flex;width:100%;height:100%;flex-direction:row;flex-wrap:wrap}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#26c3a5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:10vh}h1{font-size:3.2em;line-height:1.1}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:theme("borderColor.DEFAULT",currentColor)}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button{letter-spacing:0px}ol,ul,menu{list-style:none;margin:0;padding:0}