@import url("catppuccin.css");

html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

noscript>div {
  backdrop-filter: blur(6px);
  background-color: rgba(var(--ctp-latte-red-rgb) / 0.4);
  border-radius: 2.5em;
  border: 1px solid rgba(var(--ctp-latte-overlay2-rgb) / 0.3);
  color: var(--ctp-latte-base);
  margin: 1.5em auto 0 auto;
  max-width: 650px;
  padding: 1em;
  font-size: 1.5em;
}

#particle-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ctp-frappe-rosewater) 0%, var(--ctp-frappe-mauve) 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: flyAndFade 1s forwards ease-out;
}

@keyframes flyAndFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--move-x)),
        calc(-50% + var(--move-y))) scale(0);
  }
}

body {
  font-family:
    Rubik,
    Noto Sans Thai Looped,
    sans-serif;
  color: var(--ctp-latte-text);
  background-color: var(--ctp-latte-base);
  overflow: hidden;
  /* cursor: none; */
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -30px;

  background-image: url("/assets/bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translate3d(var(--bg-x, 0px),
      var(--bg-y, 0px),
      0);
  will-change: transform;
}

#root {
  backdrop-filter: blur(6px);
  background-color: rgba(var(--ctp-latte-base-rgb) / 0.4);
  border-radius: 2.5em;
  border: 1px solid rgba(var(--ctp-latte-overlay2-rgb) / 0.3);
  box-shadow: 0 0 12px 7px rgba(var(--ctp-latte-text-rgb) / 0.2);

  margin: 1.5em auto 0 auto;
  max-width: 650px;
  padding: 1.5em;

  transform: translate3d(var(--root-x, 0px),
      var(--root-y, 0px),
      0);
  will-change: transform;
}

section {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: rgba(var(--ctp-latte-mantle-rgb) / 0.7);
  border: 1px solid rgba(var(--ctp-latte-overlay2-rgb) / 0.3);
  border-radius: 1em;
  padding: 0.1em 1em;
  margin: 1em auto;
}

section:last-child {
  margin-bottom: 0;
}

section:hover {
  box-shadow: 0 0 12px 7px rgba(var(--ctp-latte-text-rgb) / 0.2);
}

.background-source {
  position: absolute;
  bottom: 1em;
  right: 1em;
  font-size: 1em;
  color: var(--ctp-latte-overlay0);
}

h2 {
  font-weight: 500;
  font-size: 2em;
  text-align: center;
  text-shadow: 0 0 3px rgba(var(--ctp-latte-text-rgb) / 0.5);
}

.deco {
  font-size: 1em;
  text-align: center;
  color: var(--ctp-latte-subtext0);
}

.name {
  color: var(--ctp-latte-mauve);
  filter: brightness(115%);
  font-weight: 700;
  text-shadow: 0 0 3px rgba(var(--ctp-latte-text-rgb) / 0.5);
}

#language p,
#contact p {
  display: flex;
  gap: 0.6em;
}

a {
  color: var(--ctp-latte-blue);
  text-decoration: none;
}

a:visited {
  color: var(--ctp-latte-blue);
}

a:hover {
  text-decoration: underline;
}

a.icon {
  display: flex;
  align-items: center;
  min-height: 32px;
}

a.icon:hover {
  text-decoration: none;
}

#html {
  color: var(--ctp-latte-peach);
}

#css {
  color: var(--ctp-latte-sapphire);
}

#js {
  color: var(--ctp-latte-yellow);
}

#python {
  width: 2em;
  height: 2em;
}

#python .snake-blue {
  fill: var(--ctp-latte-blue);
}

#python .snake-yellow {
  fill: var(--ctp-latte-yellow);
}

#nix {
  width: 1.7em;
  height: 1.7em;
}

#email {
  color: var(--ctp-latte-rosewater);
}

#discord {
  color: var(--ctp-latte-blue);
}

#instagram {
  color: var(--ctp-latte-pink);
}

#github {
  color: var(--ctp-latte-mauve);
}