@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap);section.board .buttons button{aspect-ratio:1.3;background:#3578f7;border:none;border-radius:2rem;box-shadow:0 1rem 0 #2a5ab3;color:#fff;cursor:pointer;font-weight:600;margin-bottom:.5rem;min-width:100px;overflow:hidden;padding:10px;transition:all .2s}section.board .buttons button:hover{box-shadow:0 1.5rem 0 #2a5ab3;translate:0 -.5rem}section.board .buttons button:active{box-shadow:0 .2rem 0 #2a5ab3;translate:0 .8rem}section.board .buttons button.red{background:#f73535;box-shadow:0 1rem 0 #bd2a2a}section.board .buttons button.red:hover{box-shadow:0 1.5rem 0 #bd2a2a}section.board .buttons button.red:active{box-shadow:0 .2rem 0 #bd2a2a}section.board .buttons button.green{background:#09d14c;box-shadow:0 1rem 0 #119e40}section.board .buttons button.green:hover{box-shadow:0 1.5rem 0 #119e40}section.board .buttons button.green:active{box-shadow:0 .2rem 0 #119e40}section.board .buttons button.yellow{background:#f7ca35;box-shadow:0 1rem 0 #c4a02d}section.board .buttons button.yellow:hover{box-shadow:0 1.5rem 0 #c4a02d}section.board .buttons button.yellow:active{box-shadow:0 .2rem 0 #c4a02d}section.board .buttons button.orange{background:#f77c35;box-shadow:0 1rem 0 #cf692e}section.board .buttons button.orange:hover{box-shadow:0 1.5rem 0 #cf692e}section.board .buttons button.orange:active{box-shadow:0 .2rem 0 #cf692e}section.board .buttons button.purple{background:#c928c1;box-shadow:0 1rem 0 #a5209e}section.board .buttons button.purple:hover{box-shadow:0 1.5rem 0 #a5209e}section.board .buttons button.purple:active{box-shadow:0 .2rem 0 #a5209e}section.board .buttons button.gray{background:#4d4e50;box-shadow:0 1rem 0 #37383a}section.board .buttons button.gray:hover{box-shadow:0 1.5rem 0 #37383a}section.board .buttons button.gray:active{box-shadow:0 .2rem 0 #37383a}section.board .buttons button.stop{background:repeating-linear-gradient(45deg,red,red 10px,#fff 0,#fff 20px);border:.3rem solid red;box-shadow:0 1rem 0 red;color:#000;font-size:1.5rem;font-weight:700;text-shadow:2px 0 #fff,-2px 0 #fff,0 2px #fff,0 -2px #fff,1px 1px #fff,-1px -1px #fff,1px -1px #fff,-1px 1px #fff}section.board .buttons button.stop:hover{box-shadow:0 1.5rem 0 red}section.board .buttons button.stop:active{box-shadow:0 .2rem 0 red}*{box-sizing:border-box;font-family:Inter,sans-serif;margin:0;overscroll-behavior:contain;padding:0}.App{display:flex;height:100vh;overflow:hidden}.App section.chat{flex:1.5 1;height:100%;position:relative}.App section.chat .logo{align-items:center;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);display:flex;left:0;padding:1.5rem 1rem;position:absolute;top:0;width:100%;z-index:100}.App section.chat .logo img{width:4rem}.App section.chat .logo h1{color:#303e96;font-size:2.5rem;font-weight:800;margin-bottom:.5rem;margin-left:.8rem}.App section.chat .logo button{all:unset;cursor:pointer;margin-left:1rem;position:relative}.App section.chat .logo button:hover:after{background-color:#f7f7f7;border:.1rem solid #ddd;border-radius:.5rem;content:"2023. Eugène Villotte";left:-50%;padding:.6rem;position:absolute;top:-50%;white-space:nowrap}.App section.chat form{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:transparent;bottom:0;display:flex;gap:.2rem;padding:1em;position:absolute;width:100%;z-index:100}.App section.chat form .current-users{align-items:center;display:flex;position:absolute;right:1rem;top:-1rem;z-index:101}.App section.chat form .current-users i{color:#e93c3c;display:inline-block;margin-right:.5rem}.App section.chat form .current-users span{font-weight:700;margin-right:.2rem}.App section.chat form button,.App section.chat form input{border:.1rem solid #d1d2dd;border-radius:.8rem;box-shadow:0 0 1rem #e1e1e9;font-size:1.2rem;padding:.7rem}.App section.chat form button:focus,.App section.chat form input:focus{border:.1rem solid #3578f7;outline:.2rem solid #87aef5}.App section.chat form #message{flex:1 1;padding-left:1rem}.App section.chat form #lang{display:none;width:2rem}.App section.chat form #submit{align-items:center;background-color:#3578f7;border:none;color:#fff;cursor:pointer;display:flex;justify-content:center;width:4rem}.App section.chat form #submit i{aspect-ratio:1}.App section.chat .messages-container{height:100%;overflow-y:auto;padding:7rem 2rem 2rem}.App section.chat .messages-container ul{display:flex;flex-direction:column;gap:1rem;list-style:none;margin-bottom:8rem}.App section.chat .messages-container ul li{margin-bottom:.1rem;width:auto;word-break:break-word}.App section.chat .messages-container ul li .message{-webkit-animation:message-appear .2s forwards;animation:message-appear .2s forwards;background-color:#ececec;border-radius:1rem 1rem 1rem .5rem;display:inline-block;overflow:hidden;padding:.8rem 1rem}@-webkit-keyframes message-appear{0%{opacity:0;translate:0 2rem}}@keyframes message-appear{0%{opacity:0;translate:0 2rem}}.App section.chat .messages-container ul li .message em{display:none}.App section.chat .messages-container ul li .message p{font-size:1.1rem}.App section.chat .messages-container ul li .message.special{border:.2rem dashed #3578f7}.App section.chat .messages-container .messages-end{margin-top:8rem}.App section.board{border-left:1px solid #d9d9d9;flex:1 1;overflow:auto;position:relative}.App section.board .toggle-container{display:none;padding:.5rem;position:fixed;right:0;top:0;z-index:1000}.App section.board .toggle-container button{all:unset;align-items:center;border:.1rem solid #ddd;border-radius:.8rem;cursor:pointer;display:flex;padding:.2rem .4rem}.App section.board .toggle-container button i{display:inline-block}.App section.board h2{font-size:2rem;margin-top:2.5rem;text-align:center}.App section.board .buttons{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));padding:2rem}@media screen and (max-width:768px){.App section.board{flex:0 1}.App section.board .toggle-container{display:block}.App.show-board section.chat{display:none;flex:0 1}.App.show-board section.board{flex:1 1}}