@charset "UTF-8"; @import url("fonts.css"); html { background-color: white; } body { font-family: Open Sans,Arial; color: #555; font-size: 16px; line-height: 1.4; text-align: justify; margin: 0; padding: 0; } #head { background-color: #060033; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 30px 60px; color: white; } @media (max-width: 1000px) { #head { padding: 20px; } } #head .title { font-size: 1.4em; font-weight: bold; } #head .whoami { font-weight: bold; padding-left: 20px; } @media (max-width: 1000px) { #head .whoami { font-size: 0.8em; } } #head a, #head a:visited { color: white; } #main-container { display: flex; justify-content: space-between; } @media (max-width: 1000px) { #main-container { flex-wrap: wrap; } } #main-container .tab-selector { margin: 40px; } #main-container .tab-selector ul { list-style: none; min-width: 200px; padding: 0; } #main-container .tab-selector ul li a { display: block; font-size: 1.2em; padding: 10px 20px; background-color: #060033; margin: 2px 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; transition: margin 0.1s ease-in-out; color: white; } #main-container .tab-selector ul li a:hover { margin-left: 10px; } #main-container .tab-selector ul li.active { margin-left: 20px; } #main-container #content { margin: 2em auto; max-width: 800px; padding: 1em; flex-basis: 800px; } #main-container .profilepic { flex: 0 0 auto; margin: 40px; width: 350px; height: auto; } @media (max-width: 1350px) { #main-container .profilepic { width: 180px; } } @media (max-width: 1000px) { #main-container .profilepic { flex-shrink: 2; width: 250px; order: -1; } } #main-container .profilepic img { margin: auto; max-height: 100%; max-width: 100%; border-radius: 20px; } @media (max-width: 1000px) { #main-container .profilepic img { border-radius: 50%; } } .items { display: grid; grid-template-columns: 100px auto; } .items .head { grid-column: 1/span 1; font-weight: bold; } a, a:visited { color: #07a; text-decoration: none; } .fa { color: #555; } h1 { margin-left: -10px; } h2 { margin-top: 30px; margin-left: 20px; } h2 .fa { margin-right: 10px; } #whoami { text-align: right; font-size: 1.2em; font-style: italic; } ul.docsline { list-style: none; text-align: center; margin-top: 30px; font-size: 1.1em; } ul.docsline li { display: inline-block; } ul.docsline li a { display: inline-block; padding: 0 15px; } dl { list-style: none; display: grid; grid-template-columns: 1fr 3fr; } dl dt { grid-column: 1 / span 1; justify-self: end; text-align: right; margin-right: 20px; font-weight: bold; } dl dd { margin-left: 20px; justify-self: start; text-align: left; } .antispam { unicode-bidi: bidi-override; direction: rtl; } ul.publications li .authors, ul.talks li .authors, ul.unpublished li .authors { font-style: italic; } ul.publications li .authors .author:after, ul.talks li .authors .author:after, ul.unpublished li .authors .author:after { content: ', '; } ul.publications li .authors .author:last-child:after, ul.talks li .authors .author:last-child:after, ul.unpublished li .authors .author:last-child:after { content: ''; } ul.publications li .title, ul.talks li .title, ul.unpublished li .title { font-weight: bold; } ul.teaching-courses li { list-style: circle; } .course-name .course-title { font-weight: bold; } .course-name .course-longtitle:before { content: ' — '; } .course-titleblock { margin-bottom: 20px; } .course-titleblock h2 { margin-bottom: 10px; } .course-titleblock .course-institute { text-align: right; font-size: 1.1em; font-style: italic; }