:root {
  scroll-behavior: smooth;
  font-family: 'Crimson Text', serif;
  font-size: 18px;
}

body {
  background-color: white;   /* #1A3A59; #EDE9E8 */
}

h1,h2,h3 {
  font-family: Comfortaa, sans;
  text-align: left;
}

h1,h2 {
  text-shadow: 2px 2px 2px #aaa;
}

a {
  color: #275787;
  text-decoration: underline;
  text-decoration-color: #E0E0E0;
}
a:hover {
  color: #800000;
  text-decoration-color: #A0A0A0;
}
a:active {
  color: red;
  text-decoration: none;
}

a.personalmail {
  color: grey;
}

section {
  background-color: #F7F7F7;
  padding: 1rem 2rem 1rem 2rem;
  text-align: justify;
  max-width: 40rem;
  margin: 0 auto;
  border-radius: 2rem 2rem 1rem 1rem;
}

.headerimage {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}


img.keynote {
  max-height: 8rem;
}

  /* Specific Fixes  ___________________________________________ */

#glance {
  max-width: 50rem;
}

#activity {
  padding-top: 2rem;
}



  /* Logos ____________________________________________________ */

img.sponsorship {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 38rem;
}



/* Put image to left of title ________________________ */

.title_icon_left
{
  background-image: url('../images/tape.webp');
  background-repeat: no-repeat;
  padding-left: 30px;  /* width of the image plus a little extra padding */
  display: block;  /* may not need this, but I've found I do */
}


  /* Put image to the right of another ________________________ */

.text_with_image::after {
  content: "";
  clear: both;
  display: table;
}

img.right_j {
  float: right;
  height: 20rem;
  padding: 0rem 0rem 0 1rem;
}

.left {
  float: contour;
}

  /* Full width "hero" image _________________________________ */

.bigimage {
  height: 100%;
  background-attachment: scroll;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 32rem;
  display: flex;        /* This is for the bigimage_title to be centered */
}

.bigimage_title {
  font-family: Comfortaa;
  margin: auto;
  font-size: 2em;
  color: white;
}

.bigphoto {
  background-attachment: scroll;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* background-size: cover; */
  background-size: contain;
  background-color: white;
  min-height: 42rem;
  display: flex;        /* This is for the bigimage_title to be centered */
}

.bigphoto_title {
  font-family: Comfortaa;
  margin: auto;
  font-size: 2em;
  color: white;
  transform: translate(0rem, 14rem);
}
  


  /* Parallax scrolling _______________________________________ */
.parallax, .parallax_thin {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: white;
}

.parallax {
  min-height: 22rem; 
}
.parallax_thin {
  min-height: 20rem; 
}


  /* Make list nice ___________________________________*/

ul.committeelist{
  list-style-type: none;
}

  /* Make the dates table legible ___________________________________*/

table.dates td { padding: 0 1rem 0 1rem; 
    font-size: 1rem;
}
table.dates th {
  background: #275787;
  color: white;
  padding: .3rem 1rem .3rem 1rem;
}
table.dates tr:nth-child(odd) { background: #EEE; }
table.dates td:nth-child(1) { text-align: left;
  font-size: 1rem;
}
table.dates td:nth-child(2) { text-align: center;
  font-size: 1rem;
}
table.dates tr:hover { background-color: #ddd; }



  /* Make the navbar ___________________________________________ */

ul.topnav {
  height: 2.8rem;    /* Change this with topnav font size */
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #E6D7C3; */
  background-color: #FEF2E1;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 10;
}

ul.topnav img {
  height: 2.0rem;
}

ul.topnav li {
  float: left;
}

ul.topnav li.center {
  float: none;
}

ul.topnav .highlight {
  background-color: #c1000a;
  color: #FEF2E1;
}
ul.topnav .highlight:hover {
  color: #c1000a;
  background-color: #FEF2E1;
}

ul.topnav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 0.5rem 0.6rem 0.5rem 0.6rem;
  text-decoration: none;
  font-family: Comfortaa;
  font-size: 1.3rem;
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

ul.topnav li a:hover {
  background-color: white;
  color: black;
}

ul.topnav li a.active {
  /* background-color: #1A3A59; */
  background-color: #e2d4bf;
  color: black;
}

ul.topnav li a.active:hover {
  background-color: white;
}


ul.topnav li.floatright {
  float: right;
}

ul.topnav #navimage.stuck {
  opacity: 1;
  animation-name: navimagein;
  -webkit-animation-name: navimagein;
  -ms-animation-name: navimagein;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  -ms-animation-duration: 0.5s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
}

#navimage {
  opacity: 0;
}

ul.topnav #navimage.unstuck {
  /* opacity: 0; */
  animation-name: navimageout;
  -webkit-animation-name: navimageout;
  -ms-animation-name: navimageout;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  -ms-animation-duration: 0.5s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
}

@keyframes navimagein {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes navimageout {
  from {opacity: 1;}
  to {opacity: 0;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes navimagein {
  from {opacity: 0;}
  to {opacity: 1;}
}
@-webkit-keyframes navimageout {
  from {opacity: 1;}
  to {opacity: 0;}
}

  /* Program style */
.papertitle {
 font-weight: bold;
}
.author {
 font-style: italic;
}
.chair {
 color: gray;
}
.hour {
 font-style: italic;
}
.session {
 font-weight: bold;
 font-style: italic;
 text-decoration: underline;
}
.speaker{
 text-decoration: underline;
}




  /* Scaling to Window/Screen size  ________________________________ */

@media screen and (max-width: 650px) {
  /* ul.topnav li { float: none; } */   /* Collapse nav bar on small screens. */
  :root { font-size: 10px; }             /* Smaller font. */
  .parallax { min-height: 12rem; }      /*Smaller parallax viewing window.*/
  .parallax_thin { min-height: 10rem; }
}