:root { --global-bg-color: #ffffff; --global-code-bg-color: rgba(181, 9, 172, 0.05); --global-text-color: #000000; --global-text-color-light: #000000; --global-theme-color: #3838ac; --global-hover-color: #007aff; --global-header-bg-color: #ffffff; --global-footer-text-color: #e8e8e8; --global-link-color: #007aff; --global-distill-app-color: #828282; --global-divider-color: rgba(0,0,0,.1); }

html[data-theme='dark'] { --global-bg-color: #1C1C1D; --global-code-bg-color: #2c3237; --global-text-color: #ffffff; --global-text-color-light: #e8e8e8; --global-theme-color: #3838ac; --global-hover-color: #0b84fe; --global-header-bg-color: #121212; --global-footer-text-color: #1C1C1D; --global-link-color: #6fbbff; --global-distill-app-color: #e8e8e8; --global-divider-color: #e8e8e8; }

hr{color:var(--global-divider-color)}
h1,h2,h3{margin:0;margin-bottom:0.5em;padding-bottom:5px;color: var(--global-text-color-light);}
body{font-family:Roboto, Microsoft YaHei, sans-serif;margin:0;padding-top:0; background:var(--global-bg-color)}
		   
.topbar{background:var(--global-header-bg-color);box-shadow:0px 0px 2px 2px rgba(0,0,0,0.2);box-sizing:border-box;display:flex;height:60px;position:fixed;top:0;width:100%;z-index:999}
.header{display:flex;height:100%}
.wrapper{margin:0 auto;max-width:800px;width:100%}
.title-block{align-items:center;box-sizing:border-box;display:flex;flex-grow:1;height:100%;padding-left:7px}
.title{margin:0;padding:0}
.social { padding-left: 15px;text-align: center}

.social .contact-icons a i::before { color: var(--global-text-color); -webkit-transition: all 0.2s ease-in-out; }

.social .contact-icons a:hover i::before { color: var(--global-hover-color); }
.social-link2{padding:0 10px 0 0}

.navbar{color:var(--global-text-color);display:flex;font-size:16px;list-style:none;margin:0;padding:0}
.navbar a{align-items:center;color:var(--global-text-color);display:flex;font-weight:bold;height:100%;justify-content:center;line-height:100%;padding:2px 16px;text-decoration:none}
.navbar a:hover { var(--global-hover-color)}
/***.navbar a:hover,.navbar a.active{color:
				 var(--global-hover-color)}*/
/***.navbar a:visited{color:var(--global-text-color)}
.navbar a.active{color:
				 var(--global-hover-color)}
.navbar li.active > a{color: var(--global-hover-color)}
li{color: var(--global-text-color-light);}*/
.content{box-sizing:border-box;color:rgba(0,0,0,0.8);line-height:24px;margin-top:10px;padding:8px 8px 8px 8px;width:100%;float:left}

.content li{margin-bottom:1em}

.photo-wrapper{float:left;margin:0px 30px 10px 0px;color:var(--global-text-color);}

.photo{display: block;max-width:187px;height:auto;margin-bottom:10px}
p{margin:0;padding:0 0 0.5em 0;color: var(--global-text-color-light);overflow:hidden}
a{color:var(--global-link-color);text-decoration:none}.right{float:right}.left{float:left}
.video{display:none;text-align:center;margin-bottom:2em;width:100%}

@media only screen and (max-width: 700px){.topbar{height:80px;position:absolute} .header{flex-direction:column}#heading{height:auto;margin:0}.title-block{height:40px;padding:8px}.navbar{height:40px;padding:0;width:100%}.navbar li{width:25%}.content{display:block;margin-top:0px}.navbar a{text-align:center}.video{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.video iframe{position:absolute;top:0;left:0;width:100%;height:100%} }

.photowrapperi{float:left;margin:0px 30px 10px 0px;color:var(--global-text-color);}


@media (max-width: 768px) {
  .photowrapperi, .about-text {
    width: 100%; 
  }
}

 
html {
				overflow-y: auto;

			}

			/**
			 * Offset fixed header
			 */
			body {
				padding-top: 60px;
			}

			/*  Sets body width */
			.container {
				margin:0px auto;
   max-width:800px; width:100%
			}

			/**
			 * Create fixed header
			 */
			.fixed-header {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;z-index:999;
			}

			/**
			 * Display lists on a single line.
			 */
			.list-inline {
				list-style: none;
				margin-left: -0.5em;
				margin-right: -0.5em;
				padding: 0;
				display:flex;
				height:100%;
			}

			.list-inline li {
				display: inline-block;
				margin-left: 0.5em;
				margin-right: 0.5em;
				padding: 0.25em 0.5em;
				
				
			}
			.list-inline a{align-items:center;display:flex;height:100%;justify-content:center;justify-content:center;}

			/***#my-awesome-nav li.active {
				background-color: black;
			}*/
			/***#my-awesome-nav a {align-items:center;color:var(--global-text-color);display:flex;font-weight:bold;height:100%;justify-content:center;line-height:100%;padding:2px 16px;text-decoration:none}*/
			#my-awesome-nav a{color:var(--global-text-color)}

			#my-awesome-nav li.active a {
			    color: var(--global-hover-color);}
			

			/***#my-awesome-nav li:hover a{color:var(--global-hover-color)}*/


			/**
			 * Sections
			 */
			.section {
			column-gap: 0px;padding-top:15px; padding-bottom: 15px;
			}

		footer.sticky-bottom .container {  padding-top: 20px; padding-bottom: 20px; font-size: 0.9rem; color: var(--global-text-color); max-width: 800px;}

		#about {
    padding-top: 115px;
    margin-top: -75px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

#publications {
    padding-top: 90px;
    margin-top: -75px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

#projects {
    padding-top: 90px;
    margin-top: -75px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

/***#my-awesome-nav li.active a {
  color:var(--global-hover-color)
}*/
a:hover{color:var(--global-hover-color);text-decoration:none}

/***a:hover{color:var(--global-hover-color);text-decoration:none}
a:visited{color:var(--global-text-color);text-decoration:none}*/
/***
onMouseOver="this.style.color = 'var(--global-hover-color)';" onMouseOut="this.style.color = 'var(--global-text-color)';"*/
.audio-player {
  display: none;
  align-items: center;
  background-color: #f8f9fa;
  border: 1px solid #d8d9dc;
  padding: 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.audio-player audio {
  margin-right: 1rem;
  width: 100%;
}

.audio-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.audio-title {
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.audio-source {
  color: #6c757d;
}


.menu{color:var(--global-text-color);display:flex;font-size:16px;list-style:none;margin:0;padding:0}
.menu a{align-items:center;color:var(--global-text-color);display:flex;font-weight:bold;height:100%;justify-content:center;line-height:100%;padding:2px 16px;text-decoration:none}

/***# dark mode

.audio-player {
  display: flex;
  align-items: center;
  background-color: #2d3436;
  border: 1px solid #6c757d;
  padding: 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.audio-player audio {
  margin-right: 1rem;
  width: 100%;
}

.audio-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.audio-title {
  font-weight: bold;
  margin-bottom: 0.2rem;
  color: #fff;
}

.audio-source {
  color: #dfe6e9;
}
