@font-face {
  font-family: Quicksand;
  src: url('./fonts/Quicksand-Regular.ttf');
}

@font-face {
  font-family: Comfortaa;
  src: url('./fonts/Comfortaa.ttf');
}

@font-face {
  font-family: ComfortaaB;
  src: url('./fonts/ComfortaaB.ttf');
}

@font-face {
  font-family: ComfortaaM;
  src: url('./fonts/ComfortaaM.ttf');
}

@font-face {
  font-family: Quicksand_B;
  src: url('./fonts/Quicksand-Bold.ttf');
}

@font-face {
  font-family: Quicksand_M;
  src: url('./fonts/Quicksand-Medium.ttf');
}

:root {
  --bg-user: whitesmoke;
  --box-text: black;
  --box-app: #a3a3a3;
  --main-color: #ff5621;
  --main-hover: #21caff;
  --scroll-color: #ff5521af;
  --grey: #cecece;
  --grey-light: lightgrey;
  --textbox-bg: #f5f5f5;
  --download-color: black;
  --safe-download: rgb(242, 242, 242);
  --text-color: rgb(7, 7, 7);
  --text-placeholder: rgba(47, 47, 47, 0.674);
  --text-card: black;
  --bg-card: #00000016;
  --bg-tchat: rgb(236, 236, 236);
  --componnent-bg: #0000002e;
  --disabled-color: rgba(255, 111, 111, 0.31);
  --text-mark: rgb(7, 7, 7);
  --font-tchat: Poppins, Comfortaa, Roboto, 'Open Sans';
  --font-B: Quicksand_B;
  --font: Quicksand;
  --font-M: Quicksand_M;
}

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

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-color: var(--scroll-color) #777777;
}

::selection {
  background: rgb(136, 136, 136);
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
  background-color: #777777;
  width: 12px;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background-color: var(--scroll-color);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--main-color);
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  width: 12px;
}

.modal-open {
  overflow: hidden;
}

.hidden {
  display: none;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(220, 220, 220);
  padding: 20px;
  max-width: 600px;
  max-height: 800px;
  height: 80%;
  overflow-y: auto;
  width: 90%;
  border-radius: 5px;
  z-index: 1000;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.modal-body h2 {
  margin-top: 20px;
}

#openModalBtn {
  cursor: pointer;
}


#closeModal {
  background-color: var(--main-color);
}