/**********************************************************************
* General styles
**********************************************************************/

* {
	font-family: Helvetica, Arial, sans-serif;
	font-size:   16px;
  font-weight: bold;
	line-height: 150%;
	color:       inherit;
	margin:      0px 0px 0px 0px;
	padding:     0px 0px 0px 0px;
	
	box-sizing: border-box;
	
	outline: none;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-y: hidden;
  overflow-x: auto;
}

a {
  text-decoration: none;
}

p a,
p a {
  text-decoration: underline;
}

p + p {
  margin-top: 1em;
}
  
.highlight {
  filter: drop-shadow(0 0 4px rgba(237, 0, 141, 0.75));
}


/**********************************************************************
* Page element styles
**********************************************************************/

:root {
  --article-padding-top: 120px;
  --article-padding-bottom: 20px;
  --article-padding-left: 20px;
  --article-padding-right: 20px;
  
  --element-gap: 20px;
  
  --legend-height: 79px; /* Actual height is 72 but the line break between the picture and the content adds some more space */
}

header {
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
  padding: 0 10px;
  z-index: 10;
}

nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  align-items: start;
}

nav > div {
  padding: 20px 10px 10px 10px;
  background-color: #fff;
}

nav > div:hover{
  filter: drop-shadow(0 0 4px rgba(237, 0, 141, 0.75));
}

nav > div:hover div.title{
  filter: drop-shadow(0 0 4px rgba(237, 0, 141, 0.75));
}

nav > div:hover ul.list {
  display: block;
}

nav > div:hover div.selection {
  display: none;
}

nav > div a:hover {
  filter: drop-shadow(0 0 4px rgba(237, 0, 141, 0.75));
}

nav ul.list {
  display: none;
  padding: 20px 0 40px 0;
  list-style: none;
}

nav div.title {
  padding-bottom: 5px;
  border-bottom: 1px solid #000;
}

nav div.selection {
  padding: 20px 0 0 0;
}

article {
  padding: var(--article-padding-top) var(--article-padding-right) var(--article-padding-bottom) var(--article-padding-left);
  height: 100vh;
}

/**********************************************************************
* Gallery styles
**********************************************************************/
  
.gallery .element {
  vertical-align: top;
  text-align: left;
  padding-right: var(--element-gap);
}

.gallery .container {
  display: block;
  height: calc(100vh - var(--article-padding-top) - var(--article-padding-bottom));
}
  
.gallery .image {
  
}
  
.gallery .video {
  
}
  
.gallery .legend {
  text-wrap: nowrap;
}
  
.gallery .legend a {
  text-decoration: underline;
}
  
.gallery .text {
  display: grid; /* Needed for the individual text columns */
  grid-auto-flow: column;
  grid-gap: var(--element-gap);
  grid-template-rows: 100%;
  height: 100%;
}

.gallery .text .text-column {
  min-width: 30ch;
  max-width: 60ch;
  width: 60vh;
}

.gallery .text .text-column a {
  text-decoration: underline;
}