/* make this local */
/*@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");*/
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap");
:root {
    --white: #f9f9f9;
    --black: #36383F;
    --gray: #85888C;
    --blue: #87CEEB;
    --darkblue: #67AECB;
    --baseSize:1.2rem;
    --magStep: 1.2;
} /* global colors */

/* everything to zero: */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--white);
    font-family: "Nunito Sans", sans-serif;
    line-height: 1.44;
    padding: 0 2rem;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% auto;
}

a {
    text-decoration: none;
    color: var(--blue);
}
a:hover {
    color: var(--darkblue);
}
span.linklike {
    color: var(--blue);
}
ul {
    list-style: none;
}

/* header is a bar with slight shadow */
.header {
    background-color: var(--black);
    box-shadow: 1px 1px 5px 0px var(--gray);
    position: sticky;
    top: 0;
    width: 100%;
}
/* logo - do we want a logo? */
.logo {
    display: inline-block;
    color: var(--white);
    font-size: 60px;
    margin-left: 10px;
}

/* nav bar / menu */
.nav {
    left: 2rem;
    right: 2rem;
    height: 100%;
    /*position: fixed;*/
    background-color: var(--black);
    overflow: hidden;
}
.menu a,.menu p, .subnav label {
    display: block;
    padding: 30px;
    color: var(--white);
    font-size: calc(var(--baseSize)*var(--magStep));
}
.menu a:hover,.subnav label:hover  {
    background-color: var(--gray);
}
.nav {
    max-height: 0;
    transition: max-height .5s ease-out;
}
/* Sub nav */
.subnav {
    position: relative;
}
.subnav-content {
    background-color:  var(--white);
    width: 100%;
    /*z-index: 1;*/
    padding: 20px 0 ;
    box-shadow: 1px 1px 5px 0px var(--gray);
    display: none;
  }
.subnav-content a {
    color: var(--black);
    text-decoration: none;
    padding: 0;
    margin: 10px 0;
    text-align: center;
}

/* the sub menu is really a checkbox */
.sub-menu {
    display: none;
}
/* toggle the sub menu */
.sub-menu:checked ~ .subnav-content {
    display: block;
}
.sub-menu:not(:checked) {
    background-color: var(--black);
}

/*
.subnav:hover .subnav-content {
    display: block;
}
*/

/* this will become the hamburger menu item */
.hamb {
    cursor: pointer;
    float: right;
    padding: 40px 20px;
}

.hamb-line {
    background: var(--white);
    display: block;
    height: 4px;
    position: relative;
    width: 24px;
transition: all .2s ease-out;
}
/* before and after add two more lines (aka empty blocks with white bg)  above and below */
.hamb-line::before,
.hamb-line::after {
    background: var(--white);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before {
    top: 8px;
}
.hamb-line::after {
    top: -8px;
}

/* the menu is really a checkbox */
.side-menu {
    display: none;
}

/* toggle the menu icon */
.side-menu:checked ~ nav {
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
    /* width: 0px;
    margin-right: 24px; */
}
.side-menu:checked ~ .hamb .hamb-line::before {
    width: 24px;
    transform: rotate(45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    width: 24px;
    transform: rotate(-45deg);
    top:0;
}

/* we have to set the font to something different other wise ios shows a green arrow icon for ↗ :( */
.tiny {
    font-family: 'Helvetica Neue', system-ui;
    font-size:calc(var(--baseSize) / var(--magStep));
}
/* the bibtex2html sets a font tag around the abstracts that messes up the font size */
font {
    font-size:calc(var(--baseSize) / var(--magStep));
}

div.right > img, div.left > img {
    width:50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

table > * {
	font-size:calc(var(--baseSize) / var(--magStep));
}

table.row {
    display: block;
}
table.row  tr {
    vertical-align: top;
}
table.row  td {
    padding-right: 1rem;
}
/*tbody:after {
      content: "";
      display: table;
      clear: both;
    }
*/

main {
    width: 100%;
    font-size:calc(var(--baseSize));
}

h1 {
    font-size: calc(var(--baseSize)*var(--magStep)*var(--magStep));
    padding: calc(var(--baseSize)*var(--magStep)*var(--magStep)) 0;
}

h2 {
    font-size: calc(var(--baseSize)*var(--magStep));
    padding: calc(var(--baseSize)/* *var(--magStep)*/) 0;
}

p {
    /*font-size: calc(var(--baseSize)*1);*/
    padding: 0.5rem 0;
}

.cv-date {
    font-weight: bold;
}

.medies {
    width: 2rem;
    height: 2rem;
    color: var(--blue)
}
.medies:hover {
    width: 2rem;
    height: 2rem;
    color: var(--darkblue);
}
.media li {
    float: left;
    display: block;
    padding: 30px;
    }
.media {
    position: relative;
    float: right;
}


/* responsiveness */
/* when wide enough don't shwo the hamburger but render the menu as a line of links instead */
/* @media (min-width: 768px) {*/

@media(max-width: 1099px){
  .publications > table, .publications > table td, .publications > table tr, .publications > table th { display: block; text-align: left; } 
  .publications > table th, .publications > table td { margin: 0; padding-left: 25px;  }
  .publications > table td { margin-left: 0px; padding-left: 0; padding-bottom: 1rem;}
  .publications > table thead { display: none; }
  td > img {
	margin-bottom: 1rem;
	border: 1px solid var(--black);
    }
}
@media (min-width: 1100px) {
    body {
	padding: 2rem;
    }
    main {
	font-size:calc(var(--baseSize)*var(--magStep));
    }
    .nav {
        max-height: none;
	height: fit-content;
        top: 0;
	left: auto;
	right: auto;
	position: relative;
        float: right;
        width: fit-content;
        background-color: transparent;
	overflow: visible;
    }
    /* Sub nav */
    .subnav-content {
        padding: 20px 0 ;
        display: none;
        background-color: var(--black);
	position: absolute;
	z-index: 1;
	overflow: visible;
    }
    .subnav-content a {
        color: var(--white);
    }
    /* menu */
    .menu li {
        float: left;
    }
    .menu a:hover,.subnav label:hover  {
        background-color: transparent;
        color: var(--gray);
	
    }
    
    .hamb {
        display: none;
    }

    table > * {
	font-size:calc(var(--baseSize)*1);
    }
    tr {
	display: block;
	padding-bottom: 1rem;
    }
    td > img {
	margin-right: 1rem;
	border: 1px solid var(--black);
    
    }
    table.row {
	display: flex;
    }
    .twocolumn {
	display: flex;
	flex-direction: row;
    }
    div.left {
	flex: 1;
	order: 1;
	width: auto;
    }
    div.left p {
	padding-right: 1rem;
    }	
    div.right {
	flex: 1;
	order: 2;
	width: auto;
    }
    div.right p {
	padding-left: 1rem;
    }
    div.right > img,div.left > img {
    width:100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    }
    /* the cv */
    .cv  {
	display: grid;
	grid-template-columns: .2fr 1fr;
    }
    .cv-date {
	grid-column-start: 1;
	grid-row-start: auto;
	font-weight: normal;
    }
    .cv-entry {
	grid-column-start: 2;
	grid-row-start: auto;
    }

    
}