*,
*:after,
*:before {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	font-size: 62.5%;
}

body {
  color: $fg-color;
  background-color: $bg-color;
	font-family: $text-font-family;
	font-size: 18px;
	font-weight: 300;
  line-height: 1.8em;
  @media only screen and (max-width : 768px) {
    font-size: 16px;
    line-height: 1.6em;
  }
}

a {
  font-weight: 300;
  color: $link-color;
  text-decoration: none;
  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

p {
  margin: 2.0rem 0 2.0rem 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $heading-font-family;
  font-weight: 700;
  color: $alt-fg-color;
  // margin: 6.4rem 0 3.2rem 0;
  color: #666666;
}

h1 {
  font-size: 30px;
  line-height: 3.6rem;
  @media only screen and (max-width : 768px) {
    font-size: 24px;
    line-height: 3.4rem;
  }
}

article h1 {
  background: -webkit-linear-gradient(45deg, #e5b751,#1677b3, #cc5595 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about h1 {
  margin-bottom: 30px;
  margin-bottom: 20px;
  padding: 5px;
  border-bottom: 1px LightGrey solid;
  width: 98%;
  line-height: 150%;
  color: #666666 !important;
  font-size: 30px;
  line-height: 3.6rem;
  @media only screen and (max-width : 768px) {
    font-size: 24px;
    line-height: 3.4rem;
  }
}

h2 {
  font-size: 26px;
  line-height: 3.2rem;
  @media only screen and (max-width : 768px) {
    font-size: 20px;
    line-height: 3.0rem;
  }
}
h3 {
  font-size: 22px;
  line-height: 2.8rem;
  @media only screen and (max-width : 768px) {
    font-size: 16px;
    line-height: 2.6rem;
  }
}
h4 {
  font-size: 18px;
  line-height: 2.6rem;
  @media only screen and (max-width : 768px) {
    font-size: 12px;
    line-height: 2.4rem;
  }
}
h5 {
  font-size: 14px;
  line-height: 2.4rem;
  @media only screen and (max-width : 768px) {
    font-size: 8px;
    line-height: 2.2rem;
  }
}
h6 {
  font-size: 14px;
  line-height: 2.2rem;
  @media only screen and (max-width : 768px) {
    font-size: 6px;
    line-height: 2.0rem;
  }
}

b, strong {
  font-weight: 700;
}

pre {
  display: block;
  font-family: $code-font-family;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.6rem;
  margin: 2.0rem 0 2.0rem 0;
  padding: 2.0rem;
  overflow-x: auto;
  code {
    display: inline-block;
    background-color: inherit;
    color: inherit;
  }
}

code {
  font-family: $code-font-family;
  font-size: 1.6rem;
  font-weight: 400;
  background-color: rgba(255, 247, 0, 0.88);
  color: $fg-color;
  padding: 0.2rem 0.4rem 0.2rem 0.4rem;
}

blockquote {
  border-left: 2px solid $alt-bg-color;
  padding-left: 2.0rem;
  line-height: 2.2rem;
  font-weight: 400;
  font-style: italic;
}

th, td {
  padding: 1.6rem;
}
table {
  border-collapse: collapse;
}
table td, table th {
  border: 2px solid $alt-fg-color;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

img {
  max-width: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;

  min-height: 100vh;
  width: 100%;
}

.container {
  margin: 0 auto;
  max-width: 90.0rem;
  width: 100%;
  padding-left: 2.0rem;
  padding-right: 2.0rem;
  width: 60%;
  @media only screen and (max-width : 768px) {
    width: 90%;
  }
}

.fab {
  font-weight: 400;
}

.fas {
  font-weight: 700;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.fab {
  font-weight: 400;
}

.fas {
  font-weight: 900;
}

.footer .container {
  color: #666666;
  font-size: small;
  @media only screen and (max-width : 768px) {
    font-size: 16px;
    line-height: 1.6em;
  }
}

// hr {
//   border: 0.5px LightGrey solid;
//   margin-top: 60px;
//   @media only screen and (max-width : 768px) {
//     margin-top: 0;
//   }
// }

// footnote link
a[href^="#fn:"],
// Back to footnote link
a[href^="#fnref:"] {
  text-decoration: none;
  color: $orange;
  // font-family: monospace;
}
a[href^="#fn:"]:before{ content: '[' }
a[href^="#fn:"]:after{ content: ']' }

.footnotes {
  font-size: medium;
  overflow-wrap: break-word;
  > hr {
    display: none;
  }
}

.article {
  img {
    display: block;
    box-shadow: 0 0 10px #555;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 0 10px #555;
  }
}

.footer-taxonomy {
  margin: 10px 10px;
  font-size: medium;
}

.dashboard {
  font-size: 14px;
  text-shadow: 1px 1px #b1b1b133;
  font-weight: 200;
  font-style: oblique;
  text-transform: lowercase;
  color: #cccccc;
  .left {
    text-align: left;
    @media only screen and (max-width : 768px) {
      text-align: center;
    }
  }
  .right {
    text-align: right;
    @media only screen and (max-width : 768px) {
      text-align: center;
    }
  }
  a {
    text-decoration: none;
    color: #cccccc;
  }
  a:hover {
    color: #999999;
    font-size: 15px;
  }
}

.article-content {
  border: 1px solid lightgrey;
  font-family: "LXGW WenKai","Roboto","Helvetica Neue",helvetica,arial,"Heti Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
  padding-right: 40px;;
  padding-left: 40px;;
  padding-top: 40px;;
  padding-bottom: 40px;;
  margin-bottom: 20px;
  max-width: none !important;
  font-size: 20px !important;
  line-height: 1.8 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
  a {
    margin: 0 1px;
  }
  @media only screen and (max-width : 768px) {
      border: none;
      padding: 0 0 0 0;
      margin-bottom: 0;
      box-shadow: none;
      font-size: 18px !important;
      line-height: 1.6 !important;
  }
}

.heti blockquote {
  background-color: #f7f7f7 !important;
  font-style: normal;
  p {
    margin: 10px 0;
    line-height: 30px;
  }
}

.heti code {
  font-family: "LXGW WenKai","Roboto","Helvetica Neue",helvetica,arial,"Heti Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
}

.my-skill {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  align-items: center;
  @media only screen and (max-width : 768px) {
      display: none;
  }
}

.brand-ad {
  font-size: 16px;
  line-height: 1.5em;
  color: #777;
  @media only screen and (max-width : 768px) {
    font-size: 13px;
  }
}

.brand-content {
  border-style: dotted;
  border-width: 1px;
  padding: 5px 15px;
  border-radius: 5px;
  padding-bottom: 10px;
  border-bottom: none;
}

.brand-ad-link {
  text-align: right;
  margin-top: -12px;
  margin-right: 8px;
  font-size: 14px;
  @media only screen and (max-width : 768px) {
    font-size: 10px;
  }
  a {
    color: #777;
  }
}

.brand-ad-link-line {
  display: block;
  border-style: dotted;
  border-width: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  margin-top: -13px;
  margin-bottom: 25px;
  margin-right: 72px;
  margin-left: 3px;
  @media only screen and (max-width : 768px) {
    margin-top: -8px;
    margin-right: 51px;
    margin-left: 2px;
  }
}

div.notices {
  margin: 2rem 0;
  position: relative;
}
div.notices p {
  padding: 15px;
  display: block;
  font-size: 1.5rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
  color: #666;
}
div.notices p:first-child:before {
  position: absolute;
  top: 2px;
  color: #fff;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f06a";
  left: 10px;
}
div.notices p:first-child:after {
  position: absolute;
  top: 2px;
  color: #fff;
  left: 2rem;
}
div.notices.info p {
  border-top: 30px solid #F0B37E;
  background: #FFF2DB;
}
div.notices.info p:first-child:after {
  content: 'Info';
}
div.notices.warning p {
  border-top: 30px solid rgba(217, 83, 79, 0.8);
  background: #FAE2E2;
}
div.notices.warning p:first-child:after {
  content: 'Warning';
}
div.notices.note p {
  border-top: 30px solid #6AB0DE;
  background: #E7F2FA;
}
div.notices.note p:first-child:after {
  content: 'Note';
}
div.notices.tip p {
  border-top: 30px solid rgba(92, 184, 92, 0.8);
  background: #E6F9E6;
}
div.notices.tip p:first-child:after {
  content: 'Tip';
}

.markmap > svg {
  width: 100%;
  height: 400px;
  border-top: 1px dashed transparent;
  border-bottom: 1px dashed transparent;
  border-image: linear-gradient(to left,white,red,hotpink,violet,gold,white);
  border-image-slice: 1%;
  font: 300 14px/20px 'LXGW wenkai' !important;
  @media only screen and (max-width : 768px) {
    height: 230px;
  }
}

.markmap > svg > g > g > foreignObject > div {
  font: 300 14px/20px 'LXGW wenkai' !important;
}

*[id^='markmap-about-'] > svg {
  height: 800px;
  @media only screen and (max-width : 768px) {
    height: 350px;
  }
}

*[id^='markmap-software-engineering-at-google-culture-3'] > svg {
  height: 1000px;
  @media only screen and (max-width : 768px) {
    height: 350px;
  }
}

*[id^='markmap-software-engineering-at-google-process-0'] > svg {
  height: 1000px;
  @media only screen and (max-width : 768px) {
    height: 350px;
  }
}

*[id^='markmap-software-engineering-at-google-process-2'] > svg {
  height: 1000px;
  @media only screen and (max-width : 768px) {
    height: 350px;
  }
}

*[id^='markmap-software-engineering-at-google-tool-0'] > svg {
  height: 500px;
  @media only screen and (max-width : 768px) {
    height: 300px;
  }
}

*[id^='markmap-authentication-and-authorization-in-a-distributed-system-0'] > svg {
  height: 600px;
  @media only screen and (max-width : 768px) {
    height: 350px;
  }
}

.mermaid {
  width: 100%;
  height: auto;
  text-align: center;
  border-top: 1px dashed transparent;
  border-bottom: 1px dashed transparent;
  border-image: linear-gradient(to left,white,red,hotpink,violet,gold,white);
  border-image-slice: 1%;
  text {
    font-family: "LXGW wenkai","Roboto" !important;
  }
}

figure a {
  text-decoration: auto !important;
  margin: 0 !important;
}

a[href$="/self/"] {
  color: #e5b751 !important;
}

a[href$="https://www.myreader.io/"] {
  color: #e5b751 !important;
}

a[href$="/dev/"] {
  color: #1677b3 !important;
}

a[href$="https://www.free4.chat/"] {
  color: #1677b3 !important;
}

a[href$="/money/"] {
  color: #cc5595 !important;
}

a[href$="https://www.myinvestpilot.com/"] {
  color: #cc5595 !important;
}

.share-twitter-container {
  text-align: center;
  background: -webkit-linear-gradient(45deg, #e5b751,#1677b3, #cc5595 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  a {
    display: inline;
    @media only screen and (max-width : 768px) {
      display: block;
    }
  }
}

.share-twitter-container-dashed {
  display: inline;
  @media only screen and (max-width : 768px) {
    display: none;
  }
}
