body {
  font-family: 'Noto Sans TC', sans-serif;
}
#body,
#footer {
  margin-top: 30px;
}
#body a,
#footer a,
#body a:hover,
#footer a:hover {
  text-decoration: none;
}
#body .btn-link,
#footer .btn-link,
#body .btn-link:hover,
#footer .btn-link:hover {
  text-decoration: none;
}
#body .btn-link,
#footer .btn-link {
  padding-left: 0;
}
#body .btn-link,
#footer .btn-link {
  -webkit-box-shadow: none;
          box-shadow: none;
}
#footer {
  margin-top: 15px;
  padding-top: 15px;
}
#myNav {
  background-color: #0e5f1d;
}
#orderNav {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.navbar-toggler:focus {
  outline: 1px dotted #f7f7f7;
}
.darkThemeColor {
  color: #FFF;
  background-color: #000;
}
.darkThemeColor #footer {
  color: #999;
  border-top: 1px solid #eee;
}
.darkThemeColor .figure-caption {
  color: #AAA;
}
.darkThemeColor .modal-content {
  background-color: #333;
}
.darkThemeColor hr {
  background-color: #777;
  opacity: 1;
}
.darkThemeColor a.no-color {
  color: #FFF;
}
.lightThemeColor {
  color: #555;
  background-color: #f7f7f7;
}
.lightThemeColor h1,
.lightThemeColor h2,
.lightThemeColor h3,
.lightThemeColor h4,
.lightThemeColor h5,
.lightThemeColor h6 {
  color: #000;
}
.lightThemeColor #footer {
  color: #666;
  border-top: 1px solid #bbb;
}
.lightThemeColor a.no-color {
  color: #555;
}
a i {
  color: #FFF;
}
.fa-youtube {
  color: red;
}
.bold {
  font-weight: 900;
}
.italic {
  font-style: italic;
}
.read-more[aria-expanded="false"] .expanded,
.read-more[aria-expanded="true"] .collapsed {
  display: none;
}
.serif {
  font-family: 'Noto Serif TC', sans-serif;
}
#code-report {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* Media queries - Responsive on screens more than 576px (sm or up) wide */
}
@media screen and (min-width: 576px) {
  #code-report {
    gap: 15px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
#code-report p {
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 5px;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #000;
}
.center-img {
  display: block;
  margin: auto;
}
.code-ribbon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 80px;
  padding: 10px;
  margin-bottom: 20px;
  /* Media queries - Responsive on screens more than 576px (sm or up) wide */
}
.code-ribbon .numberBox {
  margin: 15px 10px 15px 0px;
  padding: 10px;
  font-size: 35px;
  line-height: 35px;
  font-weight: 1000;
  font-family: 'Noto Serif TC', sans-serif;
  color: #FFF;
}
.code-ribbon .numberBox span {
  position: relative;
  bottom: 3px;
}
@media screen and (min-width: 576px) {
  .code-ribbon {
    background: -webkit-linear-gradient(left, #f7f7f7 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, #f7f7f7 100%);
  }
}
.technicalStuff {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
}
.backgroundColor1 {
  background-color: #ecfaf5;
}
.arrowColor1::before {
  border: medium solid #ecfaf5;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #ecfaf5;
}
.backgroundColor2 {
  background-color: #a5dec8;
}
.arrowColor2::before {
  border: medium solid #a5dec8;
  border-width: 10px 10px 10px 0;
  border-color: transparent #a5dec8 transparent transparent;
}
.backgroundColor3 {
  background-color: #faca82;
}
.arrowColor3::before {
  border: medium solid #faca82;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #faca82;
}
.backgroundColor4 {
  background-color: #FFCAAC;
}
.arrowColor4::before {
  border: medium solid #FFCAAC;
  border-width: 10px 10px 10px 0;
  border-color: transparent #FFCAAC transparent transparent;
}
.backgroundColor5 {
  background-color: #B2CDE8;
}
.arrowColor5::before {
  border: medium solid #B2CDE8;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #B2CDE8;
}
.backgroundColor6 {
  background-color: #AAA;
}
.arrowColor6::before {
  border: medium solid #AAA;
  border-width: 10px 10px 10px 0;
  border-color: transparent #AAA transparent transparent;
}
.backgroundColor7 {
  background-color: #5EBE52;
}
.arrowColor7::before {
  border: medium solid #5EBE52;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #5EBE52;
}
.backgroundColor8 {
  background-color: #faca82;
}
.arrowColor8::before {
  border: medium solid #faca82;
  border-width: 10px 10px 10px 0;
  border-color: transparent #faca82 transparent transparent;
}
.backgroundColor9 {
  background-color: #B1BBBC;
}
.arrowColor9::before {
  border: medium solid #B1BBBC;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #B1BBBC;
}
.backgroundColor10 {
  background-color: #6CCBAD;
}
.arrowColor10::before {
  border: medium solid #6CCBAD;
  border-width: 10px 10px 10px 0;
  border-color: transparent #6CCBAD transparent transparent;
}
.backgroundColorDark1 {
  background-color: #ccdad5;
}
.backgroundColorDark2 {
  background-color: #85bea8;
}
.backgroundColorDark3 {
  background-color: #daaa62;
}
.backgroundColorDark4 {
  background-color: #DF9A8C;
}
.backgroundColorDark5 {
  background-color: #829DA8;
}
.backgroundColorDark6 {
  background-color: #888;
}
.backgroundColorDark7 {
  background-color: #2E9E22;
}
.backgroundColorDark8 {
  background-color: #daaa62;
}
.backgroundColorDark9 {
  background-color: #3C5758;
}
.backgroundColorDark10 {
  background-color: #4CAB8D;
}
#home #myNav {
  background-color: #000;
}
#home #body {
  margin-top: 0;
}
#home #home-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: calc(100vh - 100px);
  text-align: center;
}
#home .big-logo img {
  max-width: 100%;
  height: auto;
  border-radius: 20%;
  width: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}
#home .download-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 20px;
}
#home .download-links a {
  margin: 0 10px;
}
#home .download-links a img {
  width: 150px;
  height: auto;
}