html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* fills remaining space */
}


body{
	background-color: white;
}

p{
	max-width: 800px;
	font-size: 18px;

	line-height: 1.35;

	margin: 1em auto;
}


  time{
    margin-top: 10px;
  }

  .event-title{
    position: relative;
    width: 100%;
    padding-top: 10px;
  }

  .event-title:after{
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 1px solid;
    top:0;
    left:0;

  }
  .calendar{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  .calendar a{
    flex: 1 1 40%;
    max-width: 50%;
  }

  .event-heading{
    line-height: 1.3;
    margin-top: 10px; font-weight: normal;
  }


.appear{
	opacity: 0;
	transition: opacity 1s!important;
	transition-delay: 0.3s!important;
}

.appear.is-visible{
	opacity: 1;
}


header{
	background-color: #d2bb74;
	color: white!important;
	position: fixed;
	width: 100%;
	top: 0;
	transition: background-color 0.3s, color 0.3s;
	border:none;
	
	z-index: 100;
}

header.scrolled{
	background-color: rgba(255,255,255,0.9);
	backdrop-filter: blur(10px);
	color: #222!important;
}

main{
	padding: 1em;
	max-width: 1200px;
	margin: 0 auto;
	margin-top:70px;
	flex: 1;
	width: 100%;
}



section{
	background-color: none;
	
}

.heading{
	margin-bottom: 2em;
	position: sticky;
	top: 53px;
	background-color: rgba(255,255,255,0.9);
	backdrop-filter: blur(10px);
	z-index: 900;
	width: 100%;
	z-index: 40;
}

.heading h1{
	position: relative;
	font-weight: normal;
	
}

.heading h1:after{
	content: "";
	border-bottom: 1px solid;
	position: absolute;
	width: 100%;
	left:0;
	bottom:0;
}

.heading p{
	font-size: 1.7em;
	margin: 0;
}

section h2{
	position: relative;
	font-weight: normal;
}
section h2:after{
	content: "";
	border-bottom: 1px solid;
	position: absolute;
	width: 100%;
	left:0;
	bottom:0;
}

.groups{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
}

.group p{
	margin:0;
}

.group{
	flex: 1 1 40%; 
	height: auto;
	padding: 1em;
	transition: background-color 0.3s;
	border-radius: 10px;
	max-width:50%;
}

.group:hover{
	background-color: rgba(210, 187, 116, 0.4);
}
.group-members ul{
	display: flex;
	flex-wrap: flex;
	gap: 30px;
}

.group-members ul li h3{
	font-weight: normal;
	text-align: center;
}
.person-image{
	margin: 0;
}

.person-papers ul li{
	margin-bottom: 0.5em;
}

.person-image img{
	width: 190px;
border-radius: 20px;
}

.bio{
	display: flex; gap: 20px;
	flex-direction: row;
	min-height: 40vh;
}