@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  scroll-behavior: smooth;
}

body {
  background: #010103;
  font-family: "Oxanium", sans-serif;
}

p {
  @media (max-width: 480px) {
    font-size: 1rem;
  }
}

button {
  @media (max-width: 480px) {
    font-size: 1rem;
  }
}

@layer utilities {
  #home {
    min-height: 800px;
    max-width: 1200px;
    @media (max-width: 1200px) {
      min-height: 700px;
    }
    @media (max-width: 640px) {
      min-height: 500px;
    }
    @media (max-width: 480px) {
      min-height: 500px;
    }
  }

  .header {
    background-size: cover;
    background-color: #0000002b;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-position: 100% 30%;
    border-radius: 15px;
    width: 93%;
    min-height: 800px;

    @media (max-width: 1200px) {
      min-height: 700px;
    }
    @media (max-width: 1024px) {
      background-position: 50% -30%;
      width: 100%;
    }
    @media (max-width: 767px) {
      background-position: 50% 50%;
      background-size: 120%;
    }
    @media (max-width: 640px) {
      background-position: 50% -15%;
      min-height: 500px;
    }
    @media (max-width: 480px) {
      background-position: 50% 50%;
      min-height: 500px;
    }
  }
  .header.visible {
    background-image: url("/assets/header/space-console-sci-fi.png");
  }
  .header.hidden {
    background-image: none;
  }

  .c-space {
    @apply px-3 sm:px-10;
  }

  .head-text {
    @apply text-2xl sm:text-4xl font-semibold text-gray_gradient;
  }

  .nav-ul {
    @apply flex flex-col items-center gap-4 sm:flex-row md:gap-6 relative z-20;
  }

  .nav-li {
    @apply text-neutral-400 hover:text-white font-generalsans max-sm:hover:bg-black-500 max-sm:w-full max-sm:rounded-md py-2 max-sm:px-5;
  }

  .nav-li_a {
    @apply text-lg md:text-base hover:text-white transition-colors;
  }

  .nav-sidebar {
    @apply absolute left-0 right-0 bg-black-200 backdrop-blur-sm transition-all duration-300 ease-in-out overflow-hidden z-20 mx-auto sm:hidden block;
  }

  .text-gray_gradient {
    @apply bg-gradient-to-r from-[#BEC1CF] from-60% via-[#D5D8EA] via-60% to-[#D5D8EA] to-100% bg-clip-text text-transparent;
  }

  /* button component */
  .btn {
    @apply flex gap-4 items-center justify-center cursor-pointer p-3 rounded-md bg-black-300  transition-all active:scale-95 text-white mx-auto;

    @media (max-width: 480px) {
      font-size: 1rem;
    }
  }
  .hero-btn {
    z-index: 10;

    @media (max-width: 480px) {
      margin-top: -1.5rem;
      font-size: 0.8rem;
    }
  }

  .button-container {
    @media (max-width: 640px) {
      width: 220px;
    }
  }

  .btn-ping {
    @apply animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75;
  }

  .btn-ping_dot {
    @apply relative inline-flex rounded-full h-3 w-3 bg-amber-500;
  }

  .buttons {
    position: relative;
    margin-right: 2.5rem;
    z-index: 99;

    @media (max-width: 767px) {
      margin-right: 0;
      margin-top: 0.75rem;
    }
  }
  .play-btn {
    transition: background-color 0.3s;
  }

  .stop-btn {
    transition: background-color 0.3s;
  }

  .hover-light {
    transition: filter 0.3s ease;
  }

  .hover-light:hover {
    filter: brightness(2);
  }

  .button-effect {
    transition: transform 0.2s ease, filter 0.3s ease;
  }

  .button-effect:active {
    transform: scale(0.9);
    filter: brightness(1);
  }

  /* hero section */
  .hero-container {
    margin-top: 1rem;
    background: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 1) 40%,
      rgba(0, 0, 0, 0.5) 70%,
      rgba(0, 0, 0, 0.2) 80%,
      rgba(0, 0, 0, 0) 100%
    );
    width: 100%;
    height: 50%;
  }
  .hero-image {
    display: block;
  }
  .hero-image.hidden {
    display: none;
  }

  .hi-tag {
    @apply text-base sm:text-lg md:text-2xl lg:text-xl font-medium text-white text-center font-generalsans;
  }

  .typing-effect {
    min-height: 40px;
  }

  .hero_tag {
    @apply text-center text-2xl sm:text-3xl md:text-4xl  xl:text-6xl font-generalsans font-black !leading-normal;
  }

  .matrix-arrow-container {
    margin-top: 10rem;
    margin-left: 20.5rem;
    z-index: 0;

    @media (max-width: 1024px) {
      margin-left: 15.5rem;
    }
    @media (max-width: 640px) {
      margin-top: 5rem;
      margin-left: 10.5rem;
    }
  }

  .matrix-arrow-text {
    margin-left: 6.25rem;

    @media (max-width: 640px) {
      top: 1rem;
    }
    @media (max-width: 480px) {
      top: 1.5rem;
      font-size: 0.6rem;
      margin-left: 4.5rem;
    }
  }

  .styled-range {
    -webkit-appearance: none;
    height: 6px;
    border-radius: 5px;
    background: linear-gradient(90deg, #ff6f61, #ffca3a);
    outline: none;
  }

  .styled-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f5deb3;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  }

  .styled-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f5deb3;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  }

  .styled-range::-webkit-slider-runnable-track {
    width: 330px;
    height: 6px;
    background: linear-gradient(90deg, #ff6f61, #ffca3a);
    border-radius: 5px;
  }

  .styled-range::-moz-range-track {
    height: 6px;
    background: linear-gradient(90deg, #ff6f61, #ffca3a);
    border-radius: 5px;
  }

  .color-set-select {
    appearance: none;
    border: 1px solid #ccc;
    color: white;
  }

  .color-set-select option {
    background-color: rgba(0, 0, 0, 0.9);
  }

  .color-set-select:focus {
    outline: none;
    border-color: grey;
  }

  .controls {
    background-position: 100% -180%;
    width: 500px;
    height: 500px;
    margin-top: -2rem;

    @media (max-width: 1200px) {
      background-position: 50% 50%;
      width: 480px;
      height: 480px;
    }
    @media (max-width: 640px) {
      width: 450px;
      height: 450px;
    }
    @media (max-width: 480px) {
      width: 300px;
      height: 300px;
      margin-top: -0.75rem;
    }
  }

  .matrix-controls {
    max-width: 340px;
    padding: 15px;
    border-radius: 5px;
    background-color: rgba(19, 19, 19, 0.5);
    box-shadow: 1px 1px 2px rgba(126, 126, 126, 0.35);
    border: 1px solid #ccc;
    color: #f5deb3;
    font-size: 14px;
  }

  .controls-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 102px;
    right: 82px;
    border-radius: 5px;
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.1);

    @media (max-width: 1200px) {
      top: 98px;
      right: 75px;
    }
    @media (max-width: 640px) {
      top: 90px;
      right: 55px;
    }
    @media (max-width: 480px) {
      position: relative;
      top: 65px;
      right: 0;
    }
  }

  @media (max-width: 480px) {
    .typing-effect {
      min-height: 25px;
    }

    .hero_tag {
      @apply text-base;
    }
  }

  /* about section */
  .grid-container {
    @apply w-full h-full border border-black-300 bg-black-200 rounded-lg sm:p-7 p-6 flex flex-col gap-5;
  }

  .grid-headtext {
    @apply text-xl font-semibold mb-4 text-white font-generalsans;
  }

  .grid-subtext {
    @apply text-[#afb0b6] text-base font-generalsans;
  }

  .copy-container {
    @apply cursor-pointer flex justify-center items-center gap-2;
  }

  .grid-container {
    position: relative;
  }

  .about-highlight {
    padding: 0 5px;
    margin-right: 3px;
    border-bottom: 3px solid #1d4154;
    display: inline-block;
    background: linear-gradient(
      to bottom,
      transparent 60%,
      rgba(236, 184, 0, 0.5) 40%
    );
    background: linear-gradient(
      to bottom,
      transparent 20%,
      rgba(195 123, 2) 140%
    );
    transform: skew(-10deg);
  }

  .tech-grid {
    background-color: #1c1c21;
    border-radius: 8px;
    padding: 35px;
    margin-top: 2rem;

    @media (max-width: 480px) {
      padding: 20px;
    }
  }

  .tech-section {
    color: #afb0b6;
    border-radius: 8px;
  }

  .tech-section-title {
    font-weight: bold;
    color: #f0f2f9;
    margin-bottom: 5px;
  }

  .tech-list {
    list-style-type: disc;
    padding-left: 20px;

    @media (max-width: 480px) {
      font-size: 0.9rem;
    }
  }

  #tech-section {
    display: flex;
    flex-direction: column;
  }

  /* projects section  */
  .arrow-btn {
    @apply w-10 h-10 p-3 cursor-pointer active:scale-95 transition-all rounded-full arrow-gradient;
  }

  .tech-logo {
    @apply w-10 h-10 rounded-md p-2 bg-neutral-100 bg-opacity-10 backdrop-filter backdrop-blur-lg flex justify-center items-center;
  }

  /* skills section */
  .skills-container {
    @apply grid md:grid-cols-2 grid-cols-1 gap-5 mt-12;
  }

  .skills-desc {
    @apply rounded-lg md:p-10 p-5 col-span-1 bg-black-300 bg-opacity-50;
  }

  .skills-content {
    @apply flex lg:flex-row flex-col justify-between lg:items-center items-start gap-5 mt-7;
  }

  /*  my approach section */
  .my-approach-container {
    @apply grid lg:grid-cols-3 grid-cols-1 gap-5 mt-12;

    @media (max-width: 1024px) {
      display: flex;
      gap: 1rem;
      justify-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }

  .my-approach-canvas {
    @apply col-span-1 rounded-lg bg-black-200 border border-black-300;
  }

  .my-approach-content {
    @apply col-span-2 rounded-lg bg-black-200 border border-black-300;
  }

  .my-approach-content_container {
    @apply grid grid-cols-[auto_1fr] items-start gap-5  transition-all ease-in-out duration-500 cursor-pointer hover:bg-black-300 rounded-lg sm:px-5 px-2.5;

    @media (max-width: 480px) {
      gap: 0.5rem;
      padding-inline: 0;
      pointer-events: none;
    }
  }

  .my-approach-content_logo {
    @apply rounded-3xl w-16 h-16 p-2 bg-black-600;

    @media (max-width: 480px) {
      height: 2.5rem;
      width: 2.5rem;
    }
  }

  .my-approach-content_bar {
    @apply flex-1 w-0.5 mt-4 h-full bg-black-300 group-hover:bg-black-500;
  }

  @media (max-width: 1024px) {
    .canvas-full-height {
      height: 200px;
    }
  }
  .reload-button {
    transition: background-color 0.3s ease;
  }

  .webgl-error-container {
    text-align: center;
    padding: 2rem;
    background-color: #1a1a1a;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }

  .webgl-error-container h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .webgl-error-container p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .refresh-button {
    padding: 0.5rem 1rem;
    background-color: rgb(28, 28, 33);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
  }

  .refresh-button:hover {
    background-color: #3a3a42;
  }

  /* contact section */
  .contact-bg {
    border-radius: 10px;
    background-color: #0e0e10;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .contact-container {
    @apply max-w-xl relative z-10 sm:px-10 px-5;
  }

  .field-label {
    @apply text-base sm:text-lg text-white-600;
  }

  .field-input {
    @apply w-full bg-black-300 px-5 py-2 min-h-14 rounded-lg placeholder:text-white-500 text-base sm:text-lg text-white-800 shadow-black-200 shadow-2xl focus:outline-none;
  }

  .field-btn {
    @apply px-5 py-2 min-h-12 rounded-lg shadow-black-200 shadow-2xl flex justify-center items-center text-base sm:text-lg text-white gap-3;
    background-color: rgb(54, 54, 64);
  }

  .field-btn-arrow {
    @apply w-6 h-6 object-contain;
  }

  /*  footer */
  .social-icon {
    @apply w-12 h-12  flex justify-center items-center;
  }
}

.arrow-gradient {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1) 10%,
    rgba(255, 255, 255, 0.000025) 50%,
    rgba(255, 255, 255, 0.000025) 50%,
    rgba(255, 255, 255, 0.025) 100%
  );
}