/* --- BASIC ELEMENTS --- */ body { background-color: #d9d9d6; } .container { margin: 2rem auto; padding: 4rem 5rem; min-width: 40rem; max-width: 45%; min-height: 90vh; background-color: #fff; cursor: pointer; border: 0px solid #aeaeae; box-shadow: 0 1px 15px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.24); } .action-container { margin: 2rem; padding: 2rem 2.5rem; max-width: 45%; float: right; position: fixed; bottom: 2rem; right: 0; } span.wrapper { display: inline-block; font-family: 'PT Serif', serif; font-size: 1.2rem; text-align:center; position: relative; margin-bottom: 0.75rem; } /* --- ELEMENTS IN ACTION CONTAINER --- */ .action-container a { font-family: 'PT Serif', serif; padding: 0.4rem; background: black; color: white; text-decoration: none; box-shadow: none; transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .action-container a:hover { box-shadow: 0 1px 10px rgba(0,0,0,0.12), 0 1px 10px rgba(0,0,0,0.24); } .action-container p { margin: 1.25rem 2rem 0 0; } /* --- ELEMENTS IN .WRAPPER --- */ .word, .tag { display: block; position: relative; margin: auto; clear:both; } span.invisible { display: none; } span.word { margin-top: 1.25rem; } span.tag { color: #fff; font-family: 'Ubuntu Mono', monospace; margin-bottom: -1.25rem; } /* Show original word when hovering label */ span.word_label { display: block; opacity: 0; width: 100%; font-family: 'Ubuntu Mono', monospace; } .wrapper:hover > span.word_label { opacity: 0.5; } /* Spacing fix for punctuation */ .punctuation { margin-left: -4px; } /* Colors for tags */ .noun .pos { color: #003cb3; } .stopword .wordtype { color: #b83e54; } .neutral .sentiment { color: #8491a5; } .known_entity .ner, .pronoun .pos { color: #44a889; } .adjective .pos, .adverb .pos { color: #8e445e; } .pronoun .pos, .determiner .pos, .to .pos, .preposition .pos { color: #2f7f40; }