@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap");
#loading-screen {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  background-color: #000;
  color: #ffffff;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: all 1.3s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#loading-screen .loading-element-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
#loading-screen .loading-element-container .circle-progress-top {
  z-index: 2;
}
#loading-screen .loading-element-container .circle-progress-bottom {
  z-index: 1;
}
#loading-screen .loading-element-container #circle-progres,
#loading-screen .loading-element-container .circle-progress {
  transform: rotate(-90deg);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
#loading-screen .loading-element-container #circle-progres svg#svg-progress-element,
#loading-screen .loading-element-container #circle-progres svg.svg-progress-element,
#loading-screen .loading-element-container .circle-progress svg#svg-progress-element,
#loading-screen .loading-element-container .circle-progress svg.svg-progress-element {
  width: 30rem;
  height: 30rem;
  transition: all 0.3s ease-in-out;
}
#loading-screen .loading-element-container #circle-progres #progress-circle,
#loading-screen .loading-element-container #circle-progres .progress-circle,
#loading-screen .loading-element-container .circle-progress #progress-circle,
#loading-screen .loading-element-container .circle-progress .progress-circle {
  fill: none;
  stroke-width: 130;
  stroke-dasharray: 10 30;
  stroke-dashoffset: 0;
}
#loading-screen .loading-element-container #circle-progres #progress-circle-bottom,
#loading-screen .loading-element-container .circle-progress #progress-circle-bottom {
  stroke: transparent;
}
#loading-screen .loading-element-container #loading-text {
  position: absolute;
  font-size: 2rem;
  transition: all 0.9s ease-in-out;
}

/**
*
**/
/* tablet */
@keyframes flying {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  20% {
    transform: translateY(20vh) rotate(90deg);
    opacity: 0.8;
  }
  60% {
    transform: translateY(60vh) rotate(-45deg);
    opacity: 0.4;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(185vh) rotate(360deg);
    opacity: 0;
    /* opacity: 1; */
    stroke-dashoffset: 0;
  }
}
.star {
  position: absolute;
  display: block;
  top: -20%;
  transition: all 1s ease-in-out;
}
.star::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-right: var(--star-size) solid transparent;
  border-left: var(--star-size) solid transparent;
  /* Use the same formula for equilateral triangle */
  border-top: calc(var(--star-size) * 1.73205) solid red;
}

#platform-page {
  position: relative;
  z-index: 2;
  min-width: 60vw;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 87vw;
  height: -moz-fit-content;
  height: fit-content;
  background-color: rgba(255, 255, 255, 0.13);
  border-radius: 3rem;
  padding: 3rem 3rem 6rem;
  margin: 6vh auto auto;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
}
@media screen and (max-width: 768px) {
  #platform-page {
    width: 90vw;
    max-width: 95vw;
    margin: 2.2rem auto auto;
    padding: 0.9rem 1rem 1rem;
  }
}
#platform-page h2 {
  letter-spacing: 0.1rem;
}
#platform-page p,
#platform-page span {
  color: #fff;
}
#platform-page #profile-section {
  position: relative;
}
#platform-page #profile-section .logo-container {
  position: absolute;
  mix-blend-mode: soft-light;
  width: 100%;
  z-index: -1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.13;
}
@media screen and (max-width: 768px) {
  #platform-page #profile-section .logo-container {
    top: 3.9rem;
    z-index: 1;
  }
}
#platform-page #profile-section .profile-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0 0;
}
#platform-page #profile-section .profile-image-container img {
  height: 10rem;
  width: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
  border-radius: 100%;
}
#platform-page #profile-section .fullname-container,
#platform-page #profile-section .quote-container {
  text-align: center;
}
#platform-page #profile-section .fullname-container {
  mix-blend-mode: difference;
  padding: 0.8rem 0;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #platform-page #profile-section .fullname-container {
    flex-direction: column;
    gap: 2rem 0;
    margin: 0.8rem 0 0;
  }
}
#platform-page #profile-section .fullname-container .name-cn h1,
#platform-page #profile-section .fullname-container .name-cn span {
  font-family: "Noto Serif SC", serif;
  font-optical-sizing: auto;
  font-style: normal;
}
#platform-page #profile-section .fullname-container h1,
#platform-page #profile-section .fullname-container span {
  font-family: "Lora", serif;
  font-size: 3.3rem;
  color: #fff;
  opacity: 0.8;
  font-weight: 400;
  cursor: default;
}
@media screen and (max-width: 768px) {
  #platform-page #profile-section .fullname-container h1,
  #platform-page #profile-section .fullname-container span {
    padding: 0rem 0 0;
    font-size: 2.4rem;
  }
}
#platform-page #profile-section .fullname-container h1 .n-bold,
#platform-page #profile-section .fullname-container span .n-bold {
  font-weight: 600;
  font-size: 4rem;
}
#platform-page #profile-section .quote-container span {
  display: block;
  font-family: "Dancing Script", coaursive;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  opacity: 0.9;
  padding: 0.8rem 0 0.8rem;
  color: #501c1c;
  cursor: default;
  background: rgba(255, 255, 255, 0.8117647059);
  border-radius: 1rem;
  padding: 1rem 1.2rem;
  margin: 2rem auto 1rem;
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  #platform-page #profile-section .quote-container span {
    font-size: 1.8rem;
  }
}
#platform-page #profile-section .role-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1rem 0;
}
#platform-page #profile-section .role-container .role-single {
  font-size: 1.2rem;
  padding: 0.28rem 0.8rem 0.3rem;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  color: #842f2f;
  font-weight: 600;
  z-index: 2;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
  cursor: unset;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
@media screen and (max-width: 768px) {
  #platform-page #profile-section .role-container .role-single {
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    border-top-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
    box-shadow: 0.3rem 0.3rem 0.8rem 0.3rem rgba(66, 13, 8, 0.075);
  }
}
#platform-page #profile-section .list-icons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin: 1.5rem 0 0;
}
@media screen and (max-width: 768px) {
  #platform-page #profile-section .list-icons-container {
    gap: 0.6rem;
  }
}
#platform-page #platform-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  z-index: 2;
  margin: 3rem 0 0;
}
#platform-page #platform-section .single-button {
  text-align: center;
  height: -moz-max-content;
  height: -moz-fit-content !important;
  height: fit-content !important;
  transition: all 0.9s ease-in-out;
  width: 90%;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
  opacity: 0;
}
@media screen and (max-width: 768px) {
  #platform-page #platform-section .single-button {
    width: 80vw;
  }
}
@media screen and (max-width: 480px) {
  #platform-page #platform-section .single-button {
    width: 90%;
  }
}
@media screen and (min-width: 480px) {
  #platform-page #platform-section .single-button:hover, #platform-page #platform-section .single-button:active {
    transform: scale(0.99);
    border: 1px solid #ff0000;
  }
  #platform-page #platform-section .single-button:hover a span,
  #platform-page #platform-section .single-button:hover ::before, #platform-page #platform-section .single-button:active a span,
  #platform-page #platform-section .single-button:active ::before {
    transition: all 0.3s ease-in-out;
  }
}
#platform-page #platform-section .single-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  padding: 0.4rem 1.8rem;
}
@media screen and (max-width: 768px) {
  #platform-page #platform-section .single-button a {
    height: 3.5rem;
  }
}
#platform-page #platform-section .single-button a span {
  font-size: 1.5rem;
  opacity: 1 !important;
  color: #842f2f;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  #platform-page #platform-section .single-button a span {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 480px) {
  #platform-page #platform-section .single-button a span {
    font-size: 1.4rem;
  }
}
#platform-page #platform-section .single-button a:active {
  outline: none;
}
#platform-page #platform-section .single-button a:focus:not(:focus-visible) {
  outline: none;
}
#platform-page #platform-section .single-button a:focus-visible {
  outline: revert;
}

.spotify-theme {
  color: #1BD760;
}

.spotify-container {
  min-width: 27rem;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 90vw;
  margin: 0 auto 0;
  text-align: center;
  border: 1px solid #1BD760;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  padding: 1.5rem 1.8rem 1.1rem;
  border-radius: 3rem;
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
  background: #000;
}
.spotify-container #track-info {
  font-size: 2rem;
  color: #fff;
}
.spotify-container #track-info a {
  display: block;
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  padding: 1rem;
}
.spotify-container #track-info a img {
  width: 100%;
  max-width: 13rem;
  border-radius: 2rem;
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
  border: 1px solid #1BD760;
}
@media screen and (max-width: 768px) {
  .spotify-container #track-info a img {
    max-width: 15rem;
  }
}
.spotify-container #track-info a .track-name {
  padding: 0.3rem 0 0.3rem;
}
.spotify-container #track-info p.nicp {
  padding: 1rem;
}
.spotify-container .audio-preview {
  display: none;
  text-align: center;
}
.spotify-container audio {
  width: 100%;
  max-width: 300px;
}

.priority-focuses-container {
  width: 90%;
  max-width: 90%;
  text-align: center;
  border-radius: 3rem;
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
  padding: 1.2rem 0;
  background-color: rgba(255, 255, 255, 0.8);
}
.priority-focuses-container .pf-list {
  padding: 0 3.3rem 2rem;
  display: flex;
  flex-direction: column;
}
.priority-focuses-container .pf-list p {
  color: #000 !important;
  padding: 1.5rem 0 0;
  font-size: 1.4rem;
}

.news-container {
  width: 100%;
  max-width: 90vw;
  min-height: 10rem;
  text-align: center;
  border-radius: 3rem;
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
  padding: 1.2rem 1rem;
  background-color: rgba(255, 255, 255, 0.5176470588);
}
.news-container h1,
.news-container p {
  color: #000 !important;
}
.news-container p {
  padding: 1.4rem 0 0;
}

.floating-social-media-container {
  position: fixed;
  bottom: 0;
  left: 0.6rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  transition: all 0.9s ease;
  margin: 0 0 0 1rem;
  padding: 2rem 0 3rem;
  opacity: 0;
  transform: translateX(-3rem);
}
@media all and (max-width: 768px) {
  .floating-social-media-container {
    margin: 0;
    padding: 3rem 0 3rem;
  }
}
.floating-social-media-container:hover {
  opacity: 1 !important;
}
.floating-social-media-container a {
  justify-content: center;
  display: flex;
  align-items: center;
  text-decoration: none;
  text-align: center;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.33);
  border-radius: 1rem;
  z-index: 2;
  transition: all 0.3s ease-in-out;
  height: 3.9rem;
  width: 3.9rem;
}
.floating-social-media-container a:hover {
  transform: scale(1.1);
}
.floating-social-media-container a img {
  width: 2.8rem;
}
@media all and (max-width: 768px) {
  .floating-social-media-container a img {
    width: 3.3rem;
  }
}
.floating-social-media-container a img.img-linkedin {
  width: 3.2rem;
}
.floating-social-media-container a img.img-github {
  width: 2.7rem;
}
.floating-social-media-container a img.img-instagram {
  width: 2.9rem;
}
.floating-social-media-container a img.img-facebook {
  width: 2.4rem;
}
.floating-social-media-container a img.img-spotify {
  width: 2.7rem;
}
@media screen and (max-width: 768px) {
  .floating-social-media-container a img.img-youtube {
    width: 2.8rem;
  }
  .floating-social-media-container a img.img-spotify {
    width: 2.7rem;
  }
}
@media all and (max-width: 768px) {
  .floating-social-media-container a img {
    transform: scale(0.9);
  }
}

.reduce-opacity {
  opacity: 0.3;
  transform: translateX(-1.3rem);
}
@media all and (max-width: 768px) {
  .reduce-opacity {
    transform: translateX(-0.6rem);
  }
}

.blog-articles-container {
  width: 90%;
  max-width: 90%;
  border-radius: 3rem;
  padding: 1.6rem 3rem 2rem;
  box-shadow: 0 0 0.8rem 0.8rem rgba(66, 13, 8, 0.043);
  background-color: rgba(255, 255, 255, 0.8);
  margin: auto;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .blog-articles-container {
    padding: 1.8rem 1.3rem 1rem 2rem;
    margin: 0 auto 2rem;
  }
}
.blog-articles-container .list-articles-container {
  display: flex;
  justify-self: flex-start;
  align-items: center;
  gap: 1.3rem;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .blog-articles-container .list-articles-container {
    gap: 0rem;
  }
}
.blog-articles-container .list-articles-container .article-link-container {
  text-align: left;
  width: 100%;
}
.blog-articles-container .list-articles-container .article-link-container a,
.blog-articles-container .list-articles-container .article-link-container span {
  color: #842f2f !important;
}
.blog-articles-container .list-articles-container .article-link-container a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 11fr;
  gap: 0.3rem;
  padding: 0.8rem 1rem 0.8rem 1.8rem;
  font-size: 1.2rem;
  border-radius: 0.8rem;
  transition: all 0.3s ease-in-out;
  border: 1px solid transparent;
}
.blog-articles-container .list-articles-container .article-link-container a::before {
  content: "►";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.13s ease-in-out;
}
@media screen and (max-width: 768px) {
  .blog-articles-container .list-articles-container .article-link-container a::before {
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 1024px) {
  .blog-articles-container .list-articles-container .article-link-container a:hover {
    border: 1px solid #000;
    background-color: rgba(0, 0, 0, 0.5921568627);
    color: #fff !important;
    transform: scale(0.99);
  }
  .blog-articles-container .list-articles-container .article-link-container a:hover::before {
    left: 0.4rem;
    transform: translateY(-50%) scale(0.5);
    color: #fff !important;
  }
  .blog-articles-container .list-articles-container .article-link-container a:hover span {
    color: #fff !important;
  }
}
@media screen and (max-width: 480px) {
  .blog-articles-container .list-articles-container .article-link-container a {
    padding: 0.9rem 1rem 0.9rem 1.5rem;
    grid-template-columns: 4fr auto;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.blog-articles-container .list-articles-container .article-link-container a b {
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
}
.blog-articles-container .list-articles-container .article-link-container a span {
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: "Poppins", sans-serif;
}

p {
  font-optical-sizing: auto;
}

span,
a,
li,
p {
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: 0.1rem;
  text-decoration: none !important;
  color: white;
  outline: none;
}
@media screen and (max-width: 768px) {
  span,
  a,
  li,
  p {
    font-size: 1.15rem;
  }
}
@media screen and (max-width: 480px) {
  span,
  a,
  li,
  p {
    font-size: 1.1rem;
  }
}

p {
  color: white;
}

h2 {
  font-size: 1.8rem;
  margin: 0 0 2rem;
  text-align: center;
  color: #ff0000;
  opacity: 0.8;
}
@media screen and (max-width: 768px) {
  h2 {
    margin: 0 0 1.2rem;
  }
}

span,
a {
  cursor: pointer;
}

a:active,
a:focus {
  outline: 0;
  border: none;
}

html {
  font-size: 62.5%;
  overflow: hidden;
}

body {
  /* scroll-snap-type: y mandatory;
  overflow-y: scroll; */
  /* This will be displayed if it is loading for too long */
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, #c60000 60%, #420D08 100%);
}
body .overall-body-wrapper {
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, #c60000 60%, #420D08 100%);
  background-size: cover !important;
  transition: all 0.3s ease-in-out;
  height: 100vh;
  max-height: 100vh;
  overflow: scroll;
}
body .footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  margin: 3rem 0 3rem;
}
body .footer p, body .footer span {
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
  color: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 480px) {
  body .footer p, body .footer span {
    font-size: 1.1rem;
  }
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
}
/* width */
::-webkit-scrollbar {
  display: none;
}

/* Track */
::-webkit-scrollbar-track {
  display: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
  display: none;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  display: none;
}

/* Make a custom fallback font based on the local Times New Roman */
@font-face {
  font-family: "Lora-fallback";
  size-adjust: 115.62%;
  src: local("Times New Roman");
}
/* Set the body (or any other selector) to Lora, but if it is missing fallback to our bespoke fallback 'Lora-fallback'  */
body {
  font-family: "Lora", "Lora-fallback";
  /* The value doesn't matter, but you must specify a line-height for all text with custom fonts to avoid CLS */
  line-height: 1.5em;
}