@font-face {
  font-family: 'pixel';
  src: url('./assets/fonts/PixelifySans-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'pixel';
  src: url('./assets/fonts/PixelifySans-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'fingerpaint';
  src: url('./assets/fonts/FingerPaint-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FTLC';
  src: url('./assets/fonts/FTLC.ttf');
  font-weight: normal;
  font-style: normal;
}

@layer base {
  body {
    background-color: #ECF2E7;
    color: #3F4F26;
  }

  body.project {
    background-color: #FFE1E7;
    color: #722F3F;
  }

  body.adventure {
    background-color: #F9E4B7;
    color: #654F20;
  }

  body.design {
    background-color: #deedff;
    color: #1e62af;
  }

  body.things-i-love {
    background-color: #e7dbf2;
    color: #472c5a;
  }

  body.notfound {
    background-color: #F7F7F7;
    color: #686868;
  }
}

@layer components {

  .card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
  }

  .card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }

  .modules {
    position: relative;
    min-height: fit-content;
  }

  .modules a {
    transform: translate(var(--x), var(--y)) scale(0.75);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .modules a[href="/project"] {
    --x: -10%;
    --y: 10%;
  }

  .modules a[href="/adventure"] {
    --x: 20%;
    --y: -40%;
  }

  .modules a[href="/design"] {
    --x: -20%;
    --y: -40%;
  }

  .modules a[href="/things-i-love"] {
    --x: -100%;
    --y: 20%;
  }

  .modules a[href="https://blog.aeriszhu.com/"] {
    --x: -40%;
    --y: 20%;
  }

  .modules a[href="https://memo.aeriszhu.com/"] {
    --x: -30%;
    --y: -80%;
  }

  .modules.visible a {
    transform: translate(0, 0) scale(1);
  }
}

@layer utilities {

  a.u {
    text-decoration-line: underline !important;
    text-decoration-style:dotted !important;
    text-underline-offset: 2px !important;
  }

  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  @keyframes svg-text-anim {
    40% {
      stroke-dashoffset: 0;
      fill: transparent;
    }

    60% {
      stroke-dashoffset: 0;
      fill: #8e6e29;
    }

    100% {
      stroke-dashoffset: 0;
      fill: #654F20;
    }

  }
}