/* fonts */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap");

/* color palette */
:root {
  --primary-color: #00008b;
  --secondary-color: #9d194e;
  --tertiary-color: #4d3c77;
  --accent-color: #b38f3c; /* after-hover */

  --background-color: #ffffff;
  --text-color: #313638; /* main context */
  --muted-color: #808080; /* before-hover & borders */
  --svg-background: #D9D9D9;
}

.dark-mode {
  --primary-color: #e3bb08;
  --secondary-color: #d03365;
  --tertiary-color: #6c63a8;
  --accent-color: #1bcdd0;

  --background-color: #1f1f1f;
  --text-color: #f2f0ef;
  --muted-color: #5a5a5a;
  --svg-background: #091833;
}

/* hide the scrollbar */
body::-webkit-scrollbar {
  display: none;
}

/* layout styling */
/* remove all the default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* set root font size */
html {
  font-size: 13px;
}

/* font configs */
body {
  font-family: "JetBrains Mono", monospace;
  color: var(--text-color);
  background-color: var(--background-color);
  font-weight: 500;

  margin: 2vh 20vw;
  max-width: 65vw;
  transition: background-color 0.5s ease, color 0.5s ease;
}

section {
  margin-top: 10vh;
  scroll-margin-top: 15vh; /* creates top margin for in-page anchors */
}

h2 {
  /* section's title */
  margin-bottom: 10px;
  padding-left: 3px;
  background: linear-gradient(
    to right,
    rgba(128, 128, 128, 0.332),
    var(--background-color)
  );
}

.context {
  /* context indentation */
  padding: 10px;
  /* opacity: 0; temporarily commented out to debug - hide the context before the gsap animations */
}

/* line spacing except for home */
p:not(.home > p) {
  line-height: 1.8em;
}

/* anchor styling */
a {
  text-decoration: none;
  color: var(--text-color);
}

a:hover {
  color: var(--accent-color);
}

/* highlighting */
span {
  color: var(--secondary-color); /* highlighting */
  font-weight: 1000;
}

em {
  font-weight: 1000; /* italic */
  color: var(--primary-color);
}

/* logo */
.kuntiniong {
  padding: 5px;

  top: 0;
  position: sticky;

  z-index: 2; /* on top of the nav-bar */

  pointer-events: none;
  transition: background-color 0.5s ease, transform 0.5s ease;
}

.kuntiniong > * {
  pointer-events: auto; /* allows interaction abeilt overlapping */
}

.kuntiniong a {
  font-family: "Cedarville Cursive", Arial;

  font-size: 1.6rem;
  font-weight: 1000;

  color: var(--text-color);
  text-decoration: none;
}

/* nav bar */
.nav-bar {
  font-size: 1rem;
  background-color: var(--background-color);
  padding-top: 10px;

  top: 0;
  position: sticky; /* fixed on top */

  z-index: 1;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.tab-list {
  display: flex;
  justify-content: flex-end; /* align to right */
  align-items: center;

  list-style-type: none;
}

.tab {
  margin-right: 1.5rem;
}

/* dark mode toggle */
.dark-mode-button {
  background: none; /* remove default background & border */
  border: none;

  cursor: pointer; /* add pointer cursor on hover */
}

.material-symbols-outlined,
.dark-mode-icon {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24;
  color: var(--primary-color);
}

/* portrait mode */
@media screen and (max-width: 900px) {
  /* hide the horizontal scroll bar and remove extra spaces on mobile */
  html,
  body {
    overflow-x: clip; /* use clip cuz hidden will make sticky not working */
  }
  body {
    position: relative;
  }

  body {
    font-size: 15px;
    margin: 1vh 8vw;
    max-width: 100%;
    box-sizing: border-box;
  }

  .kuntiniong {
    display: flex;
    justify-content: center;

    background-color: var(--background-color);
    pointer-events: all;
  }

  .tab-list {
    display: flex;
    justify-content: center;
  }

  section {
    scroll-margin-top: 15vh;
  }

  #home {
    margin: 5vh 0; /* relocate home to center of the phone */
  }

  .nav-bar {
    top: 50px;
    position: sticky;
  }

  .course-list {
    grid-template-columns: 1fr; /* one column */
  }

  /* disable the images */
  .project-item {
    display: grid;
    grid-template-columns: 1fr 0;
  }

  .project-image img {
    display: none;
  }
  
  .legend {
    font-size: 2.5vw;
    justify-content: flex-start;
  }
}

/* mobile devices */
@media (hover: none) {
  .kuntiniong a {
    font-weight: 100;
  }

  /* overriding the injected css from home.js */
  .descrip {
    line-height: 1.4 !important;
  }

  .kun-svg {
    height: 130px !important;
    width: 150px !important;
    padding: 30px 30px !important;
    margin: 25px 0 !important;
  
    background-color: var(--svg-background);
    border-radius: 13px !important;
  }

  .project h3 {
    color: var(--text-color);
    text-decoration: underline;
  }

  .project p {
    color: var(--text-color);
  }

  .project span {
    color: var(--secondary-color);
    font-weight: 1000;
  }

  .project em {
    color: var(--primary-color);
    font-weight: 1000;
  }

  .course-list span {
    font-size: 14px;
  }

  .course-item {
    margin-bottom: 1rem;
  }
}