@font-face { font-family: "Belgika"; src: url("http://bohyewoo.com/webfonts/belgika/belgika-40th-webfont.eot"); src: url("http://bohyewoo.com/webfonts/belgika/belgika-40th-webfont.woff") format("woff"), url("http://bohyewoo.com/webfonts/belgika/belgika-40th-webfont.svg#filename") format("svg"); } @font-face { font-family: "Belgika"; src: url("http://bohyewoo.com/webfonts/belgika/belgika-16th-webfont.eot"); src: url("http://bohyewoo.com/webfonts/belgika/belgika-16th-webfont.woff") format("woff"), url("http://bohyewoo.com/webfonts/belgika/belgika-16th-webfont.svg#filename") format("svg"); } @font-face { font-family: "Belgika"; src: url("http://bohyewoo.com/webfonts/belgika/belgika-8th-webfont.eot"); src: url("http://bohyewoo.com/webfonts/belgika/belgika-8th-webfont.woff") format("woff"), url("http://bohyewoo.com/webfonts/belgika/belgika-8th-webfont.svg#filename") format("svg"); } @font-face { font-family: "SourceCodePro"; src: url("http://bohyewoo.com/webfonts/Source_Code_Pro/SourceCodePro-Regular.ttf"); } * { margin: 0; padding: 0; } html, body { height: 100%; } p { margin-bottom: 30px; } .tos_wrapper { font-family: 'Anonymous Pro', monospace; width: 49%; float: left; margin-right: 20px; } .intro { width: 75%; margin-top: 20px; float: right; } .img { font-family: Belgika; font-size: 20pt; } .image { height: 10vh; margin-top: 30px; cursor: pointer; } .img_clicked { height: calc(20vw); margin-top: 30px; } .info { font-family: Belgika; font-weight: 16th; font-size: 8pt; width: calc(35vw); float: left; margin-top: 30px; column-count: 2; } .paragraph { font-size: 16px; width: 75%; padding: 10px; margin-top: 70px; line-height: 1.5; float: right; } .eachwords { cursor: pointer; } .top_words { background-color: black; width: 10%; height: 100%; font-family: Belgika; font-size: 7.5pt; color: white; letter-spacing: 0.5px; position: fixed; float: left; } .top_words_title { margin: 40px 10px 10px 10px; width: 80%; } .chosen_words { padding: 10px 1px 1px 10px; } .chosen_words:hover { background-color: white; color: red; } .hide { background-color: black; } .TO:hover, .DT:hover, .IN:hover, .WDT:hover, .WP:hover, .MD:hover, .PRP:hover, .CC:hover, .marks:hover, .comma:hover, .dot:hover { background-color: black; } .adjective { color: white; background-color: blue; } .JJ:hover { color: white; background-color: blue; } .noun { background-color: springgreen; } .NN:hover, .NNS:hover { background-color: springgreen; } .verb { background-color: yellow; # color: yellow; } .VB:hover, .VBZ:hover, .VBN:hover, .VVD:hover { background-color: yellow; } .propernoun { background-color: pink; # color: pink; } .NNP:hover, .NNPS:hover { background-color: pink; } .adverb { background-color: lightgreen; # color: lightgreen; } .RB:hover, .RBR:hover, .JJR:hover, .RBS:hover { background-color: lightgreen; }