/* Custom Proprties */
:root {
  /* primary color*/
  --blue-light: #8fb2f5;

  /* secondary colors*/
  --gray-900: #13131a;
  --gray-800: #16161f;
  --gray-700: #1c1c27;
  --gray-600: #22222f;
  --gray-500: #3b3b54;
  --gray-400: #7f7f98;
  --gray-300: #ababc4;
  --gray-200: #bfbfd4;
  --gray-100: #fafafa;
  --white: #ffffff;

  /* Typography */
  --ff-nunito-sans: "Nunito", sans-serif;

  /* font size */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;

  /* font weaight */
  --fw-regular: 400;
  --fw-semibold: 600;

  /* Box-shadow */
  --shadow-1: 0 1px 3px hsla(0%, 0%, 0%. 0.5);
  --shadow-2: 0 3px 6px hsla(0%, 0%, 0%. 0.4);

  /* Transition */
  --transition-short: 100ms ease;
}

/* reset */
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}
body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

hmtl {
  font-family: var(--ff-nunito-sans);
  font-size: 10px;
  scroll-behavior: smooth;
}
body {
  background-image: url("../image/bg/Background.png");
  padding: 1rem;
  font-family: var(--ff-nunito-sans);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.loading {
  width: 30px;
}
.hidden {
  display: none;
}
.hide {
  opacity: 0;
}
/* For Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
  display: none;
}

/* For Firefox */
html {
  scrollbar-width: none;
}

/* For Edge & IE */
body {
  -ms-overflow-style: none;
}
#searchButton {
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ion-icon {
  color: var(--gray-200);
  font-size: 24px;
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 5px;
}

@keyframes loading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Apply skeleton styles to text and image placeholders */
.skeleton-text {
  width: 200px;
  height: 20px;
  margin: 10px 0;
}

.skeleton-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}