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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(/assets/material-symbols-aceec89bee987de94426ee39d582c21a24a50abf4ef94874ec385665f856e3de.woff) format('woff');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

:root {
  --p-color-bg-app: #020617 !important;
  --p-color-text: #f4f4f5 !important;
}

 .scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.auto-hide {
  animation: hide 300ms ease-in-out 3s forwards;
}

@keyframes hide {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

.glam {
  background: linear-gradient(338deg,#bf9001 0%,#ac3825 25%,#930c7d 50%,#5c289f 75%,#206ca4 100%);
}

.frost {
  border: 1px solid rgba(255, 255, 255, .15);  
  background-color: rgba(255, 255, 255, .05);  
  backdrop-filter: blur(5px);
}


body {
  background-size: 100% 100%;
  background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
  background-attachment: fixed;
  background-repeat: repeat;
  background-image:
  radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.3) 0%, rgba(0,0,0,.3) 100%),
  radial-gradient(49% 81% at 12% 31%, #33032145 0%, #000f4a00 100%),
  radial-gradient(113% 91% at 17% -2%, #34114438 2%, #FF000000 99%),
  radial-gradient(120% 80% at 97% 92%, #0C03033B 1%, #54000000 99%),
  radial-gradient(142% 91% at 9% 101%, #050019FF 1%, #270f2924 99%),
  radial-gradient(142% 91% at 111% 84%, #202C3AFF 0%, rgb(11, 11, 39) 100%);

  &::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/noise.png);
    z-index: -1;
    background-size: 150px;
    mix-blend-mode: soft-light;
  }
}

.lined {
  --line-color: rgb(233, 217, 146);
  --bg-color: rgb(254 240 138);
  background: repeating-linear-gradient(
    var(--bg-color), var(--bg-color) 18px,
    var(--line-color) 19px, var(--line-color) 20px
  );
}