@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap");
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size:11pt;
  margin-right:auto;
  margin-left:auto;
  margin-top:0;
  margin-bottom:0;
  padding:0
}
.container{
  max-width:800px;
  margin:20px auto;
  padding:40px;
  background-color:#ffffff;
  border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,0.1)
}
h1,h2,h3{font-weight:normal;color:#222}
h2{font-size:20px}
h3{font-size:18px}
a{color:#008888;text-decoration:none}
a:hover{text-decoration:underline}
nav{
  background-color:#ddecfd;
  padding:15px 0;
  text-align:center;
  font-family: "Gill Sans", sans-serif;
}
nav .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  margin:0 auto;
  background-color:transparent;
  box-shadow:none}
nav .nav-links{display:flex}
nav .icon{display:none;font-size:24px;padding:0 10px}
nav .container{padding:0;margin:0 auto;background-color:transparent;box-shadow:none}
nav a{margin:0 15px;font-size:18px;color:#333}
.intro-container{display:flex;align-items:flex-start;margin-bottom:20px}
.intro-image{flex:0 0 150px;margin-right:40px}
.profile-pic{width:150px;height:150px;border-radius:50%;object-fit:cover}
.intro-details{flex:1;text-align:right}
.intro-details h2{margin-top:0;margin-bottom:10px}
.intro-details p{margin:5px 0}.social-links{margin-top:15px}
.social-links a{margin-right:15px;font-size:1.2em}
.intro-bio{margin-top:20px;text-align:left}
.group-container{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.group-member{text-align:center}
.group-member-pic{width:150px;height:150px;border-radius:50%;object-fit:cover;margin-bottom:10px}
.text{color:#333;font-size:15px;padding:8px 12px;width:100%;text-align:center}
.slideshow-container{max-width:1000px;position:relative;margin:auto}
.mySlides{display:none;text-align:center}
.prev,.next{
  cursor:pointer;
  position:absolute;
  top:50%;
  width:auto;
  margin-top:-22px;
  padding:16px;
  color:white;
  font-weight:bold;
  font-size:18px;
  transition:0.6s ease;
  border-radius:0 3px 3px 0;
  user-select:none
}
.next{right:0;border-radius:3px 0 0 3px}
.prev:hover,.next:hover{background-color:rgba(0,0,0,0.8)}
.fade{animation-name:fade;animation-duration:1.5s}
@keyframes fade{from{opacity:.4}to{opacity:1}}
.course-page-container{display:flex}
.toc-sidebar{flex:1;padding-right:20px;border-right:1px solid #eee;position:sticky;top:20px;align-self:flex-start}
.toc-sidebar h4{margin-top:0}.toc-sidebar ul{list-style-type:none;padding-left:0}
.toc-sidebar ul li a{display:block;padding:5px 0}
.course-content{flex:4;padding-left:20px}
ul{list-style-type:circle;padding-left:20px}
ul li{padding-left:1em;position:relative;padding-left:10px;line-height:1.5}
.project{border:1px solid #ddd;padding:15px;margin:10px 0;border-radius:8px}
.project h3{margin-top:0}
.project a{text-decoration:none}
.project a:hover{text-decoration:underline}
#education h4,#experience h4{margin-top:24px}
.my-container a{color:#0056b3;text-decoration:none}
.my-container a:hover{text-decoration:underline}
.blank{height:20px}p{margin:10px 0;line-height:1.5}
.inline-footnote{
  position:relative;
  display:inline-block;
  margin-left:0.05rem;
  vertical-align:super;
  font-size:0.65em;
  line-height:1
}
.inline-footnote__label{
  display:inline;
  padding:0;
  border:0;
  background:transparent;
  color:#007bff;
  font-weight:600;
  font-size:1em;
  line-height:1;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  font-family:inherit;
  transition:color 0.2s ease, text-decoration-color 0.2s ease
}
.inline-footnote__label:hover,.inline-footnote__label:focus{
  color:#0056b3;
  text-decoration:underline;
  text-decoration-thickness:0.08em;
  text-underline-offset:0.1em
}
.inline-footnote__label:focus-visible{
  outline:2px solid rgba(0,87,179,0.6);
  outline-offset:2px
}
.inline-footnote__content{
  display:none;
  position:absolute;
  top:1.6rem;
  right:0;
  width:260px;
  max-width:80vw;
  padding:0.75rem;
  border-radius:0.5rem;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.12);
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
  font-size:0.85rem;
  line-height:1.4;
  text-align:left;
  color:#222222;
  z-index:12
}
.inline-footnote__content::before{
  content:"";
  position:absolute;
  top:-0.45rem;
  right:1.5rem;
  width:0.75rem;
  height:0.75rem;
  background:#ffffff;
  border-left:1px solid rgba(0,0,0,0.12);
  border-top:1px solid rgba(0,0,0,0.12);
  transform:rotate(45deg)
}
.inline-footnote:focus-within .inline-footnote__content,.inline-footnote:hover .inline-footnote__content{display:block}
@media screen and (max-width: 820px){
  nav .container{
  	flex-wrap:wrap;
  	justify-content:space-between;
  	position:relative;
  	padding:0
  }
  nav .nav-home{padding:10px 20px}
  nav .nav-links{
    display:none;
    flex-direction:column;
    width:100%;
    text-align:left;
    background-color:#ddecfd;
    padding-top:10px;
    order:2
  }
  nav .nav-links a{padding:10px 20px;border-top:1px solid #e0e2e5}
  nav .nav-links.responsive{display:flex}
  nav .icon{display:block;order:1;padding:0 20px}
}
@media screen and (max-width: 820px){
  nav.responsive .nav-links a{display:block;text-align:left}
}
@media screen and (max-width: 600px){
  .intro-container{flex-direction:column;align-items:center}
  .intro-image{margin-right:0;margin-bottom:20px}
  .intro-details{text-align:center}
  .group-container{grid-template-columns:1fr}
  .course-page-container{flex-direction:column}
  .toc-sidebar{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-bottom:20px;position:static}
  .course-content{padding-left:0}
  .syllabus-table{border:0}
  .syllabus-table thead{display:none}
  .syllabus-table tr{margin-bottom:10px;display:block;border-bottom:2px solid #ddd}
  .syllabus-table td{display:block;text-align:left;border-bottom:1px dotted #ccc}.syllabus-table td:last-child{border-bottom:0}
  .syllabus-table td:before{content:attr(data-label);float:left;font-weight:bold;text-transform:uppercase}
  .syllabus-table td[data-label="Topic"]:before,.syllabus-table td[data-label="Date"]:before,.syllabus-table td[data-label="Day"]:before{display:none}
}