@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");.highlight { color: #fdce93; background-color: #3a3a3a; border-radius: 4px } ul { list-style: square; } body { zoom: 110%; } .highlight .hll { background-color: #222 } .highlight .c { color: #7f9f7f } .highlight .err { color: #e37170; background-color: #3d3535 } .highlight .g { color: #7f9f7f } .highlight .k { color: #f0dfaf } .highlight .l { color: #cccccc } .highlight .n { color: #d3cfce } .highlight .o { color: #f0efd0 } .highlight .x { color: #cccccc } .highlight .p { color: #cccccc } .highlight .cm { color: #7f9f7f } .highlight .cp { color: #7f9f7f } .highlight .c1 { color: #7f9f7f } .highlight .cs { color: #cd0000; font-weight: bold } .highlight .gd { color: #cd0000 } .highlight .ge { color: #ccc; font-style: italic } .highlight .gr { color: red } .highlight .gh { color: #d3cfce; font-weight: bold } .highlight .gi { color: #00cd00 } .highlight .go { color: gray } .highlight .gp { color: #d3cfce; font-weight: bold } .highlight .gs { color: #cccccc; font-weight: bold } .highlight .gu { color: purple; font-weight: bold } .highlight .gt { color: #0040D0 } .highlight .kc { color: #dca3a3 } .highlight .kd { color: #ffff86 } .highlight .kn { color: #dfaf8f; font-weight: bold } .highlight .kp { color: #cdcf99 } .highlight .kr { color: #cdcd00 } .highlight .kt { color: #00cd00 } .highlight .ld { color: #cc9393 } .highlight .m { color: #8cd0d3 } .highlight .s { color: #cc9393 } .highlight .na { color: #9ac39f } .highlight .nb { color: #efef8f } .highlight .nc { color: #efef8f; font-weight: bold } .highlight .no { color: #cccccc } .highlight .nd { color: #efef8f } .highlight .ni { color: #c28182 } .highlight .ne { color: #c3bf9f; font-weight: bold } .highlight .nf { color: #efef8f; font-weight: bold } .highlight .nl { color: #cccccc } .highlight .nn { color: #d3cfce } .highlight .nx { color: #cccccc } .highlight .py { color: #cccccc } .highlight .nt { color: #9ac39f } .highlight .nv { color: #d3cfce } .highlight .ow { color: #f0efd0 } .highlight .w { color: #cccccc } .highlight .mf { color: #8cd0d3 } .highlight .mh { color: #8cd0d3 } .highlight .mi { color: #8cd0d3 } .highlight .mo { color: #8cd0d3 } .highlight .sb { color: #cc9393 } .highlight .sc { color: #cc9393 } .highlight .sd { color: #cc9393 } .highlight .s2 { color: #cc9393 } .highlight .se { color: #cc9393 } .highlight .sh { color: #cc9393 } .highlight .si { color: #cc9393 } .highlight .sx { color: #cc9393 } .highlight .sr { color: #cc9393 } .highlight .s1 { color: #cc9393 } .highlight .ss { color: #cc9393 } .highlight .bp { color: #efef8f } .highlight .vc { color: #efef8f } .highlight .vg { color: #d3cfce } .highlight .vi { color: #ffffc7 } .highlight .il { color: #8cd0d3 } a:hover { position:relative; top:-2px; } * { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; box-sizing: border-box; font-size: 1em; } html,body { font-size: 16px; font-weight: 325; margin: 0; padding: 0 } img,video,table { max-width: 100% } video { max-height: 80vh } h1,h2,h3,h4 { font-weight: 500; margin: 1.8em 0 .8em 0; clear: both; text-align: left } h1 { font-size: 2.0em } h2 { font-size: 1.5em } h3 { font-size: 1.4em } h4 { font-size: 1.2em } p,ul,ol,td { margin: 1em 0; line-height: 1.3; font-size: 1.1em; } @media (max-width: 480px) { p,ul,ol,td { text-align:left } } ul,ol { padding-left: 1.1em } a,a:hover,a:visited { color: inherit; text-decoration: none; cursor: pointer } p>a,p>a:hover,p>a:visited,li>a,li>a:hover,li>a:visited,td>a,td>a:hover,td>a:visited { color: darkred } p>a:hover,li>a:hover,td>a:hover { text-decoration: underline } li { margin: .5em 0 } table { border-spacing: 0 } td { padding: .2em .5em .2em 0 } .wrapper { margin: 0 auto; max-width: 53rem; padding-left: 1rem; padding-right: 1rem } @media (min-width: 1025px) { .wrapper { padding-left:2rem; padding-right: 2rem } } header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 1em; padding-bottom: 1em; row-gap: .5em } .logo,.logo:hover,.logo:visited { display: flex; align-items: center; text-decoration: none; color: #111; margin: .5em 1em 0 0 } .logo img,.logo:hover img,.logo:visited img { width: 3em; height: 3em; flex-shrink: 0; margin-right: .8em; border-radius: .2rem } .logo div,.logo:hover div,.logo:visited div { display: flex; flex-direction: column } .logo .title, .title,.logo:visited .title { font-size: 1.3em; font-weight: 500 } .logo .slogan,.logo:hover .slogan,.logo:visited .slogan { font-size: .9em; color: #888; margin-bottom: .2em } .logo img.landing { display: none } @media (max-width: 480px) { .logo img.landing { display:inline-block } } nav { display: flex; flex-wrap: wrap; column-gap: 1em; row-gap: .4em } nav a { display: inline-block; padding: .5em; margin: -.2em -.5em -.5em; font-weight: 400 } @media (min-width: 1025px) { nav a { margin:-.4em } } footer { height: 3em } article>h1:first-child { margin-top: .5em } .intro { margin-top: 1.2rem; display: flex } .intro .left { width: 25% } .intro .centerphoto { width: 75%; margin-left: auto; margin-right: auto; } .intro .center { width: 92%; margin-left: auto; margin-right: auto; } @media (max-width: 480px) { .intro .left { display:none } .intro .right { display:none } .intro .center { display: block } .intro .centerphoto { display: block } } @media (min-width: 481px) { .intro .center { display: none } .intro .centerphoto { display: none } } .intro .left img.face { width: 100%; border-radius: .2rem; box-shadow: 0.05em 0.05em 0.2em rgba(0,0,0,0.3); margin-top: 0rem } .intro .right { flex: 1; margin-left: 2rem; margin-top: 0.5rem; margin-bottom: 0.0rem; } .intro .right h2 { font-size: 1.5rem; margin-top: 0 } .intro .right h2 span { font-weight: 800 } .intro .right p { text-align: left } .intro .right .contact { width: 100%; margin-bottom: 0; text-align: center } .intro .right .contact>*:last-child { margin-right: 0 } .contact { display: flex; justify-content: left; align-items: center; flex-wrap: wrap } .contact a,.contact a:hover,.contact a:visited,.contact span { flex-shrink: 0; margin: 0 .9em 0 0; color: #888; text-decoration: none } .contact img { width: 2rem; height: 2rem } .contact span img { margin-right: .5em } .students { list-style: none; padding: 0 } .students li { display: inline-block; margin: .3em 1em 0 0; width: 7.5em; vertical-align: top; text-align: center; line-height: 1 } .students img { width: 100%; box-shadow: 0.05em 0.05em 0.2em rgba(0,0,0,0.3); border-radius: .2em } .students a { display: block; margin: .5em 0 0; text-align: center; font-weight: 500 } .students a,.students a:hover,.students a:visited { color: #000 } .students a:hover { text-decoration: underline } .students .current { font-size: .9em; text-align: center; color: #aaa; margin: .4em 0 .3em } .students .next { font-size: .9em; text-align: center; color: #aaa; margin: 0 } .students .next::before { content: '(' } .students .next::after { content: ')' } .cover { margin-bottom: 1em; background: #000; color: #fff; padding: .5em 0 1.5em; text-align: center; font-size: 1.2em; cursor: default } .cover h1,.cover p { text-align: center } @media (max-width: 480px) { .cover h1 { margin-top:1em } } .cover .authors .author { display: inline-block; margin: 0 .5em .3em } .cover .authors a:hover { text-decoration: underline } .authors { font-size: 0.6em; } .cover .venues { margin: 1em 0; color: #000 } .cover .image { margin: 1.4em 0 .5em } .cover .image>img,.cover .image>video { width: 100% } .cover .buttons { display: block; margin: 0; font-size: 1.1rem } .cover .buttons a { display: inline-block; padding: .5em .8em .4em; margin: 1em .5em .5em; background: #000; color: #fff; border: 1px solid #fff; transition: all .2s } .cover .buttons a:hover { background: #fff; color: #000; text-decoration: none } .panel { width: 48%; display: inline-block; vertical-align: top; margin-right: 1%; text-align: left } .content p img { margin: 1em 0 } .logos { text-align: center } .logos a { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; max-width: 100%; height: 4em; width: 8em; margin: 1em } .hidden { display: none; } .unhidden { display: table; position:relative; /* width:80%; */} pre { background-color: #f5f5f5; color: #110000; border: 2; font-size:0.9em; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; line-height:1.2em; max-width: 540px; whitewhite-space: pre-wrap; /* css-3 */ whitewhite-space: -pre-wrap; /* Opera 4-6 */ whitewhite-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5+ */ whitewhite-space: -moz-pre-wrap; /* Older Versions of Mozilla */ } ::-webkit-scrollbar { -webkit-appearance: none; } ::-webkit-scrollbar:vertical { width: 0.75em; } /*::-webkit-scrollbar:horizontal { height: 12px; }*/ ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 1em; border: 2px solid #ffffff; } .collection { list-style: none; padding: 0; margin: 1.5em 0 2.9em } .collection li { display: flex; margin-bottom: 1.7em } .collection .thumb { width: 5.5em; height: 5.5em; flex-shrink: 0; margin-right: 1em } .collection .thumb img { width: 100%; height: 100%; box-shadow: 0.05em 0.05em 0.2em rgba(0,0,0,0.3); border-radius: .2em } .collection .thumb2 { width: 6em; height: 5.5em; flex-shrink: 0; margin-right: 1em } .collection .thumb2 img { width: 100%; height: 100%; box-shadow: 0.05em 0.05em 0.2em rgba(0,0,0,0.3); border-radius: .2em } .collection .text { flex-grow: 1; display: flex; flex-direction: column } .collection h3 { font-size: 1.2em; margin: -.2em 0 .1em } .collection a h3:hover { text-decoration: underline } .collection p { margin: 0; font-size: 0.95em } .collection .date { color: #888 } .collection .venues { color: #000; } .collection .stars { display: flex; align-items: center } .collection .stars img { height: 1.1em; margin-right: .3em; opacity: .4 } .collection .stars span { color: #888 } .collection .buttons { margin: .2em 0 0 } .collection .buttons a { margin: 0 .3em .5em 0; background: none; color: darkred; border-radius: 0; border: none; padding: 0; font-size: 1em } .tiles { list-style: none; padding: 0; margin: 1.5em 0 0 0; gap: 1.5rem 1.7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(6rem, 20%), 1fr)) } .tiles li { display: inline-block; margin: 0 } .tiles li .image { aspect-ratio: 16 / 9; margin: 0; background-color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom: 1px solid #ccc; box-shadow: 0.05em 0.05em 0.2em rgba(0,0,0,0.3); border-radius: .2rem } .tiles li a { color: #000 } .tiles li h3 { margin: 0; padding: .4rem 0 0; font-size: 1rem; overflow: hidden } pre { margin: 1em 0; padding: 1em; overflow-x: auto; border-radius: .2rem }