/* 
 * Global part
 */

a {
  text-decoration: none;
  color: #297d7a;
  font-weight: bold;
  margin-bottom: 3px;
}

a.hypertext-link:hover {
  /* text-decoration: underline solid #297d7a; */
  /* margin-bottom: 3px; */
  border-bottom: 3px solid #297d7a;
}

a:active {
  font-weight: bold;
}

body {
  margin: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: space-between;
}

/* 
 * Chuck logo
 */

/* section#logo {
  width: 70%;
  max-width: 2500px;
  margin: 35px auto;
  text-align: center;

  &>p {
    font-size: large;
    font-family: Arial, Helvetica, sans-serif;
  }
} */

/*
 * Navbar part
 */

section.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: rgb(255, 255, 255); 
}

div.navbar-mid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1500px;
  min-width: 1100px;
}

div.nav-li {
  text-align: center;
  height: 40px;
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.logo,
div.settings {
  max-height: 40px;
  width: 15%;
}

div.logo img {
  margin-left: 20px;
  max-height: 40px;
  max-width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}

li.nav-li-item {
  list-style: none;
  display: inline;
  margin: 20px;
  font-weight: 400;
  /* font-family: Satoshi, "work-sans", sans-serif; */
  font-family: 'Microsoft YaHei', Segoe UI Variable, Segoe UI, Arial, sans-serif;
  font-size: medium;
}

div.settings {
  display: flex;
  justify-content: right;
  align-items: center;
}

#theme-toggle-btn {
  margin: auto 20px;
}

/*
 * Chuck part
 */

div.chuck {
  width: 70%;
  max-width: 2500px;
  min-width: 1000px;
  /* margin: auto; */
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  background-color: rgb(245, 245, 245);
}

div.chuck-img {
  text-align: center;
  min-width: 40%;
  max-width: 100%;
  /* min-width: 200x; */
}

div.chuck-img p {
  font-family: Nabla, sans-serif;
  font-size: 10em;
}

div.chuck-recommend {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  width: 58%;
  padding-right: 20px;
  /* min-width: 300px; */
  margin: 0;
}

p.chuck-recommend-title {
  font-size: 50px;
  margin: 0;
  font-family: 'Microsoft YaHei Light', 'Segoe UI Variable', 'Segoe UI', Arial, sans-serif;;
  
  &>a {
    font-weight: bold;
  }
}

p.chuck_description {
  font-size: medium;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*
 * Project part
 */

div.project {
  padding: 25px 0;
  /* width: 70%; */
  max-width: 2500px;
  display: flex;
  margin: 35px auto;
  flex-flow: row wrap;
  justify-content: space-around;
}

div.pj-recommend {
  margin: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

img.pj-img {
  display: block;
  height: height;
  height: 300px;
}

div.pj-recommend-intro {
  background-color: rgb(245, 245, 245);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

div.pj-recommend-docker {
  
  display: flex;
  padding: 0 10px;
  flex-direction: column;
  justify-content: space-around;
}

div.entry-icon {
  /* height: 100%; */
  width: 2em;
  margin: 0 5px 0 0;
}

p.pj-name {
  font-weight: bold;
  margin: 10px 0 5px 0;
  font-size: large;
  font-family: Arial, Helvetica, sans-serif;
}

p.pj-description {
  font-size: small;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 10px 0;
}

/*
 * Pvort part
 */

div.pvort {
  display: flex;
  background-color: rgb(245, 245, 245);
  width: 70%;
  max-width: 2500px;
  margin: 35px auto;
  padding: 20px 0;
  flex-direction: column;
}

div.pvort-recommend {
  margin: 15px 30px ;
}

div.pvort-recommend a {
  font-size: x-large;
}

div.pvort-recommend p {
  color: grey;
}

div.pvort-recommend hr {
  border: 1px solid lightgray;
}

/*
 * Books part.
 */

section.books {
  width: 70%;
  max-width: 2500px;
  background-image: url('/dev/static/imgs/');
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

div.book-list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}


div.book-abstract {
  background-color: rgb(245, 245, 245);
  opacity: 0.5;
}

/*
 * backLink part
 */

div.backLink {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
 }

div.backLink p {
  font-size: medium;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration-line: underline;
  text-decoration-color: #297d7a;
  text-decoration-style: solid;
  text-decoration-thickness: 3px;
  margin: 0 20px;
}

/*
 * Footer part
 */

#footer {
  background-color: lightgray;
  display: flex;
  margin-top: 35px;
  padding: 10px 0;
  flex-flow: row wrap;
  justify-content: center;
}

.footerbar {
  text-align: center;
  width: 70%;
  margin: 0 auto;
}

span.beian-left,
span.beian-middle,
span.beian-right {
  font-size: small;
  margin: 20px;
}

span.beian-middle a,
span.beian-right a {
  text-decoration: underline;
  color: black;
  font-weight: normal;
}