/* Import font families */
@import url("https://fonts.googleapis.com/css2?family=Bungee+Hairline&family=Montserrat+Subrayada:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap");
@import url("https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap");
/* Import utilities */
@keyframes mobileGlow {
  0% {
    box-shadow: 0 0 0.25rem 0.25rem rgb(0, 255, 0);
  }
  50% {
    box-shadow: 0 0 0.25rem 0.35rem rgb(0, 255, 0);
  }
  100% {
    box-shadow: 0 0 0.25rem 0.25rem rgb(0, 255, 0);
  }
}
@keyframes frMobileGlow {
  0% {
    box-shadow: 0 0 0.25rem 0.25rem rgb(0, 0, 255);
  }
  50% {
    box-shadow: 0 0 0.25rem 0.35rem rgb(0, 0, 255);
  }
  100% {
    box-shadow: 0 0 0.25rem 0.25rem rgb(0, 0, 255);
  }
}
@keyframes zhMobileGlow {
  0% {
    box-shadow: 0 0 0.25rem 0.25rem rgb(255, 0, 0);
  }
  50% {
    box-shadow: 0 0 0.25rem 0.35rem rgb(255, 0, 0);
  }
  100% {
    box-shadow: 0 0 0.25rem 0.25rem rgb(255, 0, 0);
  }
}
@media (pointer: coarse) and (hover: none) {
  .mobile-glow {
    animation: mobileGlow 1s ease-in-out infinite alternate;
  }
}

@keyframes expandGlow {
  0% {
    box-shadow: 0 0 0.25rem 0.25rem rgb(0, 255, 0);
  }
  50% {
    box-shadow: 0 0 0.75rem 0.75rem rgb(0, 255, 0);
  }
  100% {
    box-shadow: 0 0 0.5rem 0.5rem rgb(0, 255, 0);
  }
}
@keyframes frExpandGlow {
  0% {
    box-shadow: 0 0 0.25rem 0.25rem rgb(0, 0, 255);
  }
  50% {
    box-shadow: 0 0 0.75rem 0.75rem rgb(0, 0, 255);
  }
  100% {
    box-shadow: 0 0 0.5rem 0.5rem rgb(0, 0, 255);
  }
}
@keyframes zhExpandGlow {
  0% {
    box-shadow: 0 0 0.25rem 0.25rem rgb(255, 0, 0);
  }
  50% {
    box-shadow: 0 0 0.75rem 0.75rem rgb(255, 0, 0);
  }
  100% {
    box-shadow: 0 0 0.5rem 0.5rem rgb(255, 0, 0);
  }
}
@keyframes mobileSlideIn {
  0% {
    transform: translateX(-500vw);
  }
  100% {
    transform: translateX(105%);
  }
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideOutToUpperRight {
  0% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(-75vh) translateX(45vw);
  }
}
@keyframes slideOutToBottomLeft {
  0% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(65vh) translateX(-35vw);
  }
}
@keyframes fallDown {
  0% {
    transform: translateY(-200vh);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes riseUp {
  0% {
    transform: translateY(500vh);
  }
  100% {
    transform: translateY(0%);
  }
}
#introLogo {
  animation: slideOutToUpperRight 1.5s cubic-bezier(0.5, 0, 1, 0) 5s forwards, slideInFromLeft 4s cubic-bezier(0, 1, 0, 1);
}

#introName {
  animation: slideOutToBottomLeft 1.5s cubic-bezier(0.5, 0, 1, 0) 5s forwards, slideInFromRight 4s cubic-bezier(0, 1, 0, 1);
}

#designer {
  animation: slideOutToBottomLeft 1.5s cubic-bezier(0.5, 0, 1, 0) 5s, slideInFromRight 4s cubic-bezier(0, 1, 0, 1) 0.2s backwards;
}

#developer {
  animation: slideOutToBottomLeft 1.5s cubic-bezier(0.5, 0, 1, 0) 5s, slideInFromRight 4s cubic-bezier(0, 1, 0, 1) 0.4s backwards;
}

#daredevil {
  animation: slideOutToBottomLeft 1.5s cubic-bezier(0.5, 0, 1, 0) 5s, slideInFromRight 4s cubic-bezier(0, 1, 0, 1) 0.6s backwards;
}

.slide-in-from-right {
  animation: slideInFromRight 2s cubic-bezier(0, 1, 0, 1) forwards;
}

.fall-down {
  animation: fallDown 2s cubic-bezier(0, 1, 0, 1) forwards;
}

.rise-up {
  animation: riseUp 2s cubic-bezier(0, 1, 0, 1) forwards;
}

/* Import base styles */
/* _reset.scss */
*, *::before, *::after {
  box-sizing: border-box;
}

body, header, footer, section, article, aside, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  min-height: 100%;
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img, picture, svg, video, audio {
  display: block;
  max-width: 100%;
  border: none;
}

button, input, select, textarea {
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  cursor: none;
}

.txt-color {
  color: rgb(0, 0, 20);
}

.base-font-family {
  font-family: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  font-weight: 300;
}

.heading {
  font-family: "Montserrat Subrayada", sans-serif;
}

.fs-8 {
  font-size: clamp(80px, 12vw, 6rem);
}

.fs-4 {
  font-size: clamp(40px, 6vw, 3rem);
}

.fs-2 {
  font-size: clamp(20px, 3vw, 1.5rem);
}

.fs-1 {
  font-size: clamp(16px, 2.4vw, 1.2rem);
}

.fs-sm {
  font-size: clamp(12.8px, 1.92vw, 0.96rem);
  font-weight: bolder;
}

.txt-glow {
  text-shadow: 0 0 0.55rem rgb(0, 255, 0);
}

.centered {
  text-align: center;
}

.red-60 {
  color: rgb(60, 0, 0);
}

#essay p:first-of-type::first-letter {
  float: left;
  top: 0;
  font-size: 6rem;
  font-weight: 900;
  margin-right: 0.25rem;
  line-height: 0.75;
}

#essay p {
  margin: 0.5rem 0 0.5rem;
}

.indent {
  text-indent: 1.5rem;
}

.hanging-indent {
  text-indent: -1.5rem;
  padding-left: 1.5rem;
}

.project-card-txt {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* Import layout styles */
body[data-custom-cursor=true] {
  cursor: none;
}
body[data-custom-cursor=true] a {
  cursor: none;
}

.cursor {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  pointer-events: none;
}

.cursor-delay {
  transition: transform 200ms ease-out;
}

body#index > *:not(#cursor, #intro, #mobileHeader, #navBar) {
  margin-top: 2rem;
  margin-bottom: 15rem;
}

.background {
  background: radial-gradient(circle at 0% 0%, rgb(0, 0, 20), rgba(0, 52, 0, 0.1)), radial-gradient(circle at 100% 100%, rgb(0, 52, 0), rgb(0, 0, 0));
  background-attachment: fixed;
  background-size: cover;
}

.bg-burkinabe {
  background: radial-gradient(circle at 50% 50%, rgb(0, 0, 0), rgba(0, 0, 0, 0.5) 100%), radial-gradient(circle at 0% 0%, rgb(255, 0, 0), rgba(0, 0, 0, 0.5) 67%), radial-gradient(circle at 100% 100%, rgb(0, 255, 0), rgba(0, 0, 0, 0.5) 67%);
  background-attachment: fixed;
  background-size: cover;
}

.base-margin {
  margin: 1rem;
}

.base-padding {
  padding: 1rem;
}

.padding-side-extend {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

.gap {
  gap: 1rem;
}

.sm-gap {
  gap: 0.33rem;
}

.sm-row-gap {
  row-gap: 0.5rem;
}

.hide {
  display: none;
}

.block {
  display: block;
}

section p {
  line-height: 1.5;
}

/*#aboutMeInfo > p.fs-1 {
    line-height: 1.5;
}*/
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.h-centered-columns {
  justify-content: center;
}

.v-centered-columns {
  align-items: center;
}

body.main-grid-columns {
  display: grid;
  grid-template-columns: auto;
}
@media (min-width: 513px) and (max-width: 768px) {
  body.main-grid-columns {
    grid-template-columns: [page-columns-left] 7.5% [main-content-left] 85% [main-content-right] 7.5% [page-columns-right];
  }
}
@media (min-width: 769px) and (max-width: 1280px) {
  body.main-grid-columns {
    grid-template-columns: [page-columns-left] 12.5% [navbar-left] 5% [main-content-left] 65% [main-content-right] 5% [navbar-right] 12.5% [page-columns-right];
  }
}
@media (min-width: 1281px) {
  body.main-grid-columns {
    grid-template-columns: [page-columns-left] 22.5% [navbar-left] 5% [main-content-left] 45% [main-content-right] 5% [navbar-right] 22.5% [page-columns-right];
  }
}

.snap-middle {
  grid-column: main-content-left/main-content-right;
}

body#BurkinaFaso header {
  z-index: 10;
  grid-row: 1/3;
  margin-top: 30.5vw;
}

#essay {
  margin-block: 0;
}

.float-up-hidden {
  opacity: 0;
  transform: translateY(8rem);
  transition: opacity 0.6s cubic-bezier(0, 0, 0, 1), transform 0.6s cubic-bezier(0, 0, 0, 1);
}

.float-up-visible {
  opacity: 1;
  transform: translateY(0);
}

#aboutMeInfo p:nth-of-type(2) {
  margin: 0.5rem 0 1rem 0;
}

#aboutMeInfo p:nth-of-type(n+4) {
  margin: 0.5rem 0 0 0;
}

.skill-grid {
  display: grid;
  grid-gap: 2rem;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
@media (max-width: 512px) {
  .skill-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 513px) and (max-width: 768px) {
  .skill-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.skill-card {
  position: relative;
}

.tooltip {
  position: absolute;
  color: rgb(235, 235, 255);
  bottom: 100%;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s ease;
  pointer-events: none;
}

.skill-card:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.slide-out-initial {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-2.5rem);
  transition: visibility 0s, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  z-index: 10;
}

.slide-out-final {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.skill-card:hover .slide-out-initial {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, 1fr));
}
@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
}

#projectsGrid article {
  height: 20rem;
}
@media (min-width: 769px) {
  #projectsGrid article {
    height: 30rem;
  }
}

.expand-glow:hover {
  animation: expandGlow 0.2s forwards;
}

.course-container {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.frosted {
  background-color: rgb(235, 235, 255);
  border-radius: 1rem;
}

.shadow {
  box-shadow: 0 0 0.25rem 0.25rem rgb(0, 255, 0);
}

.dark-shadow {
  box-shadow: 0.25rem 0.25rem 0.25rem rgb(0, 0, 20);
}

.platinum-shadow {
  box-shadow: 0 0 0.25rem 0.25rem rgb(235, 235, 255);
}

.gold-glow {
  box-shadow: 0 0 6rem 0.25rem rgb(254, 221, 1);
}

#uniCourseList {
  padding: 0 0 1rem 0;
}

.course {
  background-color: rgb(0, 0, 20);
  text-shadow: 0 0 0.55rem rgb(0, 255, 0);
  border-radius: 1rem;
  font-weight: bold;
  color: white;
}

.popout:hover {
  transform: scale(110%, 110%);
  transition: transform 0.1s ease-in-out;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#workExp h3:not(:first-of-type), #education h3:not(:first-of-type), #awards h3:not(:first-of-type) {
  margin: 1rem 0 0 0;
}

#intro {
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  grid-column: page-columns-left/page-columns-right;
}
@media (max-width: 896px) {
  #intro {
    flex-direction: column;
  }
}

#introInfo {
  color: rgb(235, 235, 255);
  text-align: center;
}
@media (min-width: 897px) {
  #introInfo {
    margin: 0 0 0 1rem;
    text-align: left;
  }
}

#tagline {
  justify-content: center;
  gap: 0.75rem;
}
@media (min-width: 897px) {
  #tagline {
    justify-content: flex-start;
  }
}

#mobileHeader {
  justify-content: space-between;
  padding: 1rem 1rem;
  align-items: flex-end;
  z-index: 200;
  flex-grow: 0 0 auto;
}
@media (max-width: 768px) {
  #mobileHeader {
    position: sticky;
    width: 100vw;
    top: 0;
    align-items: center;
    background-color: rgb(0, 0, 20);
    grid-column: page-columns-left/page-columns-right;
  }
}
@media (min-width: 769px) {
  #mobileHeader {
    box-shadow: none;
    grid-column: navbar-left/navbar-right;
  }
}

#langSelect {
  position: relative;
}

#langSelect:hover {
  box-shadow: 0 0 0.25rem 0.25rem rgb(0, 255, 0);
}

#langOptions {
  display: block;
  width: 105%;
  top: 2rem;
  right: 0;
  text-align: right;
  padding: 0.5rem;
  position: absolute;
}
@media (max-width: 768px) {
  #langOptions {
    right: -2.5%;
    text-align: center;
  }
}

#langOptions a {
  display: block;
}

#langOptions a:hover {
  text-shadow: 0 0 0.55rem rgb(0, 255, 0);
}

#navBar {
  overflow-x: hidden;
}
@media (max-width: 768px) {
  #navBar {
    position: fixed;
    inset: 0 0 0 45%;
    z-index: 10;
    background-color: rgba(235, 235, 255, 0.8);
  }
  @supports (backdrop-filter: blur(0.75rem)) {
    #navBar {
      backdrop-filter: blur(0.75rem);
    }
  }
}
@media (min-width: 769px) {
  #navBar {
    grid-column: navbar-left/navbar-right;
  }
}

@media (max-width: 768px) {
  #navBar[data-visibility=false] {
    transform: translateX(105%);
    transition: transform 0.3s ease-in-out;
  }
}

#navBar[data-visibility=true] {
  transform: translateX(0%);
  transition: transform 0.3s ease-in-out;
}

@media (max-width: 768px) {
  #navBarItems {
    flex-direction: column;
    padding-block: 5rem;
  }
}

#navBarItems li:hover {
  text-shadow: 0 0 0.55rem rgb(0, 255, 0);
}

#essayIntro h2, #essayIntro p {
  margin: 1rem 0 0 0;
}

@media (max-width: 768px) {
  #contact {
    flex-direction: column;
  }
}
#contact {
  justify-content: space-between;
  gap: 1rem;
}

#findMeElsewhere {
  flex-direction: column;
  gap: 1rem;
}

#otherLinks {
  gap: 1rem;
  align-items: center;
}

#litReviewBibliography li {
  margin: 0.5rem 0 0 0;
}

/* Import specific UI component styles */
#introLogo {
  width: clamp(48px, 9vw, 12rem);
  z-index: 10;
}
@media (min-width: 897px) {
  #introLogo {
    margin: 0 0 0 5rem;
  }
}

#navbarLogo {
  width: clamp(2rem, 5vw, 8rem);
}

.btn {
  width: clamp(1.5rem, 2.5vw, 2rem);
}

#profileHero {
  width: 100%;
  aspect-ratio: 4/2;
  object-fit: cover;
  border-radius: 1rem 1rem 0 0;
}

#navigationToggle {
  width: 2rem;
  aspect-ratio: 1/1;
  background-image: url("../images/svg/icons/buttons/hamburger-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  align-self: center;
}
@media (min-width: 769px) {
  #navigationToggle {
    display: none;
  }
}

#navigationToggle:hover {
  transform: scale(1.15, 1.15);
  transition: transform 0.15s ease-in-out;
}

.dropdown-container button {
  margin: 0.5rem 0 0.5rem 0;
}

.drop-shadow {
  filter: drop-shadow(0 0 0.25rem rgb(0, 255, 0));
}

.icon {
  width: 8rem;
  aspect-ratio: 1/1;
  padding: 1rem;
}

.project-thumbnail {
  width: 100%;
  height: 25%;
  object-fit: cover;
  border-radius: 1rem 1rem 0 0;
}

#dogsHero {
  object-position: 0% 68%;
}

#bikesHero {
  object-position: 0% 55%;
}

.dropdown:hover {
  transform: scale(110%, 110%);
  transition: transform 0.1s ease-in-out;
}

#burkinabeFlag {
  width: 100%;
  height: 35vw;
  object-fit: cover;
  position: relative;
  grid-column: page-columns-left/page-columns-right;
  grid-row: 1;
}

#burkinabeJ3Logo {
  width: min(10rem, 15vw);
  aspect-ratio: 1/1;
  position: absolute;
  z-index: 10;
}

#burkinabeJ3Logo:hover {
  box-shadow: 0 0 6rem rgb(60, 0, 0);
  background-color: rgba(60, 0, 0, 0.5);
  border-radius: 50% 50% 50% 50%;
  padding: 1rem;
}

.die-back {
  opacity: 0;
  transform: scale(0, 0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.grow-forth {
  opacity: 1;
  transform: scale(1, 1);
}

#burkinabePrehistory {
  width: 50%;
  float: left;
  margin: 1rem 1rem 1rem 0;
}

#burkinabeColonialRelations {
  width: 50%;
  float: right;
  margin: 1rem 0 1rem 1rem;
}

#thomasSankara {
  float: left;
  margin-bottom: 0.5rem;
  shape-outside: polygon(0% 100%, 0% 0%, 33% 0%, 33% 70%, 55% 68%, 75% 100%);
}

#burkinabeSalafists {
  float: right;
  width: 50%;
  margin: 1rem 0 1rem 1rem;
}

svg .color0 {
  fill: rgb(0, 255, 0);
}
svg .color2 {
  fill: rgb(40, 255, 40);
}
svg .off-black0 {
  fill: rgb(0, 0, 20);
}
svg .off-black1 {
  fill: rgb(20, 20, 40);
}
svg .off-black2 {
  fill: rgb(40, 40, 60);
}
svg .off-black3 {
  fill: rgb(60, 60, 80);
}
svg .off-black4 {
  fill: rgb(80, 80, 100);
}
svg .off-white0 {
  fill: rgb(235, 235, 255);
}
svg .stroke-color0 {
  stroke: rgb(0, 255, 0);
}
svg .stroke-black0 {
  stroke: rgb(0, 0, 20);
}
svg .stroke-white0 {
  stroke: rgb(235, 235, 255);
}
svg .stop-color0 {
  stop-color: rgb(0, 255, 0);
}
svg .stop-color1 {
  stop-color: rgb(0, 235, 0);
}
svg .stop-color4 {
  stop-color: rgb(0, 175, 0);
}
svg .stop-black0 {
  stop-color: rgb(0, 0, 20);
}
svg .stop-black1 {
  stop-color: rgb(20, 20, 40);
}
svg .stop-black2 {
  stop-color: rgb(40, 40, 60);
}
svg .stop-black4 {
  stop-color: rgb(80, 80, 100);
}
svg .stop-white0 {
  stop-color: rgb(235, 235, 255);
}
svg .stop-white1 {
  stop-color: rgb(215, 215, 235);
}

body#index[data-lang=fr] svg .color0 {
  fill: rgb(0, 0, 255);
}
body#index[data-lang=fr] svg .color2 {
  fill: rgb(40, 40, 255);
}
body#index[data-lang=fr] svg .off-black0 {
  fill: rgb(20, 0, 0);
}
body#index[data-lang=fr] svg .off-black1 {
  fill: rgb(40, 20, 20);
}
body#index[data-lang=fr] svg .off-black2 {
  fill: rgb(60, 40, 40);
}
body#index[data-lang=fr] svg .off-black3 {
  fill: rgb(80, 60, 60);
}
body#index[data-lang=fr] svg .off-black4 {
  fill: rgb(100, 80, 80);
}
body#index[data-lang=fr] svg .off-white0 {
  fill: rgb(255, 235, 235);
}
body#index[data-lang=fr] svg .stroke-color0 {
  stroke: rgb(0, 0, 255);
}
body#index[data-lang=fr] svg .stroke-black0 {
  stroke: rgb(20, 0, 0);
}
body#index[data-lang=fr] svg .stop-color0 {
  stop-color: rgb(0, 0, 255);
}
body#index[data-lang=fr] svg .stop-color1 {
  stop-color: rgb(0, 0, 235);
}
body#index[data-lang=fr] svg .stop-color4 {
  stop-color: rgb(0, 0, 175);
}
body#index[data-lang=fr] svg .stop-black0 {
  stop-color: rgb(20, 0, 0);
}
body#index[data-lang=fr] svg .stop-black1 {
  stop-color: rgb(40, 20, 20);
}
body#index[data-lang=fr] svg .stop-black2 {
  stop-color: rgb(60, 40, 40);
}
body#index[data-lang=fr] svg .stop-black4 {
  stop-color: rgb(100, 80, 80);
}
body#index[data-lang=fr] svg .stop-white0 {
  stop-color: rgb(255, 235, 235);
}
body#index[data-lang=fr] svg .stop-white1 {
  stop-color: rgb(235, 215, 215);
}

body#index[data-lang=zh] svg .color0 {
  fill: rgb(255, 0, 0);
}
body#index[data-lang=zh] svg .color2 {
  fill: rgb(255, 40, 40);
}
body#index[data-lang=zh] svg .off-black0 {
  fill: rgb(20, 20, 0);
}
body#index[data-lang=zh] svg .off-black1 {
  fill: rgb(40, 40, 20);
}
body#index[data-lang=zh] svg .off-black2 {
  fill: rgb(60, 60, 40);
}
body#index[data-lang=zh] svg .off-black3 {
  fill: rgb(80, 80, 60);
}
body#index[data-lang=zh] svg .off-black4 {
  fill: rgb(100, 100, 80);
}
body#index[data-lang=zh] svg .off-white0 {
  fill: rgb(255, 255, 235);
}
body#index[data-lang=zh] svg .stroke-color0 {
  stroke: rgb(255, 0, 0);
}
body#index[data-lang=zh] svg .stroke-black0 {
  stroke: rgb(20, 20, 0);
}
body#index[data-lang=zh] svg .stop-color0 {
  stop-color: rgb(255, 0, 0);
}
body#index[data-lang=zh] svg .stop-color1 {
  stop-color: rgb(235, 0, 0);
}
body#index[data-lang=zh] svg .stop-color4 {
  stop-color: rgb(175, 0, 0);
}
body#index[data-lang=zh] svg .stop-black0 {
  stop-color: rgb(20, 20, 0);
}
body#index[data-lang=zh] svg .stop-black1 {
  stop-color: rgb(40, 40, 20);
}
body#index[data-lang=zh] svg .stop-black2 {
  stop-color: rgb(60, 60, 40);
}
body#index[data-lang=zh] svg .stop-black4 {
  stop-color: rgb(100, 100, 80);
}
body#index[data-lang=zh] svg .stop-white0 {
  stop-color: rgb(255, 255, 235);
}
body#index[data-lang=zh] svg .stop-white1 {
  stop-color: rgb(235, 235, 215);
}

body#index[data-lang=fr] {
  background: radial-gradient(circle at 0% 0%, rgb(20, 0, 0), rgba(0, 52, 0, 0.1)), radial-gradient(circle at 100% 100%, rgb(0, 0, 52), rgb(0, 0, 0));
  background-attachment: fixed;
  background-size: cover;
  color: rgb(20, 0, 0);
}
body#index[data-lang=fr] #introInfo {
  color: rgb(255, 235, 235);
}
@media (max-width: 384px) {
  body#index[data-lang=fr] #tagline {
    font-size: 16px;
  }
}
body#index[data-lang=fr] #langSelect:hover {
  box-shadow: 0 0 0.25rem 0.25rem rgb(0, 0, 255);
}
body#index[data-lang=fr] #mobileHeader {
  background-color: rgb(20, 0, 0);
}
@media (min-width: 769px) {
  body#index[data-lang=fr] #mobileHeader {
    box-shadow: none;
    background-color: transparent;
  }
}
body#index[data-lang=fr] #navigationToggle {
  background-image: url("../images/svg/icons/buttons/hamburger-icon-fr.svg");
}
body#index[data-lang=fr] #navBarItems li:hover {
  text-shadow: 0 0 0.55rem rgb(0, 0, 255);
}
body#index[data-lang=fr] .frosted {
  background-color: rgb(255, 235, 235);
}
body#index[data-lang=fr] .shadow {
  box-shadow: 0 0 0.25rem 0.25rem rgb(0, 0, 255);
}
body#index[data-lang=fr] .drop-shadow {
  filter: drop-shadow(0 0 0.25rem rgb(0, 0, 255));
}
body#index[data-lang=fr] .txt-glow {
  text-shadow: 0 0 0.55rem rgb(0, 0, 255);
}
@media (pointer: coarse) and (hover: none) {
  body#index[data-lang=fr] .mobile-glow {
    animation: frMobileGlow 1s ease-in-out infinite alternate;
  }
}
body#index[data-lang=fr] .expand-glow:hover {
  animation: frExpandGlow 0.2s forwards;
}
body#index[data-lang=fr] .course {
  text-shadow: 0 0 0.55rem rgb(0, 0, 255);
  background-color: rgb(20, 0, 0);
}
body#index[data-lang=fr] .tooltip {
  color: rgb(255, 235, 235);
}

body#index[data-lang=zh] {
  font-family: "ZCOOL XiaoWei", system-ui, sans-serif;
  background: radial-gradient(circle at 0% 0%, rgb(20, 0, 0), rgba(0, 52, 0, 0.1)), radial-gradient(circle at 100% 100%, rgb(52, 0, 0), rgb(0, 0, 0));
  background-attachment: fixed;
  background-size: cover;
  color: rgb(20, 20, 0);
}
body#index[data-lang=zh] #introName {
  letter-spacing: 1.25rem;
}
body#index[data-lang=zh] #introInfo {
  color: rgb(255, 255, 235);
}
body#index[data-lang=zh] #langSelect:hover {
  box-shadow: 0 0 0.25rem 0.25rem rgb(255, 0, 0);
}
body#index[data-lang=zh] #mobileHeader {
  background-color: rgb(20, 20, 0);
}
@media (min-width: 769px) {
  body#index[data-lang=zh] #mobileHeader {
    box-shadow: none;
    background-color: transparent;
  }
}
body#index[data-lang=zh] #navigationToggle {
  background-image: url("../images/svg/icons/buttons/hamburger-icon-zh.svg");
}
body#index[data-lang=zh] #navBarItems li:hover {
  text-shadow: 0 0 0.55rem rgb(255, 0, 0);
}
body#index[data-lang=zh] #aboutMe h3, body#index[data-lang=zh] #workExp h3, body#index[data-lang=zh] #education h3, body#index[data-lang=zh] #awards h3 {
  margin-bottom: 0.5rem;
}
body#index[data-lang=zh] #contact h2:first-of-type {
  margin-bottom: 0.5rem;
}
body#index[data-lang=zh] #contact :nth-of-type(2) {
  margin-block: 0.5rem;
}
body#index[data-lang=zh] .frosted {
  background-color: rgb(255, 255, 235);
}
body#index[data-lang=zh] .shadow {
  box-shadow: 0 0 0.25rem 0.25rem rgb(255, 0, 0);
}
body#index[data-lang=zh] .drop-shadow {
  filter: drop-shadow(0 0 0.25rem rgb(255, 0, 0));
}
body#index[data-lang=zh] .heading {
  font-family: "ZCOOL QingKe HuangYou", system-ui, sans-serif;
}
body#index[data-lang=zh] .txt-glow {
  text-shadow: 0 0 0.55rem rgb(255, 0, 0);
}
@media (pointer: coarse) and (hover: none) {
  body#index[data-lang=zh] .mobile-glow {
    animation: zhMobileGlow 1s ease-in-out infinite alternate;
  }
}
body#index[data-lang=zh] .expand-glow:hover {
  animation: zhExpandGlow 0.2s forwards;
}
body#index[data-lang=zh] .course {
  text-shadow: 0 0 0.55rem rgb(255, 0, 0);
  background-color: rgb(20, 20, 0);
}
body#index[data-lang=zh] .tooltip {
  color: rgb(255, 255, 235);
}

/*# sourceMappingURL=style.css.map */