@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; } .t_wrapper { font-family: 'Source Sans Pro', sans-serif; width: 49%; float: left; /* margin-right: 20px; */ } .t_intro { width: 75%; margin-top: 20px; margin-left: 15px; float: left; } .t_img { font-family: Belgika; font-size: 20pt; margin-left: 18px; } .t_imgfixed { width: 100%; height: calc(20vh); } .t_image { height: 20vh; margin-top: 30px; margin-left: 20px; cursor: pointer; } .t_img_clicked { height: calc(20vw); margin-top: 30px; } .t_info { font-family: Belgika; font-weight: 18th; font-size: 8pt; width: calc(30vw); margin-top: 30px; margin-left: 20px; column-count: 2; } .legend { background-color: gainsboro; width: calc(35vw); font-family: Belgika; font-size: 8pt; margin-top: 50px; list-style: none; border: 1px solid black; padding: 10px; margin-left: 30px; float: left; } .eachlegend { padding: 5px; } .legendfixed { position: fixed; width: calc(35vw); font-size: 8pt; margin-top: 100px; list-style: none; border: 1px solid black; } .legend li { float: left; margin-right: 10px; margin: 5px;} .legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; } .legendhide { color: black; } .t_paragraph { font-size: 16px; width: 75%; padding: 10px; margin-top: 650px; margin-left: 20px; line-height: 1.5; cursor: pointer; } .eachwords { padding: 2px 5px 4px 5px; margin: -3px; cursor: pointer; } .t_top_words { background-color: black; width: 10vw; height: 100%; font-family: Belgika; font-size: 7.5pt; color: white; letter-spacing: 0.5px; position: fixed; top: 0; right: calc(50vw); float: right; } .t_top_words_title { margin: 40px 10px 10px 10px; width: 80%; } .t_chosen_words { padding: 10px 1px 1px 10px; } .t_chosen_words:hover { background-color: white; color: red; }