html {
    font-size: max(1.5vw,1.5vh);
    font-family: "Helvetica","Arial",sans-serif;
    /*font-family: "cmr10","Times",serif;*/
}

body {
    margin: 0;
    background-color: #d0d0d0;
    text-align: left;
}

div#wrapper {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	/*background-color: green;
	border-bottom: solid 2px yellow;*/
}

#home h1 {
    display: none;
}

/* nav: static, scroller: sticky - ok on desktop, nok mobile */

div#scroller {
	  position: sticky;
	  top: 0;
	  bottom: 0;
    width: 100%;
	  height: 100%;
    /* overscroll-behavior: none; */
	  display: block;
    overflow-y: scroll;
    scroll-behavior: smooth;
    /*scroll-snap-type: y mandatory;*/
		scroll-snap-type: y;
	  padding-top: 10vh;
}

div#nav {
	  position:sticky;
	  z-index: 2;
	  top: 0;
    width: 100%;
    display: flex;
    place-content: stretch;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap;
    border-bottom-width: 8pt;
    border-bottom-color: rgba(0,0,0,0.25);
    border-bottom-style: solid;
    font-size: 80%;
		background-color: #c0c0c0;
}

div#nav * {
    font-weight: bold;
    /*font-size: 0.75em;*/
}

div#nav > a {
    list-style: none;
    margin-bottom: 0pt;
    flex: auto;

    /*font-weight: bold;
    font-size: 0.75em;*/

    background-color: rgba(0,0,0,0.125);

    border-left-width: 0pt;
    border-right-width: 4pt;
    border-top-width: 0pt;
    border-bottom-width: 0pt;
    border-color: rgba(0,0,0,0.5);
    border-style: solid;

    padding-left: 16pt;
    padding-right: 16pt;
    padding-top: 8pt;
    padding-bottom: 0pt;

    text-decoration: none;
    color: #202020;
}

div#nav > a::before {
    /*content: url('gfx/exhrd-x.svg');*/
    margin-right: 0.5em;
}

div#nav > a:hover {
    background-color: white;
}

div#nav > a:visited {
    color: #202020;
}

div#language {
    flex: auto;
    display: flex;
    place-content: end;
    margin-bottom: 4pt;
}

div#language ul {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0pt;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 8pt;
}

div#language li {
    list-style: none;
    display: inline;
    /*font-family: "Helvetica","Arial",sans-serif;
    font-size: 0.75em;*/
    padding-right: 1em;
}

div#language a {
    color: black;
    text-decoration: none;
}

div#language a:hover {
    background-color: red;
}

div#language li.current {
    text-decoration: underline;
    /*color: white;
    background-color: black;*/
}

div.section {
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

div#header {
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
    
    /*background-color: #d0d0d0;*/
    /*background-image: url('gfx/bg4.jpeg');*/
    /*background-size: cover;*/
    display: flex;
    place-content: end space-between;
}


/*div.section > h2::before {
    content: url('gfx/led0.png');
    margin-right: 0.5em;
}

div.section:target > h2::before {
    content: url('gfx/led1.png');
}*/

div#scroller div.section:last-child {
	  padding-bottom: 8em;
}

div.section > h2:before {
    content: url('gfx/exhrd-x.svg');
    object-fit: contain;
    padding-right: 8pt;
}

div.section > h2 {
    padding-top: 8pt;
    
    padding-left: 8pt;
    background-color: rgba(0,0,0,0.10);
    
    /*background-color: #c0c0c0;*/
    border: none;
    color: #808080;
    /*color: #e0e0e0;*/
    /*text-shadow: 2px 2px 2px black;*/
    border-bottom-color: rgba(0,0,0,0.3);
    border-bottom-width: 4pt;
    border-bottom-style: solid;
}

div.section:target > h2 {
    /*color: white;*/
    color: #202020;
}

div.section > div.content {
    /*display: flex;*/
    font-family: helvetica, sans-serif;
}

div#phone::first-letter {
	color: black;
}

div.prose::first-letter {
    color: black;
    /*border-width: 4pt;
    border-style: ridge;
    border-color: black;*/
    margin-right: -4pt;
    padding-left: 20pt;
    padding-right: 4pt;
    line-height: 1em;
    /*background-color: rgba(0,0,0,0.25);*/
    font-size: 4em;
    font-weight: bolder;
    /*text-shadow: 4px 4px 2px black;*/
}

div.prose {
    /*font-family: "Times",serif;*/
    
    /*font-size: max(1.5vw,1.5vh);*/
    column-width: 20em;
    column-gap: 2em;
    column-rule-color: rgba(0,0,0,0.25);
    column-rule-style: solid;
    column-rule-width: 2pt;
    margin-left: 0;
    margin-right: 1em;
    padding-left: 8pt;
    width: 95%;
    /*display: block;*/
    padding-bottom: 10vw;
}

div.prose h3 {
	column-span: all;
	border-bottom: solid 4pt #888;
}

div.prose h4 {
	margin: 0;
}

.publication .title {
    font-style: italic;
}

.publication button {
    border: none;
    font-size: 0.5em;
}

.visible button {
    display: block;
	  margin-top: 1em;
}

button:hover {
	 background-color: red;
}

.hidden button::after {
    content: "DETAILS";
}

.visible button::after {
   content: "HIDE";
}

h1#home {
	display: none;
}

.hidden .details {
    display: none;
}

.visible .details {
    display: block;
	  width: 75%;
	  margin-left: 0%;
	  font-size: 75%;
    background-color: rgba(255,255,255,0.25);
}

.pubname {
	  font-weight: bold;
}

ul.authors {
    display: block;
}

.publication a {
	color: black;
	text-decoration: none;
}

.publication a:visited {
	color: black;
}

.publication a:hover {
	text-decoration: underline;
}

.publication ul {
    padding: 0;
}

.publication ul {
    list-style: none;
    /*display: inline;*/
}

.publication ul li {
    display: inline;
}

.publication ul li:not(:last-child)::after {
    content: ","
}

div#contact {
    /*padding-bottom: 100vw;*/
}

div.gfx {
    width: 100%;
    /*display: flex;
    flex-direction: row-reverse;*/
    /*overflow-x: scroll;*/
    /*width: 100%;
    height: 50%;*/
    /*scroll-behavior: smooth;
    scroll-snap-type: x mandatory;*/
}

div.gfx img {
  width: 100%;
  height: fit-content;
  object-fit: scale-down;
}

div#photo {
    display: block;
}

div#photo span {
	  display: block;
		font-weight: bold;
    margin-bottom: 0;
}

div.good-break {
    display: inline;
    width: 100%;
    background-color: yellow;
    flex: auto;
    height: 30pt;
}

div#photo img {
  max-width: 50%;
  width: auto;
  height: auto;
}

div#photo {
  text-align: center;
}

div.gfx img[src~="static/gfx/berke.jpeg"] {
  width: 50%;
  padding-left: 25%;
  padding-right: 25%;
  padding-top: 25%;
  padding-bottom: 25%;
}

img#logo {

}

img#logo-trailer {
	height: 4em;
	width: auto;
}

div#trailer {
    display: block;
    height: 100vh;
}

span#version {
    display: none;
}

span#version::after {
    content:"CSS:0.3";
    font-size: 50%;
}

div#legal {
    display: flex;
    font-size: 0.5em;
    background-size: cover;
    background-color: #40a0ff;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5vh;
    color: white;
    flex-wrap:  nowrap;
    align-content: space-between;
    padding-top: 8pt;
    padding-left: 10px;
 }

div#legal span {
    font-size: min(2em,2vw,2vh);
    /*margin-left: 0.1em;*/
    /*margin-top: 0.125em;
    
    margin-right: 0.1em;
    margin-bottom: 0.125em;*/
    flex: auto;
}

div#legal span:nth-last-child(1) {
    text-align: right;
    padding-right: 20px;
}

div#legal a {
    color: white;
}

div.inline-block {
    display: inline-block;
}