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

@layer utilities {
  .text-outline {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    color: transparent;
  }

  .glass-nav {
    background: rgba(9, 9, 11, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
}

body {
  /* background-color: #09090b; */
  /* color: #ffffff; */
}

/* Custom Selection for that 2026 feel */
::selection {
  background-color: #ccff00;
  color: #000000;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #09090b;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ccff00;
}

.textShadow {
  text-shadow: -3px 3px 0 blue;
}

/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}