/* the props */
@import "https://unpkg.com/open-props";

/* optional imports that use the props */
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";

/* just dark or light themes */
@import "https://unpkg.com/open-props/normalize.dark.min.css";
@import "https://unpkg.com/open-props/buttons.dark.min.css";
/* @import "https://unpkg.com/open-props/normalize.light.min.css";
@import "https://unpkg.com/open-props/buttons.light.min.css"; */

/* individual imports */
/* @import "https://unpkg.com/open-props/indigo.min.css";
@import "https://unpkg.com/open-props/indigo-hsl.min.css";
@import "https://unpkg.com/open-props/easings.min.css";
@import "https://unpkg.com/open-props/animations.min.css";
@import "https://unpkg.com/open-props/sizes.min.css";
@import "https://unpkg.com/open-props/gradients.min.css"; */


@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.woff2");
}




@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../webfonts/RockSalt-Regular.ttf");
}



:root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Free';
  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
  -webkit-font-smoothing: antialiased;
}


:root{
  --color-accent-dark: var(--orange-12);
  --color-accent-middark: var(--orange-10);
  --color-accent-mid: var(--orange-6);
  --color-accent-midlight: var(--orange-2);
  --color-accent-lightmid: var(--orange-2);
  --color-accent-light: var(--orange-3);

  --color-accent-teaching: var(--red-3);
  --color-accent-publications: var(--blue-2);
  --color-accent-projects: var(--violet-3);
  --color-accent-supervision: var(--red-2);
  --color-accent-career: var(--teal-3);
  --color-accent-haves: var(--teal-3);
  --color-accent-social: var(--purple-3);
  --color-accent-service: var(--indigo-3);

  --color-default_nonchanging: var(--text-1);
  --color-default: var(--text-1);
  --color-dim: var(--gray-8);
  --color-lightdim: var(--gray-6);

  --font-weight-regular: var(--font-weight-4);
  --font-weight-accent: var(--font-weight-7);

  --size-content-0: calc(1.1 * var(--size-fluid-7));
  --size-content-1: calc(1.1 * var(--size-fluid-7));
  --size-content-2: calc(1.0 * var(--size-fluid-8));
  --size-content-23: calc(1.0 * var(--size-fluid-9));
  --size-content-3: calc(1.2 * var(--size-fluid-10));
  --size-content-4: calc(1.8 * var(--size-fluid-10));
}

/* :focus {
  border: 1px solid var(--color-accent-mid);
} */
::-moz-selection {
  color: var(--color-default);
  background: var(--color-accent-mid);
}
::selection {
  color: var(--color-default);
  background: var(--color-accent-mid);
}


/* second level nav dropdowns*/
.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  /* backdrop-filter: blur(20px); */
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--surface-3);
  box-shadow: var(--shadow-2);
  min-width: min(100%, var(--size-content-1));
  z-index: 1;
  border-radius: 0.5rem;
  border: 1px solid var(--surface-1);
  padding: var(--size-1) var(--size-3) var(--size-1) var(--size-3);
  border-color: var(--surface-1);
  text-wrap: nowrap;
}
.dropdown-content a { display: block; }
.dropdown:hover .dropdown-content {display: block;}
.dropdown:focus .dropdown-content {display: block;}
.dropdown:focus-within .dropdown-content {display: block;}
.dropdown:hover > a {color: var(--color-default);}
.dropdown:focus > a {color: var(--color-default);}

/* images*/
.picture_container{
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-fluid-2);
  justify-content: space-evenly;
  place-items: center;
  margin-top: var(--size-4);
  margin-inline: var(--size-1);
}
.picture_card {
  padding: var(--size-fluid-2);
  background-color: var(--surface-1);
  border-radius: 0.5rem;
  width: var(--size-content-4);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--color-dim);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: 
    "head head meta"
    "content content content"
  ;
  gap: var(--size-1);
  background: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .8) 100%),
    var(--bg-img, url('/images/pics/bremen.jpg'))
    no-repeat
    center;
  background-size: cover;
}
.picture_title {
  grid-area: head;
  text-align: center;
  font-family: 'Rock Salt';
  padding-bottom: var(--size-fluid-3);
}
.picture_title > * {
  text-shadow: 0 0 var(--size-3) hsl(0 0 0 / 100%);
}
.picture_title h3::before {
  content: '#';
  position: relative;
  color: var(--color-default_nonchanging);
}
.picture_meta {
  grid-area: meta;
  text-align: right;
  text-shadow: 0 0 var(--size-2) hsl(0 0 0 / 100%);
}
.picture_content {
  grid-area: content;
  text-align: justify;
  text-shadow: 0 0 var(--size-2) hsl(0 0 0 / 100%);
}
.picture_content em {
  color: var(--color-accent-light);
  font-size: var(--font-size-fluid-1);
}


.color-accent {
  color: var(--color-accent-lightmid) !important;
}
.color-default {
  color: var(--color-default_nonchanging) !important;
}
h4, h5 :where(color-default) {
  color: var(--color-accent-lightmid);
}
h4, h5 :where(color-accent) {
  color: var(--color-default_nonchanging);
}
.area_service {
  --color-accent-midlight: var(--color-accent-service);
  --color-accent-lightmid: var(--color-accent-service);
  --color-accent-light: var(--color-accent-service);
  --color-default: var(--color-default_nonchanging);
}

.area_haves {
  --color-accent-midlight: var(--color-accent-haves);
  --color-accent-lightmid: var(--color-accent-haves);
  --color-accent-light: var(--color-accent-haves);
  --color-default: var(--color-default_nonchanging);
}
.area_social {
  --color-accent-midlight: var(--color-accent-social);
  --color-accent-lightmid: var(--color-accent-social);
  --color-accent-light: var(--color-accent-social);
  --color-default: var(--color-default_nonchanging);
}
.area_teaching {
  --color-accent-midlight: var(--color-accent-teaching);
  --color-accent-lightmid: var(--color-accent-teaching);
  --color-accent-light: var(--color-accent-teaching);
  --color-default: var(--color-default_nonchanging);
}
.area_publications {
  --color-accent-midlight: var(--color-accent-publications);
  --color-accent-lightmid: var(--color-accent-publications);
  --color-accent-light: var(--color-accent-publications);
  --color-default: var(--color-default_nonchanging);
}
.area_projects {
  --color-accent-midlight: var(--color-accent-projects);
  --color-accent-lightmid: var(--color-accent-projects);
  --color-accent-light: var(--color-accent-projects);
  --color-default: var(--color-default_nonchanging);
}
.area_supervision {
  --color-accent-midlight: var(--color-accent-supervision);
  --color-accent-lightmid: var(--color-accent-supervision);
  --color-accent-light: var(--color-accent-supervision);
  --color-default: var(--color-default_nonchanging);
}
.area_career {
  --color-accent-midlight: var(--color-accent-career);
  --color-accent-lightmid: var(--color-accent-career);
  --color-accent-light: var(--color-accent-career);
  --color-default: var(--color-default_nonchanging);
}

a {
  color: var(--color-accent-light);
}
a:hover, focus {
  color: var(--color-accent-light);
  text-decoration: underline var(--color-accent-light);
}

a[href^='http']::after {
  content: '\f08e'; /*link*/
  font: var(--fa-font-solid);
  position: relative;
  left: var(--size-1);
}
main a[href^='/']::before {
  content: '\f0da'; /*caret-right*/
  font: var(--fa-font-solid);
  position: relative;
  right: var(--size-1);
}
/* a[target='_self']::after {
  content: '';
} */

html{
  min-height:100%;
}

body {
  top: 0;
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
  margin-inline: auto;
  font-family: var(--font-sans);        
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
}

footer {
  margin-top: var(--size-fluid-3);
  background-color: var(--surface-1);
  border-radius: 0.5rem 0.5rem 0 0;
  justify-content: space-evenly;
  place-items: center;
}

header {
  margin-bottom: var(--size-fluid-2);

  font-weight: var(--font-weight-7);
  padding: var(--size-2);
  background-color: var(--surface-3);
  border-radius: 0 0 0.5rem 0.5rem;
  outline: 1px solid var(--surface-1);

  position: sticky;
  top: 0;
  z-index: 1;
}

header, footer, body {
  width: 100%;
}

header, footer {
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  color: var(--stone-8);
  text-align: center;
  box-shadow: var(--shadow-4);
}

header, footer > * {
  flex-grow: 0;
}

nav {
  width: 100%;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1) var(--size-5);
  list-style-type: none;
  padding: 0;
  justify-content: space-around;
  margin: 0;
}

main {
  flex-grow: 1;
}

main, header, footer {
  /* default 100% here - change on media query*/
  max-width: 100%;
}

.nav_secondary {
  color: var(--color-accent-lightmid);
  text-transform: none;
  font-size: var(--size-fluid-1);
  display: flex;
  place-content: center;
  gap: var(--size-3);
}
.nav_secondary a {
  color: inherit;
}
.nav_secondary > * {
  padding: 0;
  margin-top: var(--size-3);
  max-inline-size: var(--size-content-3);
  text-wrap: balance;
}

h1, h2 {
  color: var(--color-accent-light);
}
h1 {
  padding-inline: var(--size-3);
  padding-top: var(--size-3);
  font-size: var(--size-fluid-5);
  color: var(--color-accent-midlight);  
  text-shadow: 0 0 var(--size-3) hsl(0 0 0 / 75%);
}
h2 {
  padding-top: var(--size-5);
  font-size: var(--size-fluid-4);
  text-shadow: 0 0 var(--size-2) hsl(0 0 0 / 25%);
}
h3 {
  padding-top: var(--size-7);
  font-size: var(--size-fluid-3);
  color: var(--color-accent-lightmid);
  text-shadow: 0 0 var(--size-2) hsl(0 0 0 / 25%);
}
h4 {
  padding-top: var(--size-3);
  margin-bottom: var(--size-2);
  font-size: var(--size-fluid-2);
  font-weight: var(--font-weight-accent);
  color: var(--color-default);
}
h5 {
  font-size: var(--size-fluid-1);
  font-weight: var(--font-weight-accent);
  text-shadow: var(--shadow-1);
  padding-top: var(--size-2);
  margin-bottom: var(--size-3);
}

.more_link::after{
  content: '\f06d'; /*fire*/
  font: var(--fa-font-solid);
  color: var(--color-accent-lightmid);
  position: relative;
  left: var(--size-1);
}
.more_link {
  text-align: right;
  font-size: var(--font-size-fluid-0);
  /* font-style: italic; */
  margin-top: var(--size-5);
}

section {
  /* outline: 1px solid red; */
  margin-bottom: var(--size-fluid-3);
}

article {
  /* overflow-x: hidden; */

  background-color: var(--surface-2);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-6);

  margin-top: var(--size-5);

  padding-inline: var(--font-size-fluid-1);
  padding-block: var(--font-size-fluid-1);
}

.visibility_hidden {
  visibility: hidden; 
  max-height: 0;
  padding: 0;
  margin: 0;
}

.publications__img_container {
  margin-top: var(--size-3);
  padding-inline: var(--font-size-fluid-1); 
  display: flex; 
  align-items: center;
  justify-content: center;
}


.product__default {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "category" "date"
    "img" "img"
    "title" "title"
    "headline" "headline"
    "content" "content"
    "tagline" "tagline";
}

.product__experience {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "category date"
    "img img"
    "title title"
    "headline headline"
    "content content"
    "tagline tagline";  
}

.product {
  /* outline: 1px solid lime; */
  display: grid;
  align-items: self-start;
  gap: var(--size-4);
  grid-auto-rows: max-content;
  align-items: center;  
  flex: 1;
}

@media (min-width: 750px) {
  .product__experience {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "category category date"  
    "title title img"
    "headline headline headline"
    "content content content"
    "tagline tagline tagline";  
  }
  .product__img {
    float: right;
    font-size: calc(2 * var(--font-size-fluid-2));
  }
  product__img_vertical{
    float: right;
    font-size: calc(2 * var(--font-size-fluid-2));
  }
  /* .product__img_vertical > img {
    width: 100%;
    border-radius: var(--size-1);
    object-fit: cover;
    outline: 1px solid green;
  } */

  .entity_container_wide .entity_item {
    max-width: var(--size-content-23);
    /* border: 1px solid red; */
  }


  main, header, footer {
    max-width: var(--size-content-4);
  }  
}

.product__category {
  /*border: 2px solid cyan;*/
  color: var(--color-accent-lightmid);
  grid-area: category;
  text-transform: uppercase;
  font-weight: var(--font-weight-accent);
}

.product__date {
  /*border: 2px solid cyan;*/
  color: var(--color-accent-lightmid);
  grid-area: date;
  text-align: right;
}

.product__img_cotainer{
  grid-area: img;
  /*width: var(--size-14);*/
  justify-content: center;
  align-items: center;
  margin-top: var(--size-3);
}
.product__img {
  display: flex;
  place-content: center;
  font-size: calc(1.5 * var(--font-size-fluid-2));
}
.product__img > img {
  /* border: 1px solid pink; */
  width: 100%;
  border-radius: var(--size-1);
  object-fit: cover;
}
.product__img_vertical {
  display: flex;
  place-content: center;
  place-items: center;
  font-size: calc(1.5 * var(--font-size-fluid-2));
}
.product__img_vertical > img {
  width: var(--size-fluid-8);
  border-radius: var(--size-1);
  object-fit: cover;
}

.product__title {
  /*border: 2px solid orange;*/
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-accent);
  color: var(--color-accent-light);
  line-height: 1;
  grid-area: title;
  padding-left: var(--size-2);
}

.product__headline {
  font-weight: var(--font-weight-accent); 
  font-size: var(--font-size-3);
  /*border: 2px solid magenta;*/
  grid-area: headline;
  text-wrap: balance;
}

.product__content {
  /*border: 2px dashed yellow;*/
  grid-area: content;
}

.product__content h2 {
  margin-top: var(--size-2);
}

.details_container {
  border: 1px solid var(--surface-3);
  padding-inline: var(--size-2);
}


.tagline {
  display: flex;
  gap: var(--size-3);
  flex-wrap: wrap;
  margin-left: auto;
}

.product__tagline {
  margin-top: var(--size-3);
  /* border: 3px dotted orchid; */
  grid-area: tagline;
  display: flex;
  gap: var(--size-3);
  flex-wrap: wrap;
  margin-left: auto;
}


.tag {
  max-width: fit-content;
  color: var(--color-default_nonchanging);
  border-radius: var(--size-1);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-accent);
  padding-inline: var(--size-2);
  background-color: var(--surface-3);
}
.tag a, a:hover,focus {
  color: var(--color-default_nonchanging);
}
/* .tag[data-color="red"] {
  background-color: var(--red-10);
} */
.tag[data-color="gray"] {
  background-color: var(--gray-10);
}
.tag[data-color="stone"] {
  background-color: var(--stone-10);
}
.tag[data-color="red"] {
  background-color: var(--red-10);
}
.tag[data-color="pink"] {
  background-color: var(--pink-10);
}
.tag[data-color="purple"] {
  background-color: var(--purple-10);
}
.tag[data-color="violet"] {
  background-color: var(--violet-10);
}
.tag[data-color="indigo"] {
  background-color: var(--indigo-10);
}
.tag[data-color="blue"] {
  background-color: var(--blue-10);
}
.tag[data-color="cyan"] {
  background-color: var(--cyan-10);
}
.tag[data-color="teal"] {
  background-color: var(--teal-10);
}
.tag[data-color="green"] {
  background-color: var(--green-10);
}
.tag[data-color="lime"] {
  background-color: var(--lime-10);
}
.tag[data-color="yellow"] {
  background-color: var(--yellow-10);
}
.tag[data-color="orange"] {
  background-color: var(--orange-10);
}
.tag[data-color="choco"] {
  background-color: var(--choco-10);
}
.tag[data-color="brown"] {
  background-color: var(--brown-10);
}
.tag[data-color="sand"] {
  background-color: var(--sand-10);
}
.tag[data-color="camo"] {
  background-color: var(--camo-10);
}
.tag[data-color="jungle"] {
  background-color: var(--jungle-10);
}

.secondary_box {
  margin-top: var(--size-3);
  border-radius: var(--size-3);
  background-color: var(--surface-1);
  padding: var(--size-3);
  border-radius: var(--size-3);
  text-align: justify;
  text-justify: inter-character;
  width: 100%;
}
.secondary_box p {
  max-width: 100%;
  /* border: 1px solid red; */
}

article ul li {
  list-style-type: square;
}

.entity_container[data-accented="1"] > *:hover, focus {
  color: var(--color-accent-light);
}
  
.entity_container {
  max-width: 100%;
  margin-top: var(--size-3);
  display: flex;
  grid-auto-rows: auto;
  align-items: center;  
  justify-content: space-around;
  gap: var(--size-4);
  flex-wrap: wrap;
  text-align: center;
}
.entity_container_wide {
  text-align: left;
}
.entity_container_wide .entity_item_footer {
  text-align: right;
  flex: 1;
  flex-grow: 1;
}

.entity_container_wide .entity_item {
  width: 100%;
}
.entity_item_title{
  font-weight: var(--font-weight-accent);
  padding-top: var(--size-2);
  margin-bottom: var(--size-3);
  text-wrap: balance;

  flex-grow: 100;
  align-self: left;
  place-content: end;

}
.entity_item {
  width: min(var(--size-content-2), 100%);
  max-width: 100%;
  background-color: var(--surface-3);
  border-radius: var(--size-2);
  box-shadow: var(--shadow-3);
  padding: var(--size-3);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* flex: 1; */
}
.entity_item_footer{
  margin-top: var(--size-3);
  flex-grow: 0;
  align-self: end;
  place-content: end;
}
.entity__highlight {
  border: 1px solid var(--color-accent-light);
}
.entity_item_footer_highlight {
  font-weight: var(--font-weight-7);
}

summary {
  background-color: var(--surface-2);
  font-weight: var(--font-weight-regular);
  /* text-transform: uppercase; */
}
.details {
  background-color: var(--surface-1);
  padding: var(--size-3);
  margin-bottom: var(--size-3);
  border-radius: var(--size-3);
  text-align: justify;
  text-justify: inter-character;
  place-items: left;
  list-style-position: inside;
  color: var(--color-default_nonchanging);
}

.details ul li {
  min-width: 100%;
  /* border: 1px solid red; */
}

















.tiles_container {
max-width: var(--size-content-3);
margin-top: var(--size-5);
display: flex;
justify-content: space-evenly;
flex-flow: row wrap;
align-content: stretch;
align-items: stretch;
place-content: center;
gap: var(--size-3) var(--size-3);
}

.tiles_container > * {
font-weight: var(--font-weight-accent);
padding: var(--size-5);
background-color: var(--surface-3);
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(0.55 * var(--size-content-1));
text-align: center;
box-shadow: var(--shadow-3);
border-radius: var(--size-2);
align-self: stretch;
}
.tiles_container > *:hover, focus {
color: var(--color-accent-light);
}
.tiles_container__icons {
font-size: var(--size-5);
color: var(--gray-1) !important;
margin-bottom: var(--size-3);
}


.publications_authors_margin_right {
  padding-left: 0rem;
  padding-right: var(--font-size-fluid-0);
}

.tiles_publication_container {
  max-width: max(var(--size-content-4), 100%);
  margin-top: var(--size-5);
  color: var(--color-accent-lightmid);
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
  align-content: stretch;
  align-items: stretch;
  place-content: center;
  gap: var(--size-3) var(--size-3);
}

.tiles_publication {
  background-color: var(--surface-3);
  padding: var(--size-3);
  border-radius: var(--size-1);
}

.tiles_publication {
  text-align: left;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: var(--size-content-1);
  display: grid;
  grid-template-areas: 
  "topic topic year"
  "title title title"
  "conference conference conference_short"
  "authors authors authors"
  "abstract abstract abstract"
  "footer footer footer";
  columns: 1;
  gap: var(--size-1);
}
.tiles_publication_abstract {
  color: var(--color-default);
  grid-area: abstract;
}
.tiles_container__publication_title {
  font-weight: var(--font-weight-accent);
  grid-area: title;
  color: var(--color-accent-mid);
}
.tiles_publication_abstract_title{
  text-transform: uppercase;
  color: var(--color-accent-midlight)
}
.tiles_publication_abstract_text {
  font-weight: var(--font-weight-regular);
  text-align: justify;
  font-size: var(--font-size-0);
}
.tiles_container__publication_area {
  grid-area: topic;
  text-transform: uppercase;
}
.tiles_container__publication_year {
  grid-area: year;
  text-align: right;
}
.tiles_container__publication_event {
  grid-area: conference;
}
.tiles_container__publication_event_short {
  grid-area: conference_short;
  text-align: right;
  font-weight: var(--font-weight-accent);
}
.tiles_container__publication_authors {
  grid-area: authors;
  color: var(--color-default);
  font-size: var(--font-size-0);
}
.tiles_container__publication_artifacts {
  grid-area: footer;
}