@font-face { font-family: 'Noto Sans'; font-weight: 400; font-style: normal; src: url("../fonts/Noto-Sans-regular/Noto-Sans-regular.eot"); src: url("../fonts/Noto-Sans-regular/Noto-Sans-regular.eot?#iefix") format("embedded-opentype"), local("Noto Sans"), local("Noto-Sans-regular"), url("../fonts/Noto-Sans-regular/Noto-Sans-regular.woff2") format("woff2"), url("../fonts/Noto-Sans-regular/Noto-Sans-regular.woff") format("woff"), url("../fonts/Noto-Sans-regular/Noto-Sans-regular.ttf") format("truetype"), url("../fonts/Noto-Sans-regular/Noto-Sans-regular.svg#NotoSans") format("svg"); } @font-face { font-family: 'Noto Sans'; font-weight: 700; font-style: normal; src: url("../fonts/Noto-Sans-700/Noto-Sans-700.eot"); src: url("../fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold"), local("Noto-Sans-700"), url("../fonts/Noto-Sans-700/Noto-Sans-700.woff2") format("woff2"), url("../fonts/Noto-Sans-700/Noto-Sans-700.woff") format("woff"), url("../fonts/Noto-Sans-700/Noto-Sans-700.ttf") format("truetype"), url("../fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans") format("svg"); } @font-face { font-family: 'Noto Sans'; font-weight: 400; font-style: italic; src: url("../fonts/Noto-Sans-italic/Noto-Sans-italic.eot"); src: url("../fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Italic"), local("Noto-Sans-italic"), url("../fonts/Noto-Sans-italic/Noto-Sans-italic.woff2") format("woff2"), url("../fonts/Noto-Sans-italic/Noto-Sans-italic.woff") format("woff"), url("../fonts/Noto-Sans-italic/Noto-Sans-italic.ttf") format("truetype"), url("../fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans") format("svg"); } @font-face { font-family: 'Noto Sans'; font-weight: 700; font-style: italic; src: url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot"); src: url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold Italic"), local("Noto-Sans-700italic"), url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2") format("woff2"), url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff") format("woff"), url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf") format("truetype"), url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans") format("svg"); } .highlight table td { padding: 5px; } .highlight table pre { margin: 0; } .highlight .cm { color: #999988; font-style: italic; } .highlight .cp { color: #999999; font-weight: bold; } .highlight .c1 { color: #999988; font-style: italic; } .highlight .cs { color: #999999; font-weight: bold; font-style: italic; } .highlight .c, .highlight .cd { color: #999988; font-style: italic; } .highlight .err { color: #a61717; background-color: #e3d2d2; } .highlight .gd { color: #000000; background-color: #ffdddd; } .highlight .ge { color: #000000; font-style: italic; } .highlight .gr { color: #aa0000; } .highlight .gh { color: #999999; } .highlight .gi { color: #000000; background-color: #ddffdd; } .highlight .go { color: #888888; } .highlight .gp { color: #555555; } .highlight .gs { font-weight: bold; } .highlight .gu { color: #aaaaaa; } .highlight .gt { color: #aa0000; } .highlight .kc { color: #000000; font-weight: bold; } .highlight .kd { color: #000000; font-weight: bold; } .highlight .kn { color: #000000; font-weight: bold; } .highlight .kp { color: #000000; font-weight: bold; } .highlight .kr { color: #000000; font-weight: bold; } .highlight .kt { color: #445588; font-weight: bold; } .highlight .k, .highlight .kv { color: #000000; font-weight: bold; } .highlight .mf { color: #009999; } .highlight .mh { color: #009999; } .highlight .il { color: #009999; } .highlight .mi { color: #009999; } .highlight .mo { color: #009999; } .highlight .m, .highlight .mb, .highlight .mx { color: #009999; } .highlight .sb { color: #d14; } .highlight .sc { color: #d14; } .highlight .sd { color: #d14; } .highlight .s2 { color: #d14; } .highlight .se { color: #d14; } .highlight .sh { color: #d14; } .highlight .si { color: #d14; } .highlight .sx { color: #d14; } .highlight .sr { color: #009926; } .highlight .s1 { color: #d14; } .highlight .ss { color: #990073; } .highlight .s { color: #d14; } .highlight .na { color: #008080; } .highlight .bp { color: #999999; } .highlight .nb { color: #0086B3; } .highlight .nc { color: #445588; font-weight: bold; } .highlight .no { color: #008080; } .highlight .nd { color: #3c5d5d; font-weight: bold; } .highlight .ni { color: #800080; } .highlight .ne { color: #990000; font-weight: bold; } .highlight .nf { color: #990000; font-weight: bold; } .highlight .nl { color: #990000; font-weight: bold; } .highlight .nn { color: #555555; } .highlight .nt { color: #000080; } .highlight .vc { color: #008080; } .highlight .vg { color: #008080; } .highlight .vi { color: #008080; } .highlight .nv { color: #008080; } .highlight .ow { color: #000000; font-weight: bold; } .highlight .o { color: #000000; font-weight: bold; } .highlight .w { color: #bbbbbb; } .highlight { background-color: #f8f8f8; } body { background-color: #fff; padding: 50px; font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #727272; font-weight: 400; } h1, h2, h3, h4, h5, h6 { color: #222; margin: 0; } p, ul, ol, table, pre, dl { margin: 0; } h1, h2, h3 { line-height: 1.1; } h1 { font-size: 28px; } h2 { color: #393939; } h3, h4, h5, h6 { color: #494949; } a { color: #18181b; text-decoration: none; transition: all 0.2s ease; border-bottom: 1px solid rgba(24, 24, 27, 0.2); } a:hover, a:focus { color: #18181b; font-weight: normal; border-bottom: 1px solid rgba(24, 24, 27, 0.8); } a small { font-size: 11px; color: #777; margin-top: -0.3em; display: block; } a:hover small { color: #777; } .wrapper { width: 860px; margin: 0 auto; } blockquote { border-left: 1px solid #e5e5e5; margin: 0; padding: 0 0 0 20px; font-style: italic; } code, pre { font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace; color: #333; } pre { padding: 8px 15px; background: #f8f8f8; border-radius: 5px; border: 1px solid #e5e5e5; overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 5px 10px; border-bottom: 1px solid #e5e5e5; } dt { color: #444; font-weight: 700; } th { color: #444; } img { max-width: 100%; } header { width: 270px; float: left; position: fixed; -webkit-font-smoothing: subpixel-antialiased; } ul.downloads { list-style: none; height: 40px; padding: 0; background: #f4f4f4; border-radius: 5px; border: 1px solid #e0e0e0; width: 270px; } .downloads li { width: 89px; float: left; border-right: 1px solid #e0e0e0; height: 40px; } .downloads li:first-child a { border-radius: 5px 0 0 5px; } .downloads li:last-child a { border-radius: 0 5px 5px 0; } .downloads a { line-height: 1; font-size: 11px; color: #676767; display: block; text-align: center; padding-top: 6px; height: 34px; } .downloads a:hover, .downloads a:focus { color: #675C5C; font-weight: bold; } .downloads ul a:active { background-color: #f0f0f0; } strong { color: #222; font-weight: 700; } .downloads li + li + li { border-right: none; width: 89px; } .downloads a strong { font-size: 14px; display: block; color: #222; } section { width: auto; float: none; padding-bottom: 30px; } small { font-size: 11px; } hr { border: 0; background: #e5e5e5; height: 1px; margin: 0 0 20px; } footer { width: 270px; float: left; position: fixed; bottom: 50px; -webkit-font-smoothing: subpixel-antialiased; } @media print, screen and (max-width: 960px) { div.wrapper { width: auto; margin: 0; } header, section, footer { float: none; position: static; width: auto; } header { padding-right: 320px; } section { border: 1px solid #e5e5e5; border-width: 1px 0; padding: 20px 0; margin: 0 0 20px; } header a small { display: inline; } header ul { position: absolute; right: 50px; top: 52px; } } @media print, screen and (max-width: 720px) { body { word-wrap: break-word; } header { padding: 0; } header ul, header p.view { position: static; } pre, code { word-wrap: normal; } } @media print, screen and (max-width: 480px) { body { padding: 15px; } .downloads { width: 99%; } .downloads li, .downloads li + li + li { width: 33%; } } @media print { body { padding: 0.4in; font-size: 12pt; color: #444; } } .wrapper { width: 1030px; } header { width: 290px; } ul.downloads { width: 290px; } footer { width: 290px; } section { width: 680px; } li { margin: 0 0 10px 0; } h1.title { font-size: 25px; margin: 0 0 10px; } .avatar { width: 160px; margin-bottom: 8px; } img.avatar { border-radius: 50%; } li.news { margin: 0 0 6px 0; } li.experience { margin: 0 0 8px 0; text-align: left; } a.affiliation { color: #727272; font-size: 18px; } a.affiliation:hover, a.affiliation:focus { font-weight: 700; color: #555555; } a.pub_details { color: #16a34a; border-bottom: 1px solid rgba(22, 163, 74, 0.2); } a.pub_details:hover, a.pub_details:focus { color: #15803d; border-bottom: 1px solid rgba(22, 163, 74, 0.8); } a.pub_resources:hover, a.pub_details:focus { color: #009926; } a.coauthor { color: #71717a; border-bottom: none; } a.coauthor:hover, a.coauthor:focus { color: #52525b; font-weight: normal; border-bottom: none; } a.paper-title { color: #18181b; border-bottom: 1px solid rgba(24, 24, 27, 0.2); } a.paper-title:hover, a.paper-title:focus { border-bottom: 1px solid rgba(24, 24, 27, 0.8); } a:has(img) { border-bottom: none; } a:has(img):hover { border-bottom: none; } .emoji-icon { width: 1.8em; /* Match the width to the current font size */ height: 1.8em; /* Match the height to the current font size */ vertical-align: middle; /* Aligns the image to the middle of the text */ margin-right: 0.2em; /* Some space between the image and the text */ margin-bottom: 0.5em;; } .emoji-icon-harmbench { width: 1.5em; height: 1.5em; vertical-align: middle; margin-right: 0.1em; margin-bottom: 0.3em;; } a.coauthor:hover, a.coauthor:focus { font-weight: 700; color: #555555; } a.best-paper { background-color: rgba(255, 0, 0, 0.7); color: white; font-size: 12px; border-radius: 3px; } strong.myself { color: #555555; } strong.company { color: #555555; } strong.headline { font-weight: 700; color: #555555; } span.vendor { font-style: italic; } span.google_scholar { font-weight: normal; font-size: 14px; } span.ReCoRD { font-family: 'Lato', sans-serif; } span.ReCoRD-shadow { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: none; text-align: center; -o-text-overflow: clip; text-overflow: clip; text-shadow: 0 -0.125px 0 #808d93, 0.125px 0 0 #cdd2d5, 0.125px -0.25px 0 #808d93, 0.25px -0.125px 0 #cdd2d5, 0.25px -0.375px 0 #808d93, 0.375px -0.25px 0 #cdd2d5, 0.375px -0.5px 0 #808d93, 0.5px -0.375px 0 #cdd2d5, 0.5px -0.625px 0 #808d93, 0.625px -0.5px 0 #cdd2d5, 0.625px -0.75px 0 #808d93, 0.75px -0.625px 0 #cdd2d5, 0.75px -0.8875px 0 #808d93, 0.8875px -0.75px 0 #cdd2d5, 0.8875px -1px 0 #808d93, 1px -0.8875px 0 #cdd2d5; } span.important { color: rgba(255, 0, 0, 0.7); } @media print, screen and (max-width: 960px) { .contact { position: absolute; right: 50px; top: 32px; } .avatar { width: 100px; } section { width: auto; } } /* Main layout */ .wrapper { display: grid; grid-template-columns: 250px 1fr; gap: 1.2rem; max-width: 1100px; margin: 0 auto; padding: 1.2rem; } .sidebar { position: sticky; top: 1.2rem; height: fit-content; } .profile-section { text-align: center; } /* Profile image adjustments */ .avatar { width: 180px; height: 180px; border-radius: 50%; margin-bottom: 0.6rem; object-fit: cover; object-position: 0 10%; /* Shifts the image up within the circle */ border: 2px solid #eee; } .profile-section h1 { font-size: 1.5rem; margin: 0.4rem 0; } /* Social links */ .social-links { display: flex; justify-content: center; gap: 0.8rem; margin-top: 0.6rem; } .social-links a { font-size: 1.3rem; color: #555; transition: color 0.2s, transform 0.2s; } .social-links a:hover { color: #007bff; transform: translateY(-2px); } /* Content area */ .content { max-width: 100%; overflow-wrap: break-word; } /* Section spacing adjustments */ section { margin-bottom: 0.6rem; /* Significantly reduced */ } .bio { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0; /* Removed margin */ } h2 { font-size: 1.3rem; margin-bottom: 0.3rem; border-bottom: none; /* Remove the border/underline */ padding-bottom: 0.2rem; } /* Publications and achievements sections */ .publications ul, .achievements ul { padding-left: 1rem; margin-top: 0; /* Removed margin */ } .publications li, .achievements li { margin-bottom: 1rem; /* Increase space between papers */ } /* Keep the last paper's spacing consistent with the section */ .publications li:last-child { margin-bottom: 0; } /* Responsive design */ @media (max-width: 768px) { body { padding: 15px; word-wrap: break-word; } .wrapper { grid-template-columns: 1fr; padding: 0.8rem; gap: 0.8rem; width: auto; max-width: 100%; margin: 0; } .sidebar { position: static; margin-bottom: 1rem; width: 100%; } .content { width: 100%; padding: 0; margin: 0; } /* Make long URLs and text wrap */ a { word-wrap: break-word; overflow-wrap: break-word; } /* Adjust list items for better mobile display */ .publications li, .achievements li { margin-bottom: 1rem; padding-right: 0; } /* Ensure images don't overflow */ img { max-width: 100%; height: auto; } /* Adjust text sizes for readability */ .bio { font-size: 0.95rem; line-height: 1.4; } h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } } /* Additional mobile optimization */ @media (max-width: 480px) { body { padding: 10px; } .wrapper { padding: 0.5rem; } .content { padding: 0; } /* Further reduce sizes for very small screens */ .bio { font-size: 0.9rem; } h1 { font-size: 1.3rem; } h2 { font-size: 1.2rem; } .publications li, .achievements li { font-size: 0.9rem; } /* Adjust spacing */ section { padding-bottom: 20px; } } /* Social links should not have underlines */ .social-links a { border-bottom: none; } .social-links a:hover { border-bottom: none; } /* Add a new rule specifically for paper links with images */ .publications li a:has(img) { border-bottom: 1px solid rgba(24, 24, 27, 0.2); } .publications li a:has(img):hover { border-bottom: 1px solid rgba(24, 24, 27, 0.8); } /* Keep social links and other image links without underlines */ .social-links a:has(img), .achievements a:has(img) { border-bottom: none; } .social-links a:has(img):hover, .achievements a:has(img):hover { border-bottom: none; } /* Add a specific style for the Google Scholar link */ .scholar-link { font-size: 0.9rem; /* Slightly smaller text */ margin-left: 0.5rem; /* Add some space between title and link */ color: #71717a; /* Lighter color to distinguish from section title */ } .scholar-link:hover { color: #52525b; } /* Publication list styling */ .publications li { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }