/*
===================================
Basics
===================================*/
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: white;
}
p {
    font-size: larger;
}
a {
  text-decoration: none;
  color: darkcyan;
}

/*
===================================
Navigation
===================================*/
.topnav {
  overflow: hidden;
  background-color: #333;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-evenly;
}
.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 0.825em 1em;
  font-size: larger;
  transition: background-color .25s ease-in-out;
  border-radius: 0.825em 0 0.825em 0;
  margin: 0.5em;
}
.topnav a:hover {
  background-color: darkcyan;
  color: #333;
}
.topnav .icon {
  display: none;
}

/*
===================================
Layout
===================================*/
.content{
  display: inline-flex;
  flex-direction: column;
}
.content .container{
  width: 80%;
  margin: 0 auto;
}
.content hr {
  width: 83%;
}
hr {
  border: thin solid darkcyan;
  margin: 0 auto;
}
.container {
    display: inline-flex;
    flex-direction: column;
}

/*
===================================
Banner
===================================*/
#banner {
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
.BannerDescription h1, .BannerDescription p {
  text-align: center;
} 

/*
===================================
Papers
===================================*/
h3.paperTitle {
  color: darkcyan;
}
.paper {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.abstract {
  font-style: oblique;
  color: #333;
  padding: 0 1em;
}

/*
===================================
Images and icons
===================================*/
.iconLink {
  color: #333;
}
div.icon {
  margin: 1em;
}
img {
  width: 23em;
  max-width: 100%;
  border-radius: 0% 50% 0% 50%;
  border: thick solid white;
  margin: 2em 0;
}
span {
  border: 0.5em solid #ffffff00;
}
span:hover {
  background-color: #20b2aa36;
}
/*
===================================
Responsive
===================================*/
@media screen and (max-width: 850px) {
/*
  NAVIGATION
===================================*/
  .topnav a:not(:first-child) {
      display: none;
  }
  .topnav a.icon {
      display: inline-flex;
  }
  .topnav.responsive {
      position: relative;
      flex-direction: column;
  }
  .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
  }
  .topnav.responsive a {
      text-align: left;
      display: inline-flex;
      flex-direction: column;
  }
  .topnav {
      justify-content: space-between;
  }
/*
  Layout
===================================*/
  .content hr {
    width: 93%;
  }

  .content .container{
    width: 90%;
  }
}