@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,300italic,400italic,500,500italic,600,600italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

@font-face {
  font-family: 'Stroke-Gap-Icons';
  src: url('fonts/Stroke-Gap-Icons.eot'); /* IE9 Compat Modes */
  src: url('fonts/Stroke-Gap-Icons.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/Stroke-Gap-Icons.woff') format('woff'), /* Pretty Modern Browsers */ url('fonts/Stroke-Gap-Icons.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/Stroke-Gap-Icons.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  background-color: #383a3c;
  font-weight: 400;
  font-size: 1.25em;
  line-height: 1.25;
  font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
  margin: 0;
  color: white;
}

/* Header */
.large-header {
  font-size: 0.8em;
  position: relative;
  width: 100%;
  height: 110vh;
  overflow: hidden;
  background-size: cover;
  background: #333 center center;
  z-index: 1;
}

.large-header {
  background: url('../images/bg.jpg');
  background-size: cover;
}

.main-content {
  margin-top: 5em;
}

.main-title {
  position: absolute;
  margin: 0;
  padding: 0;
  color: #f9f1e9;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.hero-background .main-title {
  font-family: 'Clicker Script', cursive;
  font-weight: normal;
  font-size: 6em;
  padding-left: 10px;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 720px) {
  .hero-background .main-title {
    font-size: 8em;
  }
}

#translated-origin {
  content: '';
  width: 6em;
  height: 6em;
  min-width: 5em;
  min-height: 5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

#rotating-svg {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('../images/deco.svg') no-repeat center center;
  background-size: cover;
  border-radius: 50%;
  z-index: -1;
  animation: antiClockwiseSpin 200s infinite linear;
}

@keyframes antiClockwiseSpin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#largeHeader {
  /*display: none;*/
  /*box-shadow: 20px 6px 13px 20px rgb(33, 31, 39);*/
  border-bottom-left-radius: 79% 33%;
  border-bottom-right-radius: 79% 33%;
}

@media screen and (max-width: 320px) {
  #largeHeader {
    border-bottom-left-radius: 79% 5%;
    border-bottom-right-radius: 79% 5%;
  }
}

@media screen and (max-width: 720px) and (min-width: 320px) {
  #largeHeader {
    border-bottom-left-radius: 79% 8%;
    border-bottom-right-radius: 79% 8%;
  }
}

@media screen and (min-width: 720px) {
  #largeHeader {
    border-bottom-left-radius: 79% 12%;
    border-bottom-right-radius: 79% 12%;
  }
}

@media screen and (min-width: 1280px) {
  #largeHeader {
    border-bottom-left-radius: 79% 15%;
    border-bottom-right-radius: 79% 15%;
  }
}

.main-title .thin {
  font-weight: 200;
}

@media only screen and (max-width: 768px) {
  .main-title {
    font-size: 4em;
  }
}

.clearfix:before, .clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

[hidden] {
  display: none;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr.fading-hr {
  margin: 5em 5%;
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}

#personal-description > br {
  line-height: 3em;
}

#personal-description {
  word-spacing: 0.4em;
  /*margin-bottom: 2em;*/
}

#personal-description > a {
  color: blanchedalmond;
}

.external-links {
  margin: 0;
  display: flex;
  justify-content: space-around;
}

@media screen and (min-width: 1080px) {
  .external-links {
    margin: 3em 20% 0 20%;
  }
}

.external-links > .button {
  margin: 0 0.3em;
  border-radius: 10px;
  border: 3px solid;
  color: blanchedalmond;
  background-color: transparent;
  padding: 0.5em 0.5em;
  cursor: pointer;
}

.external-links > .button:hover {
  color: slategrey;
  background-color: blanchedalmond;
  border-color: transparent;

}

#profileImage {
  width: 7em;
  /*border: .30em solid hsla(156, 62%, 71%, 0.63);*/
  border: .30em solid #62d2a7;
  /*float: left;*/
  border-radius: 50%;
  /*shape-outside: circle(50%);*/
  /*margin: 0 auto;*/
  box-shadow: 6px 5px 18px 8px #211f27;
}

#about {
  margin: auto 15%;
  text-align: center;
  line-height: 1.5em;
  font-size: 1.2em;
}

.content {
  margin: auto 5%;
}

@media screen and (min-width: 1920px) {
  .content {
    margin: auto 10%;
  }

  #profileImage {
    width: 14em;
    border: .75em solid hsla(156, 62%, 71%, 0.63);
    margin: 1em;
  }
}

@media screen and (min-width: 720px) and (max-width: 1440px) {
  .content {
    margin: auto 20%;
  }

  #about {
    margin: auto;
  }

  #profileImage {
    width: 14em;
    border: .75em solid hsla(156, 62%, 71%, 0.63);
    float: left;
    shape-outside: circle(50%);
    margin: 1em;
  }

  #personal-description {
    text-align: justify;
  }
}

#circleShape {
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}

#footer {
  margin-bottom: 0;
  padding: 0.5em;
  text-align: center;
  background-color: #1D9D73;
  word-spacing: 0.5em;
  height: 2em;
  font-family: Helvetica, sans-serif;
  font-size: 1em;
}

.main-title .thin {
  font-weight: 200;
}

@media only screen and (max-width: 768px) {
  .main-title {
    font-size: 4em;
  }
}

#theses ul {
  list-style-type: none;
}

#theses ul li {
  font-family: Roboto, Helvetica, sans-serif;
  /*font-size: 1.25em;*/
  color: #eee;
  padding: 0 2em;
  overflow: auto;
  display: flex;
  align-content: center;
  justify-content: space-between;
}

#theses ul li div {
  padding: 2em 0;
}

#theses ul li div em {
  display: block;
  margin: 0.5em 0;
  font-size: 1.2em;
  color: #f9f1e9;
}

#theses ul li a {
  text-shadow: 5px 4px 3px rgba(0, 0, 0, 0.52);
  margin: auto 0;
  font-size: 3em;
}

#theses ul li:hover {
  background-color: rgba(191, 225, 241, 0.58);
}

#journals ol {
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-size: 1.5em;
  color: #bfe1f1;
}

#journals ol li {
}

#journals ol li p {
  padding: 0 0 1em 1em;
  font-style: normal;
  font-family: Roboto, Helvetica, sans-serif;
  font-size: 0.5em;
  color: #eee;
  border-left: 1px solid #999;
}

#journals ol li p em {
  display: block;
  margin-bottom: 0.5em;
  font-size: 1.2em;
  color: #f9f1e9;
}

#footer {
  font-family: "Leckerli One", serif;
  box-shadow: inset 0 4px 9px 2px #211f27;
}

span.middle-aligned {
  vertical-align: middle;
}

h2 {
  margin-top: 0;
  font-weight: lighter;
  /*margin: 0 5%;*/
  /*padding-top: 1em;*/
  flex: 1;
  letter-spacing: 0.2em;
  font-family: "Leckerli One", serif;
  font-size: 3em;
  /*color: #1c7bdf;*/
  color: #f9f1e9;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
  /*text-shadow: 0 1px 0 #489fdf, 0 2px 0 #1b242b, 0 3px 0 #336c96, 0 4px 0 #bfe1f1, 0 5px 0 #e0ffff, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);*/
}

.contact {
  margin: 5em auto;
  max-width: 850px;
  height: 15em;
  text-align: center;
  border-radius: 50%;
  /*background-image: linear-gradient(to bottom right, #f1ffff, #70e6ff);*/
  /*box-shadow: 7px 14px 12px 7px #211f27;*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.link-buttons {
  flex: 5;
  /*margin-left: 20%;*/
  /*margin-right: 20%;*/
  margin-bottom: 10%;
  max-width: 800px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

@media screen and (min-width: 1180px) {
  .link-buttons {
    justify-content: space-between;
  }
}

.rounded-button {
  margin: 0 0.3em;
  font-size: 2em;
  display: inline-block;
  /*background: #489fdf;*/
  /*color: #fff;*/
  background: #62d2a7;
  color: #383a3c;
  padding: 0.8em;
  border-radius: 50%;
  box-shadow: 0 17px 10px -10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all ease-in-out 300ms;
}

@media screen and (max-width: 320px) {
  body {
    font-size: 0.5em;
  }

  #spinSVG {
    width: 5em;
    height: 5em;
  }
}

@media screen and (max-width: 720px) and (min-width: 320px) {
  body {
    font-size: 0.8em;
  }

  #spinSVG {
    width: 3em;
    height: 3em;
  }

  .rounded-button {
    font-size: 1.5em;
  }

  .link-buttons {
    margin: auto 10% 5%;
  }
}

.rounded-button:hover {
  box-shadow: 0 29px 20px -20px rgba(0, 0, 0, 0.2);
  transform: translate(0px, -2px) scale(1.2);
}

a:focus {
  outline: thin dotted;
}

a:active, a:hover {
  outline: 0;
}

a, button {
  outline: none;
}

a {
  /*color: #566473;*/
  color: #62d2a7;
  text-decoration: none;
}

.awards {
  min-height: 25em;
  padding: 3em 0;
  color: #383a3c;
  /*color: blanchedalmond;*/
  /*background: url('../images/green-chameleon-21532.jpg') fixed center bottom;*/
  background: url('../images/dai-ke-32162.jpg') fixed center bottom;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  font-weight: bolder;
  margin-bottom: 5em;
}

.skew{
  transform: skewy(-3deg);
}

.unskew{
  transform: skewy(3deg);
}

@media screen and (min-width: 1080px) {
  .awards {
    flex-direction: row;
  }

  .stats-container:first-of-type {
    border-right: 1px solid;
    padding-right: 10%;
  }
}

@media screen and (min-width: 1080px) {
  .stats-container:last-of-type {
    padding-left: 10%;
  }
}

.stats-container {
  text-shadow: -1px 0 blanchedalmond, 0 1px blanchedalmond, 1px 0 blanchedalmond, 0 -1px blanchedalmond;
  font-size: 4em;
  text-align: center;
  margin: auto 0 auto 0;
  display: flex;
  justify-content: center;
}

.stats-wrapper {
  display: inline-block;
}

.stats-wrapper > p {
  padding-left: 1em;
  line-height: 1.5em;
  vertical-align: middle;
  text-align: center;
  font-size: 0.75em;
  margin: 0;
}

p.stats-text {
  line-height: 1.2em;
  font-size: 0.4em;
}

.icon {
  padding-top: 0.5em;
  font-family: 'Stroke-Gap-Icons';
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;

  text-transform: none;

  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-Cup:before {
  content: '\e628';
}

.icon-Pen:before {
  content: '\e676';
}