@import "/assets/css/fonts.css";

:root {
  --color-google-btn: 255 255 255;
  --color-facebook-btn: 8 102 255;
  --color-discord-btn: 87 101 235;
  --color-guest-btn: 114 20 14;

  --color-main: 114 20 14;
  --color-secondary: 190 135 26;
  --color-dark-bg: 12 1 0;
  --color-card-dark-bg: 17 17 17;
  --color-field-dark: 22 22 22;
  --color-dark-border: 34 34 34;
  --color-content: 105 102 102;
}

*,
*::after,
*::before {
  outline: none;
}
body {
  font-family: Poppins, DINNextLTArabic, sans-serif;
  font-size: 16px;
  color-scheme: light !important;
}

.auth-text-shadow {
  font-weight: bold;

  text-align: center;
  color: #f1cc41;
  text-shadow: 0px 4px 0px #be871a;
}

.venite-font {
  font-family: "Venite";
}
.venite-italic-font {
  font-family: "VeniteItalic";
}

.auth-btn {
  border-radius: 10px;
  transition: 0.15s ease-in-out;
}

.google-btn {
  background: rgb(var(--color-google-btn));
  box-shadow: 0px 4px 0px rgba(var(--color-google-btn) / 0.5);
}

.facebook-btn {
  background: rgb(var(--color-facebook-btn));
  box-shadow: 0px 4px 0px rgba(var(--color-facebook-btn) / 0.5);
  color: #ffffff;
}

.discord-btn {
  background: rgb(var(--color-discord-btn));
  box-shadow: 0px 4px 0px rgba(var(--color-discord-btn) / 0.5);
}

.guest-btn {
  background: rgb(var(--color-guest-btn));
  box-shadow: 0px 4px 0px rgba(var(--color-guest-btn) / 0.5);
}

.hidden-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hidden-scroll::-webkit-scrollbar {
  display: none;
}

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 35px !important;
  background-image: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.3156 9.25195L13.7956 15.772C13.0256 16.542 11.7656 16.542 10.9956 15.772L4.47559 9.25195" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: calc(100% - 10px) 12px;
}

[dir="rtl"] select {
  background-position: calc(-100% - 10px) 12px;
}

[data-theme="light"] select {
  background-image: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.3156 9.25195L13.7956 15.772C13.0256 16.542 11.7656 16.542 10.9956 15.772L4.47559 9.25195" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
}