@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,400&display=swap');

body { background : #242424; font-family : "Varela Round"; font-size : 17px; line-height: 1.5; margin: 0; }

#main { overflow-y: auto; flex: 1; }

div { margin: auto; border: 2px solid #4c4c4c; padding: 5px; border-radius: 10px; width: 100%; margin-top: 5px; margin-bottom: 5px; }

p { text-indent: 30px; padding-top : 5px; padding-left: 5px; padding-bottom: 0; margin : 0; max-width : 650px; }

p.version { border: none; text-align: right; font-size: 12px; color: #e1c367; max-width: none; margin-top: 15px; }

p.motd { color: #0062ea; padding: 10px; margin-top: 10px; }

textarea { resize: none; width: calc(100% - 6px); background: transparent; border: none; color: #804090; font-family: "Varela Round"; font-size: 17px; }

textarea:focus { outline: none; }

h1 { color: #d9d9d9; }

input { background: black; border: solid 2px grey; border-radius: 5px; color: #d9d9d9; font-family: "Varela Round"; font-size: 17px; margin: 10px auto; }

.problem { color : #8f2c2c; }

.presence { color : #f2b007; }

.global { color : #0db53f; }

.room { color : #0062ea; text-indent: 0;}

.observation { color : #ded3dc; }

.overheard { color : #a49aa2; font-size : 14px; }

.overheard-location { color : #f2b007; }

.overheard-location::after { content : ": "; }

.description { color : #a49aa2; font-family : "Source Sans Pro"; font-size : 19px; }

.confirmation { color : #6b666a; }

.input { color : #804090; text-indent : 0; width: 90%; }

.helpDescription { color : #6b666a; font-family : "Source Sans Pro"; font-style : italic; }

.helpTitle { color : #0db53f; text-indent : 0;}

.helpSyntax { color : #6b666a; text-indent : 0; }

.optional { font-style : italic; }

.argument { color : #0062ea !important; }

.keyword { color : #0db53f !important; }

.unusedButton { width: 0; background: #00000000; border-radius : 0px ! important; border : none !important; }

.unselectedButton { width: 20%; background: #00000000; border : solid 1px #ded3dc ! important; color: #ded3dc; }

.selectedButton { width: 20%; background: #0062ea; color: black; }

.disconnectButton { background: #a40000; width: 20%; margin-left: 5px; }

.connectButton { background: #00a400; width: 100%; }

.disabledButton { background : #606060; width: 100px; }

.button { color: white; font-family: "Varela Round"; font-size: 13px; border-radius: 2px; border: solid 1px black; padding: 4px; transition: background 0.5s, width 0.5s; float: right; }

#credentials > button { margin-top: 5px; min-width: 125px; } 

#page { border: none; display: flex; flex-direction: column; height: 100vh; padding: 0; width: 100vw; max-width: 750px; margin: auto; }

#credentials { display: flex; flex-direction: column; max-width: 500px; }