@import url("./threeD-box.css");

@import url("https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:wght@100;200;300;400;500;600&display=swap");

@font-face {
  font-family: "Geist";
  src: url("https://pham.codes/d/GeistMonoVF.woff2") format("woff2");
}

:root {
  /* --purple: rgba(128, 0, 128, 0.3);
  --green: rgba(0, 128, 0, 0.2);
  --cyan: rgba(0, 255, 255, 0.4); */
  --purple-2: 121, 40, 202;
  --red: 255, 0, 128;
  /* font-size: 15px; */
  --purple-yellow-grad: linear-gradient(90deg, #8000ff, #ff9533);
  /* #202124 // color, hover */

  --purple-3: #27004a;
  --red-2: #5a0000;
  --dark-blue: #04081f;
  --gray-300: #d1d5db;
  --card-bg: #ffffff;
  --gray-text: rgba(0, 0, 0, 0.5);

  /* --bg-black-900: #d1d5db; */
  --bg-black-900: rgb(241, 245, 241);
  /* --bg-black-900: #f2f2f2; */
  --bg-black-100: #fdf9ff;
  --bg-black-50: #e8dfec;
  --text-black-900: #302e4d;
  --text-black-700: #504e70;

  /* btn */
  --btn-color: #000;
  --btn-bg: #cbcbcb;
  --btn-color-hover: #3f3434;
  --grad-color1: #eeaf61;
  --grad-color2: #fb9062;
  --grad-color3: #ee5d6c;
  --grad-color4: #ce4993;
  --grad-color5: #6a0d83;
}

.dark {
  /* --purple: rgba(128, 0, 128, 0.3);
  --green: rgba(0, 128, 0, 0.2);
  --cyan: rgba(0, 255, 255, 0.4); */
  --purple-2: 121, 40, 202;
  --red: 255, 0, 128;
  /* font-size: 15px; */

  --purple-3: #c1c1c1;
  --red-2: #5a0000;
  --dark-blue: #04081f;
  --card-bg: rgb(255 255 255 / 11%);
  --gray-text: rgba(255, 255, 255, 0.5);

  --bg-black-900: #05000a;
  /* --bg-black-900: #151515; */
  --bg-black-100: #222222;
  --bg-black-50: #393939;
  --text-black-900: #ffffff;
  --text-black-700: #e9e9e9;

  /* btn */
  --btn-bg: #000;
  --btn-color: #cbcbcb;
  --btn-color-hover: #fff;

  --grad-color1: #eeaf61;
  --grad-color2: #fb9062;
  --grad-color3: #ee5d6c;
  --grad-color4: #ce4993;
  --grad-color5: #6a0d83;
}

@media (min-width: 1024px) {
  :root {
    font-size: 1svw;
  }
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  font-family: Poppins, sans-serif;
  background-color: var(--bg-black-900);
  color: var(--text-black-900);
}

* {
  scroll-behavior: smooth;
}

.gradient-btn {
  /* background: var(--btn-bg); */
  color: var(--btn-color);
  font-size: 0.85rem;
  /* border: 0.1rem solid transparent;
  border-image: linear-gradient(
      to right,
      var(--grad-color1),
      var(--grad-color2),
      var(--grad-color3),
      var(--grad-color4),
      var(--grad-color5)
    )
    10 stretch; */
  border-radius: 0.75rem; /* Defines the rounded corners for everything */
  border: 0.25rem solid transparent; /* Essential: creates space for the gradient */

  /* Stacking backgrounds from top (inner) to bottom (border) */
  background: 
    /* Layer 1: The solid background color for the content area */
    linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
    /* Layer 2: The gradient that fills the border space */
    linear-gradient(
        to right,
        var(--grad-color1),
        var(--grad-color2),
        var(--grad-color3),
        var(--grad-color4),
        var(--grad-color5)
      )
      border-box;
  transition: all 0.4s;
  padding: 0.95rem 1.9rem;
  cursor: pointer;
}

.gradient-btn:hover {
  color: var(--btn-color-hover);
  /* border-image: linear-gradient(
      to left,
      var(--grad-color1),
      var(--grad-color2),
      var(--grad-color3),
      var(--grad-color4),
      var(--grad-color5)
    )
    10 stretch; */
  background: 
    /* Layer 1: The solid background color for the content area */
    linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
    /* Layer 2: The gradient that fills the border space */
    linear-gradient(
        to left,
        var(--grad-color1),
        var(--grad-color2),
        var(--grad-color3),
        var(--grad-color4),
        var(--grad-color5)
      )
      border-box;
  transform: scale(1.05);
}

#welcome {
  font-family: "Clicker Script", cursive;
}

/* start breath text animation */
.myName {
  position: relative;
  font-family: Geist;
  font-size: 4rem;
  margin: 0;
  /* background-color: white;
  background-image: linear-gradient(0deg, #111 70%, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  filter: drop-shadow(); */
  /* color: #fff; */

  --wght-min: 32;
  --wght-max: 240;
}

.myName > span {
  animation: breath 1.5s alternate cubic-bezier(0.37, 0, 0.63, 1);
  animation-iteration-count: infinite;
  animation-delay: 1s;
  animation-fill-mode: both;
}

@keyframes breath {
  0% {
    font-variation-settings: "wght" var(--wght-min);
  }
  100% {
    font-variation-settings: "wght" var(--wght-max);
  }
}

.myName::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 0.3rem solid var(--skin-color);
  border-left: 0.3rem solid var(--skin-color);
}
.myName::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  width: 1.2rem;
  height: 1.2rem;
  border-bottom: 0.3rem solid var(--skin-color);
  border-right: 0.3rem solid var(--skin-color);
}
/* end breath text animation */

/* start outline text animation */
.text_outline {
  width: 100%;
  height: 6rem;
  display: flex;
  justify-content: center;
}

.text_outline .text {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 5px;
}

.text_outline .outline {
  fill: none;
  /* stroke: #ffffc0; */
  stroke: var(--skin-color);
  stroke-width: 1.5px;
  stroke-dasharray: 100%;
  animation: outline_text 3.5s ease-in 5;
  animation-fill-mode: forwards;
}

@keyframes outline_text {
  from {
    stroke-dashoffset: 100%;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* end outline text animation */

/* start marquee */

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-4rem * 7));
  }
}

.marquee {
  display: grid;
  align-items: center;
  background: var(--bg-black-100);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 5rem;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 55rem;
  max-width: 100%;
}
.marquee-track {
  animation: marquee-scroll 20s linear infinite;
  display: flex;
  gap: 3rem;
  width: calc(4rem * 20);
  max-width: 100%;
}

/* .slide {
  height: 100px;
  width: 250px;
} */
/* end marquee */

section {
  padding: 4rem 0;
}
.header-title {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 3rem;
}
.header-title span {
  position: relative;
}

.header-title span::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: -1.5rem;
  width: 60%;
  /* height: 1.2rem; */
  border-top: 0.4rem solid var(--skin-color);
  /* border-left: 0.4rem solid var(--skin-color); */
}
.header-title span::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  right: -1.5rem;
  width: 60%;
  /* height: 1.2rem; */
  border-bottom: 0.4rem solid var(--skin-color);
  /* border-right: 0.4rem solid var(--skin-color); */
}

@media (max-width: 768px) {
  .myName {
    font-size: 1.8rem;
  }

  .header-title {
    font-size: 2.3rem;
    margin-bottom: 2rem;
  }

  .aboutMe-hero-wrapper {
    display: none;
  }
}