@font-face {
  font-family: 'poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'poppins-bold';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'poppins-semibold';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'poppins-italic';
  src: url('../fonts/Poppins-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'poppins-light';
  src: url('../fonts/Poppins-Light.ttf') format('truetype');
}

:root {
  --transparent: transparent;
  --title-color: #f3f3f3;
  --background-darken: #0000003f;
  --background-darken-hover: #00000059;
}

html[data-theme="light"] {
  --background: #f3f3f3;
  --background-lighter: #f6f6f6;
  --background-invert: #2f2f2f;
  --box-shadow: rgb(122 122 122 / 6%) 0 0 0 0.1rem, rgb(66 66 66 / 5%) 0 0.1rem 0.1rem -0.05rem, rgb(65 65 65 / 13%) 0 0.2rem 0.2rem -0.1rem, rgb(72 72 72 / 10%) 0 0.3rem 0.3rem -0.15rem, rgb(42 51 70 / 3%) 0 0.5rem 0.5rem -0.25rem, rgb(63 63 63 / 3%) 0 1rem 1rem -0.5rem, rgb(58 58 58 / 3%) 0 2.4rem 2.4rem -0.8rem;
  --text: #101010;
  --text-invert: #f3f3f3;
  --secondary-text: #808080;
  --accent: #d2ff00;
  --accent-hover: #bae500;
  --accent-clicked: #d1ff15;
  --accent-transparent: #D2FF0080;
  --bg-image: url('../images/bg-light.jpg');
}

html[data-theme="dark"] {
  --background: #101010;
  --background-lighter: #262626;
  --background-invert: #d3d3d3;
  --box-shadow: rgb(80 80 80 / 20%) 0 0 0 0.1rem, rgb(183 183 183 / 3%) 0 0.1rem 0.1rem -0.05rem, rgb(194 194 194 / 8%) 0 0.2rem 0.2rem -0.1rem, rgb(183 183 183 / 4%) 0 0.3rem 0.3rem -0.15rem, rgb(183 183 183 / 5%) 0 0.5rem 0.5rem -0.25rem, rgb(214 214 214 / 13%) 0 1rem 1rem -0.5rem, rgb(255 255 255 / 3%) 0 2.4rem 2.4rem -0.8rem;
  --text: #f3f3f3;
  --text-invert: #101010;
  --secondary-text: #a1a1a1;
  --accent: #ff6200;
  --accent-hover: #e55a00;
  --accent-clicked: #ff6a0b;
  --accent-transparent: #ff620080;
  --bg-image: url('../images/bg-dark.jpg');
}

@keyframes accent-ping {
  0% {
    box-shadow: 0 0 0 0 var(--accent-transparent);
  }
  65% {
    box-shadow: 0 0 0 0 var(--accent-transparent);
  }
  70% {
    box-shadow: 0 0 0.5rem 0.5rem var(--accent-transparent);
  }
  100% {
    box-shadow: 0 0 0 0 var(--transparent);
  }
}