* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* FONTS */
/* bai jamjuree */
@font-face {
  font-family: "Bai Jamjuree";
  src: url("/assets/fonts/Bai_Jamjuree/BaiJamjuree-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bai Jamjuree";
  src: url("/assets/fonts/Bai_Jamjuree/BaiJamjuree-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bai Jamjuree";
  src: url("/assets/fonts/Bai_Jamjuree/BaiJamjuree-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bai Jamjuree";
  src: url("/assets/fonts/Bai_Jamjuree/BaiJamjuree-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bodoni Moda */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/Bodoni_Moda/BodoniModa-VariableFont_opsz\,wght.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Instrument Sans */
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/Instrument_Sans/InstrumentSans-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/Instrument_Sans/InstrumentSans-VariableFont_wdth\,wght.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Instrument Serif */
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/Instrument_Serif/InstrumentSerif-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Lobster Sans */
@font-face {
  font-family: "Lobster";
  src: url("/assets/fonts/Lobster/Lobster-Regular.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body {
  margin: 0 auto;
  overflow-x: hidden;
  background-color: #4e512d;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url(../images/noisybg1.webp);
  background-repeat: repeat;
  background-size: cover;

  opacity: 0.4;
  mix-blend-mode: overlay;
}
:root {
  --card-bg: #2b2622;
  --primary-color: white;
  --stack-card-bg: rgba(255, 255, 255, 0.407);
  --heading-color: #ffeddb;
  --sub-color: #f6f2c2;
  --black-color: black;
  --link-hover: #393920;

  --reserved-height: auto;
  --stack-gap: 12px;
  --stack-step: calc(100% + var(--stack-gap));

  /* 1400 - 1025 */
  --fontsize-30: clamp(1.5625rem, 0.7083rem + 1.3333vw, 1.875rem); /* 30-25*/
  --fontsize-35: clamp(1.5625rem, -0.1458rem + 2.6667vw, 2.1875rem); /*35-25*/
  --fontsize-24: clamp(1.25rem, 0.5667rem + 1.0667vw, 1.5rem); /*24-20*/
  --fontsize-18: clamp(1rem, 0.6583rem + 0.5333vw, 1.125rem); /*18-16*/
  --fontsize-16: clamp(0.875rem, 0.5333rem + 0.5333vw, 1rem); /*16-14*/
  --fontsize-span: 1vw;
}
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  will-change: transform;
}
.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}
.header-left {
  padding-top: 0.7rem;
}

.logo {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: var(--fontsize-30);
  color: var(--heading-color);
  letter-spacing: -5px;
  opacity: 0.5;
  align-self: flex-end;
}
.logo img {
  width: 3vw;
}
.header-center {
  padding: 1.5%;
  margin-right: -10vw;

  opacity: 0.7;
  text-align: center;
}
.header-center p {
  font-size: var(--fontsize-16);
  font-family: "Instrument Serif";
  font-weight: 400;
  color: var(--primary-color);
}
.header-right {
  padding-top: 1.6rem;
  text-align: end;
}

.hover-link {
  cursor: pointer;
  background-color: var(--primary-color);
  font-size: var(--fontsize-16);
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--black-color);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.1s ease-in;
  display: inline-block;
  text-transform: uppercase;
  width: fit-content;
}

.hover-link span {
  padding: 0.8rem;
  display: block;
  transition: transform 0.4s ease;
}

.hover-link span:nth-child(1) {
  transform: translateY(0%); /* default position */
}

.hover-link span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%); /* hidden below */
}

.hover-link:hover span:nth-child(1) {
  transform: translateY(-100%); /* slide up and disappear */
}

.hover-link:hover span:nth-child(2) {
  transform: translateY(0%); /* new text slides up */
}

.header-right a:hover {
  background-color: var(--link-hover);
  color: var(--primary-color);
  border: 0.5px solid var(--primary-color);
}
.header-right a:focus {
  background-color: var(--link-hover);
  color: var(--primary-color);
  border: 0.5px solid var(--primary-color);
}
.status {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 2rem;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--primary-color);
  gap: 0.3rem;
}

.status span {
  font-size: 30px;
  color: rgb(92, 255, 92);
}

.hero-brow {
  width: 100%;
  padding: 0;
  color: var(--primary-color);
  display: flex;
}
.tag-vertical {
  display: none;
  padding: 1rem;
  writing-mode: vertical-rl;
  color: var(--primary-color);
  opacity: 0.7;
  font-size: var(--fontsize-span);
  font-family: "Instrument Serif";
  font-weight: 400;
  transform: rotate(180deg);
}

.welcome {
  padding: 0 1rem;
  font-family: "Instrument Sans", sans-serif;
  opacity: 0.5;
  font-weight: 800;
  font-size: 14px;
}
.page-bottom {
  margin-top: auto;
}
.canvas {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 1rem;
  height: 76vh;
}
.hero {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: end;
  width: 50%;
}
.hero h1 {
  font-size: var(--fontsize-35);
  text-transform: uppercase;
  color: var(--primary-color);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 400;
  max-width: 40vw;
  text-align: justify;
  opacity: 0.9;
  line-height: 115%;
  margin-top: 0.5rem;
  letter-spacing: -2px;
}

.stack-support p {
  font-size: 14px;
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 500;
  color: var(--primary-color);
  opacity: 0.5;
  letter-spacing: -0.5px;
}

.alert-box {
  max-width: 40vw;
}
.alert-box p {
  font-size: var(--fontsize-18);
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--heading-color);
  text-align: justify;
  line-height: 21px;

  opacity: 0.8;
  letter-spacing: -1px;
}

/* ASIDE BLOCK */
.side-nav {
  display: flex;
  flex-direction: column;
  align-items: end;
  width: 50%;
}
.about-link {
  text-decoration: none;
  background-color: var(--primary-color);
  width: 15vw;
  color: var(--black-color);
  padding: 2%;
  transition: all 0.2s ease-in-out;
}
.about-link .about-link-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 400;
  letter-spacing: -1px;
  font-size: var(--fontsize-20);
}
.about-link-head img {
  width: 1.4vw;
}
.about-link span {
  font-size: var(--fontsize-span);
  color: #8e8d6e;
  opacity: 0.7;
  font-family: "Instrument Serif";
  font-weight: 400;
}
.about-arrow-light {
  display: none;
}
.about-link:hover {
  background-color: var(--link-hover);
  color: var(--primary-color);
  border: 0.5px solid var(--primary-color);
}
.about-link:focus {
  background-color: var(--link-hover);
  color: var(--primary-color);
  border: 0.5px solid var(--primary-color);
}
.about-link:hover .about-arrow {
  display: none;
}
.about-link:hover .about-arrow-light {
  display: block;
}
.content-list {
  width: 100%;
  margin-top: rem;
}
.project-title {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
}
.project-title p {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--heading-color);
  font-size: var(--fontsize-20);
  opacity: 0.7;
}
.project-title span {
  font-size: var(--fontsize-span);
  color: var(--primary-color);
  opacity: 0.7;
  font-family: "Instrument Serif";
  font-weight: 400;
}
.project {
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--primary-color);
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.464);
  border-top: 1px solid rgba(255, 255, 255, 0.464);
  padding: 0.5rem;
  transition: all 0.3s ease-in-out;
}

.project h2 {
  font-size: var(--fontsize-20);
  text-decoration: none;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
}
.project p {
  font-size: 0.8vw;
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 500;
}
.project span {
  font-size: var(--fontsize-span);
  opacity: 0.7;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 400;
  letter-spacing: -1px;
}
.hover-arrow {
  display: none;
}
.project:hover {
  background-color: var(--primary-color);
  padding: 0.5rem 1rem;
  color: var(--black-color);
}
.project:hover .hover-arrow {
  display: block;
}
.project:hover .hover-arrow-light {
  display: none;
}
footer {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1rem;
}
.footer-logo {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
}
footer p {
  font-size: 14px;
  color: var(--primary-color);
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 500;
  opacity: 0.8;
}
footer .social-links {
  display: flex;
  align-items: center;
}
footer a {
  text-decoration: none;
  font-size: 14px;
  color: var(--heading-color);
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 500;
  opacity: 0.8;
}
.social-links {
  position: relative;
  transition: 0.3s all ease-in-out;
}
.social-links::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--primary-color);
  transition: width 0.6s ease;
}
.social-links:hover::after {
  width: 100%;
}
.social-links img {
  width: 1.5vw;
}
.social-links span {
  display: none;
}
.social-links h4 {
  font-weight: 400;
}

/* 1024px */
@media (max-width: 1024px) {
  :root {
    /* 1024 - 769 */
    --fontsize-30: clamp(1.25rem, 0.3076rem + 1.9608vw, 1.5625rem); /* 25-20*/
    --fontsize-35: clamp(1.25rem, 0.3076rem + 1.9608vw, 1.5625rem); /*25-20*/
    --fontsize-24: clamp(1.125rem, 0.748rem + 0.7843vw, 1.25rem); /*20-18*/
    --fontsize-span: 1.3vw;
    --fontsize-16: clamp(0.75rem, 0.373rem + 0.7843vw, 0.875rem); /*14-12*/
    --fontsize-18: clamp(1rem, 0.6583rem + 0.5333vw, 1.125rem); /*18-16*/
  }
  .status {
    font-size: 12px;
  }
  .welcome {
    font-size: 12px;
  }

  .hero h1 {
    max-width: 40vw;
    letter-spacing: -1px;
  }

  .about-link-head img {
    width: 2vw;
  }

  .header-center {
    padding: 2.5%;
    margin-right: -14vw;
  }
  .header-center p {
    font-size: var(--fontsize-16);
  }
  .about-link {
    width: 20vw;
  }
}
@media (max-width: 768px) {
  :root {
    /* 768 - 577 */
    --fontsize-30: clamp(1.25rem, 0.306rem + 2.6178vw, 1.5625rem); /* 25-20*/
    --fontsize-18: clamp(0.75rem, -0.0052rem + 2.0942vw, 1rem); /*16-12*/
    --fontsize-16: clamp(0.75rem, 0.3724rem + 1.0471vw, 0.875rem); /*14-12*/
    --fontsize-20: clamp(0.875rem, 0.1198rem + 2.0942vw, 1.125rem); /* 18-14 */
    --fontsize-span: 1.7vw;
  }
  .header-center {
    display: none;
  }
  .hero-brow {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
  }
  .tag-vertical {
    display: block;
  }
  .canvas {
    margin-top: 1rem;
    height: auto;
  }
  .stack-support p {
    font-size: 11px;
  }

  .about-link {
    width: 27vw;
  }
  .about-link-head img {
    width: 2.2vw;
  }
  .project img {
    width: 3vw;
  }
  .social-links img {
    width: 2.2vw;
  }
  footer a {
    text-decoration: none;
    font-size: 12px;
  }
  footer p {
    font-size: 12px;
  }
}
@media (max-width: 576px) {
  :root {
    --fontsize-span: 2vw;
  }
  .canvas {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: start;
    justify-content: center;
    padding: 0 1rem;
    height: auto;
    gap: 2rem;
  }
  .hero {
    width: 100%;
    gap: 1rem;
  }
  .hero h1 {
    max-width: 100%;
  }
  .alert-box {
    max-width: 100%;
  }
  .alert-box p {
    font-size: var(--fontsize-20);
    letter-spacing: -0.5px;
  }
  .about-link {
    width: 32vw;
  }
  .about-link-head img {
    width: 2.5vw;
  }
  /* ASIDE BLOCK */
  .side-nav {
    width: 100%;
    margin-top: 1rem;
  }
  .content-list {
    margin-top: 2rem;
  }
  .social-links span {
    display: block;
  }
  .social-links h4 {
    display: none;
  }
  .social-links img {
    width: 3.5vw;
  }
}
@media (max-width: 450px) {
  :root {
    --fontsize-span: 2.5vw;
  }
  .about-link-head img {
    width: 2.9vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}