:root{--primary: #845EC2;--secondary: #ff9671;--tertiary: #ff6f91;--yellow: #f9f871;--orange: #ffc75f;--dark: #005b44}html,body{margin:0;height:100%;width:100%;font-family:Lato,sans-serif;color:var(--orange)}#c{width:100%;height:100%;display:block}body{background:#696969}button{all:unset;border:4px solid var(--secondary);padding:0;margin:.25rem;width:10rem;height:3rem;box-shadow:var(--tertiary) 4px 4px 0 0;text-align:center}button:hover,button:focus{border-color:var(--tertiary);cursor:pointer;background:revert;box-shadow:unset}button[data-color=red]{background:red}button[data-color=blue]{background:#00f}button[data-color=green]{background:green}button#connectWS:hover{background:var(--tertiary)}#mode-btn{cursor:pointer;background:var(--orange);color:var(--primary)}.color-picker{display:flex;flex-direction:column}.GUI{z-index:999;display:flex;flex-direction:column;background:var(--primary);padding:.5rem;margin:0}#active{border:4px solid var(--orange);box-shadow:var(--yellow) 4px 4px 0 0}#active:hover,#active:focus{border-color:var(--yellow);box-shadow:unset}nav{position:absolute;background:var(--primary);margin:0 auto;width:auto}nav ul{display:flex;gap:2rem;list-style:none;padding:1rem;background:var(--secondary);margin:0}nav ul a{text-decoration:none;font-family:Lato,sans-serif}nav ul a:hover{color:var(--orange)}input{border:4px solid var(--secondary);padding:0;margin:.25rem;width:10rem;height:3rem;box-shadow:var(--tertiary) 4px 4px 0 0}#line{padding:1px;opacity:20%;background:var(--tertiary);display:flex}h2{color:var(--secondary)}