.crossword { font-family: monospace; font-weight: bold; display: flex; flex-direction: column; overflow-x: auto; } .crossword .c-row { display: flex; } .cell { border: 1px solid black; background-color: white; color: black; display: inline-flex; justify-content: center; align-items: center; padding: 0.25em 0.75em; } .dark .cell { border: 1px solid gray; background-color: black; color: white; } .crossword .cell.filled :not([clue]) { background-color: gainsboro; } .dark .crossword .cell.filled :not([clue]) { background-color: dimgray; } .clue-1, #clue-1 textarea { background-color: lightpink; } .clue-2, #clue-2 textarea { background-color: lightgreen; } .clue-3, #clue-3 textarea { background-color: lightblue; } .clue-1.clue-2 { background: linear-gradient(45deg, lightpink 50%, lightgreen 50%); } .clue-1.clue-3 { background: linear-gradient(45deg, lightpink 50%, lightblue 50%); } .clue-2.clue-3 { background: linear-gradient(45deg, lightgreen 50%, lightblue 50%); } .dark .clue-1, .dark #clue-1 textarea { background-color: darkred; } .dark .clue-2, .dark #clue-2 textarea { background-color: darkgreen; } .dark .clue-3, .dark #clue-3 textarea { background-color: darkblue; } #clue-1 textarea, #clue-2 textarea, #clue-3 textarea { font-size: 1.4em; } .dark .clue-1.clue-2 { background: linear-gradient(45deg, darkred 50%, darkgreen 50%); } .dark .clue-1.clue-3 { background: linear-gradient(45deg, darkred 50%, darkblue 50%); } .dark .clue-2.clue-3 { background: linear-gradient(45deg, darkgreen 50%, darkblue 50%); } .cell.clue { -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { opacity: 1; } to { opacity: 0.75; } } #clue1 textarea, #clue2 textarea, #clue3 textarea { font-weight: bold; font-size: 1.4em; } .textspan { display: block !important; margin: 4px 0 0 0 !important; font-size: 1.25em; } .textspan .label { display: none; } .generating { display: none !important; }