/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@13.5.7_@opentelemetry+api@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.80.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[7].use[2]!./node_modules/.pnpm/next@13.5.7_@opentelemetry+api@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.80.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[7].use[3]!./app/components/particle.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.particle_canvasContainer__tYfsz {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none; /* Makes sure the container doesn’t interfere with other interactions */
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@13.5.7_@opentelemetry+api@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.80.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/.pnpm/next@13.5.7_@opentelemetry+api@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.80.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./node_modules/.pnpm/nprogress@0.2.0/node_modules/nprogress/nprogress.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}
#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}
#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;
  animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@13.5.7_@opentelemetry+api@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.80.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/.pnpm/next@13.5.7_@opentelemetry+api@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.80.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./app/portofolio/styles.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
  .container {
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
  }
      @keyframes titleAnimation {
        0% { opacity: 0; transform: scale(0.9); }
        100% { opacity: 1; transform: scale(1); }
      }
      .animate-title {
        animation: titleAnimation 0.5s ease-out forwards; /* 0.5s for a faster animation */
      }
      @keyframes fadeIn {
              0% {
                  opacity: 0;
                  transform: translateY(20px);
              }
              100% {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
      @keyframes fadeOut {
              0% {
                  opacity: 1;
                  transform: translateY(0);
              }
              100% {
                  opacity: 0;
                  transform: translateY(20px);
              }
          }
      .animate-fadeIn {
              animation: fadeIn 0.5s ease-out forwards;
          }
      .animate-fadeOut {
              animation: fadeOut 0.5s ease-out forwards;
          }
      .title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 20px;
  }
      .subtitle {
      margin-top: 40px;
      font-size: 1.8rem;
      text-align: left;
  }
      .col-title {
    grid-column: 2 / span 2; /* This will make the <h1> and <h2> use the 2nd and 3rd columns */
    }
      @media (max-width: 640px) {
        .col-title {
            grid-column: 1 / -1; /* Makes it span the entire row on smaller screens */
            text-align: center; /* Centers text on smaller screens */
        }
    }
      .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 15px;
      justify-content: center;
      border: none;      
      outline: none;  
      box-shadow: none;
  }
      .iframe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    gap: 16px; /* Space between items */
}
      .aspect-ratio-container {
    position: relative; /* Required for absolute positioning of the iframe */
    width: 100%; /* Full width of the grid column */
    padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 * 100) */
    overflow: hidden; /* Ensures any overflow content is hidden */
}
      .grid-item {
    grid-column: 3; /* Make this item span the third column */
}
      .video-embed {
    position: absolute; /* Absolutely position the iframe */
    top: 0;
    left: 0;
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    border-radius: 15px; /* Optional: Rounded corners */
}
      /* styles/globals.css */
      #nprogress {
    pointer-events: none;
  }
      #nprogress .bar {
    background: #4a90e2; /* Change to your preferred color */
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Adjust height as needed */
  }
      #nprogress .peg {
    display: block;
    position: absolute;
    right: 0;
    width: 100px; /* Adjust width as needed */
    height: 100%;
    box-shadow: 0 0 10px #4a90e2, 0 0 5px #4a90e2; /* Adjust shadow as needed */
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
      .landscape-grid .landscape {
      grid-column: span 3;
      max-width: 100%;
  }
      @media (max-width: 768px) {
      .landscape-grid .landscape {
          grid-column: span 3;
          max-width: 100%;
      }
  }
      .media-card {
      overflow: hidden;
      border-radius: 2%;
      scroll-snap-align: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      position: relative;
      border: none;         /* Removes any border on grid items */
      outline: none;        /* Removes any outline on grid items */
      box-shadow: none;     /* Removes any box-shadow that might resemble a border */
  }
      .profile {
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      position: relative;
  }
      .profile2 {
    grid-column: 1; /* This keeps the image in the first column */
}
      .col-video {
    grid-column: span 1; /* This keeps the video in the 2nd and 3rd columns */
    margin-top: 20px; /* Optional: Add some spacing above the video */
}
      .aspect-ratio-box {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 2%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
      .aspect-ratio-box.landscape {
      padding-top: 56.25%;
  }
      .aspect-ratio-box.profile {
      padding-top: 50.25%;
  }
      .aspect-ratio-box.proj {
    padding-top: 100%;
}
      .aspect-ratio-box.vertical {
      padding-top: 177.78%;
  }
      .media-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
  }
      .media-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      transform: scale(1.05)
  }
      .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.4);
      padding: 10px;
      border-radius: 10%; 
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
  }
      .media-video.playing {
      transform: scale(1);
  }
      .video-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 25px; /* Added bottom margin here */
      height: 100%;
  }