@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"); } /* font-family: 'Open Sans', sans-serif; font-family: 'PT Sans', sans-serif; font-family: 'Source Sans Pro', sans-serif; */ * { margin: 0; padding: 0; } html, body { height: 100%; } p { margin-bottom: 30px; } .tos_wrapper { font-family: 'Source Sans Pro', sans-serif; width: 49%; float: left; margin-right: 20px; } .intro { width: 75%; margin-top: 20px; float: right; } .img { font-family: Belgika; font-size: 20pt; } .imgfixed { width: 100%; height: calc(20vh); } .image { height: 10vh; margin-top: 30px; } .img_clicked { height: calc(20vw); margin-top: 30px; } .info { font-family: Belgika-16th; font-size: 8pt; width: calc(35vw); float: left; margin-top: 30px; column-count: 2; } .legend { background-color: gainsboro; width: calc(35vw); font-family: Belgika; font-size: 8pt; margin-top: 50px; list-style: none; margin-left: 11vw; border: 1px solid black; padding: 10px; float: left; } .eachlegend { padding: 5px; } .legendfixed { position: fixed; width: calc(35vw); font-size: 8pt; margin-top: 100px; list-style: none; margin-left: 11vw; border: 1px solid black; } .legend li { float: left; margin-right: 10px; margin: 5px; } .legend span { border: 1px solid #ccc; float: left; width: 14px; height: 14px; margin: 2px; } .legendhide { color: black; } .paragraph { font-size: 16px; width: 75%; margin-top: 70px; line-height: 1.5; float: right; } .eachwords { padding: 2px 4px 4px 4px; margin: -2.5px; 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; }