body { padding: 1ex; } #clip-pot { position: absolute; left: -1000px; } #clipboard { margin: 2px; min-height: 1.5em; max-height: 2.5em; border: 1px solid hsl(0,0%,69.4%); box-shadow: 0 0 0 0 hsla(208.1, 100%, 69%, 0); transition: 250ms box-shadow; } #clipboard:focus { border-color: hsl(204.6, 94.5%, 50.4%); box-shadow: 0 0 0 2px hsla(208.1, 100%, 69%, 0.8); outline: none; } #button-list-container { background: hsl(222,4%,92%); display: flex; flex-direction: column; padding: 0.1ex; } #button-list-container > * { margin: 0.5ex; padding 0.1ex; display: flex; } .icedeb-button { border-radius: 5px; cursor: pointer; color: blue; margin-right: 1em; opacity: 0.3; } .likely .icedeb-button { opacity: 1; } .icedeb-button:hover { text-decoration: underline; } a, a:visited { color: blue; } .hints { margin-left: auto; margin-right: 1ex; } .hints .hint { display: inline-block; width: 1.8ex; text-align: center; margin: 0 0.2ex; cursor: default; opacity: 0.5; } .hints .hint.b { background-color: hsl(312,100%,96%) } .hints .hint.p { background-color: hsl(120,100%,96%) } .hints .hint.m { background-color: hsl(240,100%,90%) } .hints .hint.i { background-color: hsl( 40,100%,96%) } .like-b .hint.b, .like-p .hint.p, .like-m .hint.m, .like-i .hint.i { opacity: 1; }