/************************************************************
* Thanks Craig Buckler from Sitepoint for teaching me this. *
*   http://www.sitepoint.com/pure-css3-paper-curls/         *
************************************************************/
.paper {
  position: relative;
  max-width: 43em;
  margin: auto;
  padding: 0.5em;
  background-color: white;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5), inset 0 0 5em rgba(0, 0, 0, 0.01);
}
.paper::before, .paper::after {
  position: absolute;
  width: 40%;
  height: 1em;
  content: " ";
  left: 1.2em;
  bottom: 1.2em;
  background: transparent;
  transform: skew(-5deg) rotate(-5deg);
  box-shadow: 0 0.6em 1.2em rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.paper::after {
  left: auto;
  right: 1.2em;
  transform: skew(5deg) rotate(5deg);
}
/**********************************************************/

body {
  background-color: lightgray;
  padding-bottom: 10em;
}
address {
  margin: 1em 2em;
  font-style: normal;
}
ul.linklist {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1em;
/* read https://stackoverflow.com/questions/16041229/css-overflowhidden-with-floats#16056509 */
    overflow: hidden;
}
ul.linklist li {
    float: left;
    padding-right: 1em;
    padding-bottom: 0.5em;
}
/* overwrite mathstyle.css link coloring */
.ref-links a {
  color: salmon;
  text-decoration: inherit;
  border-bottom: none;
}
.ref-links a:visited {
  color: gray;
  border-bottom: none;
}


/* Read
   https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/
   and https://stackoverflow.com/a/13184714

   Then fix the height of the navbar based on screen width. This
   should be the maximal height of the navbar when the most "tabs" are
   shown. Also set the anchor "top"-property to be the negative of
   that size + margins + borders. Currently it has a margin of 0.5em.

   Note that in the current version the navbar can get a maximum of 1,
   2 or 3 lines based on screen width. The widest tab seems to be the
   research tab currently. This might change as things are added to
   the trans-tab. */

a.anchor {
  visibility:hidden; 
  position: relative;
}

@media screen and (min-width: 45em){
ul.navbar {
  height: 2em;
}
a.anchor {
  top: -3em;
}
.paper {
  margin-top: 4em;
}
.portrait {
  margin: 0 0 0.5em 0.5em;
  float: right;
  border-radius: 0.2em;
  max-height: 15em;
  max-width: 10em;
}
}
@media screen and (min-width: 23em) and (max-width: 45em) {
ul.navbar {
  height: 3.5em;
}
a.anchor {
  top: -5em; /* the value -4.5 doesn't move it high enough for some reason */
}
.paper {
  margin-top: 5em;
}
.portrait {
  margin: 0 0 0.5em 0.5em;
  float: right;
  border-radius: 0.2em;
  max-height: 15em;
  max-width: 10em;
}
}
@media screen and (min-width:13.2em) and (max-width: 22.9em){
ul.navbar {
  height: 5.5em;
}
a.anchor {
  top: -7.3em; /* -6.5 is not high enough again for some reason... */
}
.paper {
  margin-top: 5em;
}
.portrait {
  margin:  0.5em auto;
  display: block;
  border-radius: 0.2em;
  width: 100%;
}
}

/**********************************************************
* Navbar stuff                                            *
**********************************************************/
ul.navbar {
  z-index: 1;
  padding: 0.5em;
  list-style-type: none;
  background: lightgray;
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
  margin-left: -0.5em;
}
ul.navsubbar {
  list-style-type: none;
  padding-left: 0;
}
ul.navbar > li, ul.navsubbar > li {
  float: left;
}
ul.navbar > li.logo {
  float: right;
  margin-right: 1em;
}
ul.navbar > li > a {
  background-color: white;
  padding: 0.2em 0.3em;
  margin: 0.1em;
  border-radius: 0.5em 0.5em;
  display: block;
  border: inherit;
}
ul.navbar > li > a:hover {
  background-color: lightsalmon;
}
ul.navbar > li > a.active {
  background-color: lightsalmon;
}
ul.navsubbar > li > a {
  background-color: white;
  padding: 0.1em 0.15em;
  margin: 0.2em;
  border-radius: 0.25em 0.25em;
  display: block;
  border: 0.1em lightsalmon solid;
}
ul.navsubbar > li > a:hover {
  border: 0.1em lightsalmon dashed;
}
/*********************************************************/


/*******************************************************
* Nicer in-focus outline (e.g. for tabbing or tapping) *
*******************************************************/
a:focus {
  outline: none;
  background-image: linear-gradient(rgba(0,0,0,0), lightgrey, rgba(0,0,0,0));
}
/******************************************************/


/****************
* Blog elements *
****************/
.blog-post .blog-post {
  margin-top: 4em;
}
.blog-post > header > h3 {
  display: inline-block;
}
.blog-post > header > time {
  float: right;
}
.blog-cats, .blog-tags {
  list-style-type: none;
  display: inline-block;
  padding-left: 0;
}
.blog-cats > li, .blog-tags > li {
  display: inline-block;
  padding: 0.1em 0.4em 0.3em 0.4em;
  border-radius: 0.3em;
  font-size: 80%;
}
.blog-cats > li {
  background-color: lightsalmon;
  border: 1px solid lightsalmon;
}
.blog-tags > li {
  border: 1px dashed lightsalmon;
}
/***************/
